html代码
<div id="app">
<p>{{message}}</p>
<span>message1</span> <input v-model="message">
<span>message2</span> <input v-model="message">
</div>
javascript代码
var vm = new Vue({
el: "#app",
data: {
message: ''
},
methods: {}
});

说明

1) v-model 是用在表单中的指令

2) 双向绑定:都是指的是类似input这样的,自带change事件的表单项目

3) p标签中的message发生了变化,input的value的变化改变了message,从而使视图发生了相应的变化。

VUE 入坑系列 一 双向绑定的更多相关文章

  1. VUE 入坑系列 一 事件

    html代码 <div id="app"> <button v-on:click="counter += 1">加1</butto ...

  2. VUE 入坑系列 一 基础语法

    html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...

  3. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  4. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  5. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  6. gulp入坑系列(2)——初试JS代码合并与压缩

    在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...

  7. 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

    2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...

  8. 2-STM32带你入坑系列(点亮一个灯--Keil)

    1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...

  9. 1-STM32带你入坑系列(STM32介绍)

    由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车 ...

随机推荐

  1. R.layout引用不了布局文件

    删除import android.R 引用包所在的R文件..

  2. linux怎么区别文本文件和二进制文件

    linux的文本文件与二进制文件的区分与windows的区分是相同的!说到底计算机存储的文件都是以二进制形式存储的,但是区别是,习惯上认为: (1).文本文件 文本文件是包含用户可读信息的文件.这些文 ...

  3. JAVASCRIPT 和 AJax 实现局部验证

    JSP页面 <td width="10%" class="main_matter_td">真实姓名</td> <td width= ...

  4. BZOJ2843:极地旅行社(LCT入门题)

    不久之前,Mirko建立了一个旅行社,名叫“极地之梦”.这家旅行社在北极附近购买了N座冰岛,并且提供观光服 务.当地最受欢迎的当然是帝企鹅了,这些小家伙经常成群结队的游走在各个冰岛之间.Mirko的旅 ...

  5. Python装饰器单例

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/dutsoft/article/details/52057981#!/usr/bin/python#c ...

  6. linux上部署javaWeb项目

    将web项目打成war包,上传到Linux操作系统tomcat安装目录下的webapps下即可!

  7. Asp.net MVC 中Code First 迁移使用

    如果模型类(数据库上下文类Context和POCO类)发生改变,与数据库中的结构不一致,系统默认会抛出一个异常.可以考虑使用代码优先迁移. 代码优先迁移执行UpSert数据库操作,它在每一次更新数据库 ...

  8. ubuntu中desktop与alternate版本的区别(转载)

    转自:http://www.hyleong.com/ubuntu-desktop-alternate/ 今天ubuntu发布了11.04版本,但是下载的时候有desktop和alternate版本,他 ...

  9. Ocelot(九)- 教你如何配置Ocelot?

    配置 可以在此处找到示例配置.配置有两个部分.一组ReRoutes和一个GlobalConfiguration.ReRoutes是告诉Ocelot如何处理上游请求的对象.全局配置有点hacky并允许覆 ...

  10. Go基于协程的归并排序简单实现

    归并排序这个可能很多人都不知道,今天用Go语言简单的实现下,其他语言可能要基于线程来实现. //产生一个源 func ArraySource(a ...int) chan int{ out :=mak ...