這兩天學習了vue.js數(shù)據(jù)綁定這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。

前言

感覺 vue 的很多方面的內容，都參考了 angular 的東西，數(shù)據(jù)綁定方面，更是赤裸裸的“抄襲”。對照來看，更有助于我們學習和理解框架本身透露出來的思想，而非框架本身。

一、單向綁定

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

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

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

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

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

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

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

某些框架如 Ember.js 支持在 html 屬性上面使用雙大括號語法，如 title={{title}}，但是如果像上面，在 vue.js 的 html 屬性上使用這種語法，框架本身就會報錯，如下圖所示：

上面的報錯，除了提示不能使用雙大括號語法以外，還告訴我們可以使用 v-bind 或者 shorthand，也就是 v-bind 的縮寫 :。這一點上，vue 還是和 angular 的 ng-bind 非常相似。

一次性綁定

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

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

  app.once = 'changed content';
</script>

原本 angular 不支持一次性綁定的，而過分的使用數(shù)據(jù)綁定，將嚴重影響應用性能，angular 中 bindonce 這個第三方模塊解決了這個問題。而 vue 通過 v-once 實現(xiàn)了框架本身對一次性綁定的原生支持。

## 不進行 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>

出于安全考慮，默認的數(shù)據(jù)綁定，會進行轉義操作，屏蔽掉 html 標簽。使用 v-html 指令，可以實現(xiàn)對文本內容不轉義輸出。這里的輸出會替換掉目標標簽的 innerHTML 代碼中 p 標簽中原本的文本將被替換，angular 中也有類似的 ng-bind-html。

雙向綁定

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論