數據綁定——Vue.js

1、單向綁定

（一）雙大括號 {{}}（html 內字符串綁定）

DOM

<div id="app">
  <p>{{text}}</p>
</div>

JS

<script>
  var app = new Vue({
    el: '#app',
    data: {
      text: 'text content'
    }
  });
</script>

 

可是，這種雙大括號語法，只能用於 html 內部的字符串，不能用於綁定 html 的屬性（如 title、disabled、checked 等）

（二）v-bind 指令（html 屬性綁定）

DOM

<div id="app">
  <p title={{title}}></p>
  <p v-bind:title="title">title屬性綁定，html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p>
  <p :title="title">「:」 是 「v-bind」 的快捷方式</p>
</div>

 

JS 

<script>
  var app = new Vue({
    el: '#app',
    data: {
      title: 'title content'
    }
  });
</script>

　　

在 vue.js 的 html 屬性上使用title={{title}}這種語法，框架自己就會報錯，以下圖所示：

上面的報錯，除了提示不能使用雙大括號語法之外，還告訴咱們能夠使用 v-bind 或者 shorthand，也就是 v-bind 的縮寫

 

2、一次性綁定

DOM

<div id="app">
  <p v-once>{{once}}</p>
</div>

 

JS

<script>
  var app = new Vue({
    el: '#app',
    data: {
      once: 'once content'
    }
  });
 
  app.once = 'changed content';
</script>

vue 經過 v-once 實現了框架自己對一次性綁定的原生支持。

 

## 不進行 html 轉義
<div id="app">
  <p v-html="html">不轉義的綁定（直接輸出 html）</p>
</div>
 
<script>
  var app = new Vue({
    el: '#app',
    data: {
      html: '<div>div element</div>'
    }
  });
</script>

 

出於安全考慮，默認的數據綁定，會進行轉義操做，屏蔽掉 html 標籤。使用 v-html 指令，能夠實現對文本內容不轉義輸出。這裏的輸出會替換掉目標標籤的 innerHTML 代碼中 p 標籤中本來的文本將被替換

 

3、雙向綁定

DOM

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

JS

<script>
  var app = new Vue({
    el: '#app',
    data: {
      input: 'two-way-binding'
    }
  });
</script>

雙向綁定依賴於 v-model 指令。修改 textarea 中的內容的時候， {{input}} 將讓內容同步更新到對應的 div 元素中。