vue 学习笔记（1）

声明式渲染。

数据在 JS 代码中，通过 Vue，这些数据与 DOM 绑定，这就是说，你在 JS 中改变了数据，DOM 就发生改变。

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world!',
  }
})

上面的例子中，声明了数据 message，你可以将这个变量的值用在 HTML 页面上。一旦你的 JS 代码修改了这个变量，对应 HTML 上绑定的 DOM 也就发生了变化。

我们看几种绑定形式：

• 绑定属性值

  <div v-bind:title="message"></div>
  

• 条件绑定

  <div v-if="isvisible">ABC</div>
  

• 循环绑定数组

  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
  

• 绑定事件处理

  <button v-on:click="reverseMessage">反转</button>
  

• 表达的双向绑定 v-model

  <input v-model="message">
  

这是绑定输入框的输入值，当用户收入时，message 的值也随之改变。