Vue 初探

绑定数据

一个 Vue 的实例对应一个 element，数据通绑定的方式，在 element 中通过 {{变量名}} 获取数据，在 Vue 实例的 data 属性定义数据。

<div id="app">
 {{ message }}
</div>

new Vue({ 
  el: '#app',
 data: { message: 'Hello Vue.js!' }
})

操作数据

在 element 的 input 标签绑定数据，即可将变动传递给 Vue 实例。

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

new Vue({ 
 el: '#app', 
 data: { message: 'Hello Vue.js!' }
})

通过指定 input 标签的 v-model 属性，input 标签值发生变化会立即响应到 Vue 实例的 data 属性的对应数据，Vue 有许多预定义属性如 v-for、v-on:click 等，各实现不同的功能。

Vue 实例里的 data 是绑定数据的属性，还有其他的属性如 methods，对应 button 标签的 v-on:click 属性，在 method 属性的方法中，可以用 this 访问或操作 data 属性的数据。

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({ 
  el: '#app', 
  data: { message: 'Hello Vue.js!' },
  methods: { 
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('') 
      }
  }
})

总结

对于 html 标签，即 View 层，需要由 Vue 预定义的属性来绑定数据、回调方法，使用 {{}} 获取数据。

上面定义的 html 操作要生效，需要创建一个 Vue 实例，并通过 el 属性绑定，否则那段 html 代码......就是普通的 html 代码。

对比 React 有些复杂，许多新的概念需要学习，但学起来还是挺简单的。