vue2 - 数据的绑定

1.插值语法

插值语法主要是用于解析标签体内容

{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

  <div id="root">
    <h1>Hello，{{name}}</h1>
    <!--可以写js表达式-->
    <h1>{{name.length}},{{1+1}},{{Date.now()}}</h1>
  </div>

  <script>
    //创建vue实例
    const x=new Vue({
      el: '#root', //根据id获取对象
      data: {
        name: 'world'
      }
    });
  </script>

 

2.单向数据绑定

单向数据绑定(v-bind)，主要是绑定元素的属性，数据只能从data流向页面

当data中的值发生改变，页面上绑定的值也会发生变化。可以简写为 “ : ”，去掉v-bind。

  <div id="root">
    <!--可以写js表达式-->
    <h1 v-bind:class="name" v-bind:data-length="name.length"></h1>
  </div>

  <script>
    //创建vue实例
    const x=new Vue({
      el: '#root', //根据id获取对象
      data: {
        name: 'world'
      }
    });
  </script>

 

3.双向绑定

双向绑定(v-model)，数据不仅能从data流向页面，还可以从页面流向data

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

双向绑定简单来说就是，表单中的value属性中的值，发生改变时，data中对应属性的值也会发生改变

data中属性的值发生改变时，表单中的value属性值也会发生改变，它们之间互相影响

  <div id="root">
    <input type="text" v-model:value="name"></input>
  </div>

  <script>
    //创建vue实例
    const x=new Vue({
      el: '#root', //根据id获取对象
      data: {
        name: 'world'
      }
    });