一、單向綁定

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

圖片發(fā)自簡書App

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

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

圖片發(fā)自簡書App

圖片發(fā)自簡書App

一次性綁定

圖片發(fā)自簡書App

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

圖片發(fā)自簡書App

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

雙向綁定

圖片發(fā)自簡書App

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

本文轉(zhuǎn)載