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

10余年的根河網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整根河建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“根河網(wǎng)站設(shè)計(jì)”,“根河網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

前言

感覺(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定）
文章分享：http://chinadenli.net/article16/iecggg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站制作、電子商務(wù)、網(wǎng)站營(yíng)銷、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)