VUE 入坑系列 一 双向绑定

html代码

<div id="app">
    <p>{{message}}</p>
    <span>message1</span> <input v-model="message">
    <span>message2</span> <input v-model="message">
 </div> 

View Code

javascript代码

var vm = new Vue({
  el: "#app",
  data: {
    message: ''
  },
  methods: {}
});

View Code

说明

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

2） 双向绑定：都是指的是类似input这样的，自带change事件的表单项目

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