溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這兩天學習了vue.js數據綁定這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。
前言
感覺 vue 的很多方面的內容，都參考了 angular 的東西，數據綁定方面，更是赤裸裸的“抄襲”。對照來看，更有助于我們學習和理解框架本身透露出來的思想，而非框架本身。
一、單向綁定
（一）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 不支持一次性綁定的，而過分的使用數據綁定，將嚴重影響應用性能，angular 中 bindonce 這個第三方模塊解決了這個問題。而 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 標簽中原本的文本將被替換，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 元素中。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
