快捷導(dǎo)航

vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定）

更新時(shí)間：2017年07月13日 14:20:00 作者：江湖z

本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

前言

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

一、單向綁定

（一）Mustache 語(yǔ)法，雙大括號(hào) {{}}（html 內(nèi)字符串綁定）

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

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

但是，這種雙大括號(hào)語(yǔ)法，只能用于 html 內(nèi)部的字符串，不能用于綁定 html 的屬性（如 title、disabled、checked 等），angular亦如是。

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

<div id="app">
  <p title={{title}}></p>
  <p v-bind:title="title">title屬性綁定，html屬性不能使用雙大括號(hào)形式綁定，只能使用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 屬性上面使用雙大括號(hào)語(yǔ)法，如 title={{title}}，但是如果像上面，在 vue.js 的 html 屬性上使用這種語(yǔ)法，框架本身就會(huì)報(bào)錯(cuò)，如下圖所示：

上面的報(bào)錯(cuò)，除了提示不能使用雙大括號(hào)語(yǔ)法以外，還告訴我們可以使用 v-bind 或者 shorthand，也就是 v-bind 的縮寫 :。這一點(diǎn)上，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 不支持一次性綁定的，而過(guò)分的使用數(shù)據(jù)綁定，將嚴(yán)重影響應(yīng)用性能，angular 中 bindonce 這個(gè)第三方模塊解決了這個(gè)問(wèn)題。而 vue 通過(guò) v-once 實(shí)現(xiàn)了框架本身對(duì)一次性綁定的原生支持。

## 不進(jìn)行 html 轉(zhuǎn)義
<div id="app">
  <p v-html="html">不轉(zhuǎn)義的綁定（直接輸出 html）</p>
</div>

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

出于安全考慮，默認(rèn)的數(shù)據(jù)綁定，會(huì)進(jìn)行轉(zhuǎn)義操作，屏蔽掉 html 標(biāo)簽。使用 v-html 指令，可以實(shí)現(xiàn)對(duì)文本內(nèi)容不轉(zhuǎn)義輸出。這里的輸出會(huì)替換掉目標(biāo)標(biāo)簽的 innerHTML 代碼中 p 標(biāo)簽中原本的文本將被替換，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 中的內(nèi)容的時(shí)候， {{input}} 將讓內(nèi)容同步更新到對(duì)應(yīng)的 div 元素中。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: