溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
1. 什么是雙向綁定？
Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。 雙向是指：HTML標(biāo)簽數(shù)據(jù) 綁定到 Vue對象，另外反方向數(shù)據(jù)也是綁定的。通俗點(diǎn)說就是，Vue對象的改變會直接影響到HTML的標(biāo)簽的變化，而且標(biāo)簽的變化也會反過來影響Vue對象的屬性的變化。
這樣以來，就徹底變革了之前Dom的開發(fā)方式，之前Dom驅(qū)動的開發(fā)方式尤其是以jQuery為主的開發(fā)時代，都是dom變化后，觸發(fā)js事件，然后在事件中通過js代碼取得標(biāo)簽的變化，再跟后臺進(jìn)行交互，然后根據(jù)后臺返回的結(jié)果再更新HTML標(biāo)簽，異常的繁瑣。有了Vue這種雙向綁定，讓開發(fā)人員只需要關(guān)心json數(shù)據(jù)的變化即可，Vue自動映射到HTML上，而且HTML的變化也會映射回js對象上，開發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動的 開發(fā)時代，遠(yuǎn)遠(yuǎn)拋棄了Dom開發(fā)主導(dǎo)的時代了。
2. Vue綁定文本
數(shù)據(jù)綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值，比如模板引擎：handlebars中就是用的{{}}.
創(chuàng)建的Vue對象中的data屬性就是用來綁定數(shù)據(jù)到HTML的。參考如下代碼：
<span>Message: {{ msg }}</span>
<script>
var app = new Vue({ // 創(chuàng)建Vue對象。Vue的核心對象。
el: '#app', // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
msg: 'Hello Vue!' // message 自定義的數(shù)據(jù)
}
});
</script>
3. 綁定數(shù)據(jù)中使用JavaScript表達(dá)式
對于所有的數(shù)據(jù)綁定， Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
<span>Message: {{ msg + ' - ' + name }}</span>
<script>
var app = new Vue({ // 創(chuàng)建Vue對象。Vue的核心對象。
el: '#app', // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
msg: 'Hi', // message 自定義的數(shù)據(jù)
name: 'flydragon' // name自定義的屬性，vue可以多個自定義屬性，屬性類型也可是復(fù)雜類型
}
});
</script>
結(jié)果：
Hi - flydragon
當(dāng)然Vue還可以支持表達(dá)中的任何計(jì)算、函數(shù)處理等。參考下面的綜合點(diǎn)的案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之?dāng)?shù)據(jù)綁定-表達(dá)式運(yùn)算</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ msg + ' - ' + name }}
<p>
{{ isOk ? '123' : '456' }}
</p>
<p>我的年齡是： {{ age *2 }}</p>
</div>
<script>
var app = new Vue({ // 創(chuàng)建Vue對象。Vue的核心對象。
el: '#app', // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
msg: 'Hi', // message 自定義的數(shù)據(jù)
name: 'flydragon',
isOk: true,
age: 18
}
});
</script>
</body>
</html>
4. Vue屬性綁定
Vue中不能直接使用{{ expression }}語法進(jìn)行綁定html的標(biāo)簽，而是用它特有的v-bind指令（就是一種寫法，先按照格式走，具體指令是什么可以后續(xù)再了解）。
綁定的語法結(jié)構(gòu)：
<標(biāo)簽 v-bind:屬性名="要綁定的Vue對象的data里的屬性名"></標(biāo)簽>
例如:
<span v-bind:id="menuId">{{ menuName }}</span>
參考如下代碼案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之?dāng)?shù)據(jù)綁定--屬性綁定</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:id="MenuContaineId">
<a href="#" v-bind:class="MenuClass">首頁</a>
<a href="#" v-bind:class="MenuClass">產(chǎn)品</a>
<a href="#" v-bind:class="MenuClass">服務(wù)</a>
<a href="#" v-bind:class="MenuClass">關(guān)于</a>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
MenuClass: 'top-menu',
MenuContaineId: 'sitemenu'
}
});
</script>
</body>
</html>
5. 屬性綁定簡寫
由于v-bind使用非常頻繁，所以Vue提供了簡單的寫法，可以去掉v-bind直接使用:即可。
例如： <div :id="MenuContaineId"> 等價于 <div v-bind:id="MenuContaineId">
6. 輸出純HTML
由于Vue對于輸出綁定的內(nèi)容做了提前encode，保障在綁定到頁面上顯示的時候不至于被xss攻擊。但某些場景下，我們確保后臺數(shù)據(jù)是安全的，那么我們就要在網(wǎng)頁中顯示原生的HTML標(biāo)簽。Vue提供了v-html指令。
<div id="app">
<div v-bind:id="MenuContaineId" v-html="MenuBody">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
MenuContaineId: 'menu',
MenuBody: '<p>這里是菜單的內(nèi)容</p>'
}
});
</script>
結(jié)果：
<div id="app"> <div id="menu"> <p>這里是菜單的內(nèi)容</p> </div> </div>
7. 樣式綁定
對于普通的屬性的綁定，只能用上面的講的綁定屬性的方式。而Vue專門加強(qiáng)了class和style的屬性的綁定?？梢杂袕?fù)雜的對象綁定、數(shù)組綁定樣式和類。
7.1. 綁定樣式對象
經(jīng)常我們需要對樣式進(jìn)行切換，比如：div的顯示和隱藏，某些標(biāo)簽active等。Vue提供的對象綁定樣式的方式就很容做這些事情。
代碼：
<div v-bind:class="{ active: isActive }"></div>
解釋：當(dāng) isActive為 true時， div就會具有了active樣式類，如果 isActive為false，那么div就去掉active樣式類。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之綁定樣式類</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.active {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
綁定顏色類
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
MenuContaineId: 'menu',
isActive: true
}
});
</script>
</body>
</html>
7.2. 混合普通的HTML標(biāo)簽樣式類及綁定樣式對象
v-bind:class 指令可以與普通的 class 屬性共存。
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
isActive: true,
hasError: false
}
});
</script>
結(jié)果：
<div id="app"> <div class="static active"> </div> </div>
7.3. 綁定data中的樣式對象
直接在html屬性中的雙引號內(nèi)寫對象，還是很不爽，也沒有智能提示，很容易寫錯。 Vue可以讓我們直接把綁定的class字符串指向data的一個對象，這樣就非常方便了，既可以有智能提示，又可以很復(fù)雜進(jìn)行編輯，不用擔(dān)心煩人的""了。
<div id="app">
<div class="static"
v-bind:class="classObject">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': false
}
}
});
</script>
結(jié)果：
<div id="app"> <div class="static active"> </div> </div>
7.4. 綁定樣式數(shù)組
其實(shí)綁定數(shù)組，就是綁定樣式對象的延續(xù)，看官網(wǎng)的例子代碼吧。
<div v-bind:class="[activeClass, errorClass]">
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
當(dāng)然還有很多其他很有趣的支持，就不贅述了。
例如:
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">
7.5. 內(nèi)聯(lián)樣式綁定
內(nèi)聯(lián)樣式的綁定，非常類似于樣式類的操作。v-bind:style 的對象語法十分直觀——看著非常像 CSS ，其實(shí)它是一個 JavaScript 對象。 CSS屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）。
看個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:>
vue 入門系列教程
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 19,
width: 200,
bgcolor: 'red'
}
});
</script>
</body>
</html>
自動添加前綴
當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測并添加相應(yīng)的前綴。
8. 計(jì)算屬性
在做數(shù)據(jù)的綁定的時候,數(shù)據(jù)要進(jìn)行處理之后才能展示到html頁面上，雖然vue提供了非常好的表達(dá)式綁定的方法，但是只能應(yīng)對低強(qiáng)度的需求。比如： 把一個日期按照規(guī)定格式進(jìn)行輸出，可能就需要我們對日期對象做一些格式化的出來，表達(dá)式可能就捉襟見肘了。
Vue對象提供的computed屬性，可以讓我們開發(fā)者在里面可以放置一些方法，協(xié)助我們綁定數(shù)據(jù)操作，這些方法可以跟data中的屬性一樣用，注意這些方法用的時候不要加()。 例子來了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<!-- computed里面的函數(shù)可以直接當(dāng)成data里面的屬性用，非常方便，注意沒有括號?。?！-->
<td>生日</td><td>{{ getBirthday }}</td>
</tr>
<tr>
<td>年齡</td><td>{{ age }}</td>
</tr>
<tr>
<td>地址</td><td>{{ address }}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
birthday: 914228510514, // 這是一個日期對象的值：1998年11月1日
age: 19,
address: '北京昌平區(qū)龍澤飛龍'
},
computed: {
// 把日期換成 常見規(guī)格格式的字符串。
getBirthday: function () {
var m = new Date(this.birthday);
return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
}
}
});
</script>
</body>
</html>
9. 綁定的數(shù)據(jù)過濾器
過濾器本質(zhì)就是數(shù)據(jù)在呈現(xiàn)之前先進(jìn)行過濾和篩選。官網(wǎng)上寫的不錯，我就不再贅述，下面是官網(wǎng)的描述。
Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。過濾器應(yīng)該被添加在 mustache 插值的尾部，由“管道符”指示：
{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
Vue 2.x 中，過濾器只能在 mustache 綁定和 v-bind 表達(dá)式（從 2.1.0 開始支持）中使用，因?yàn)檫^濾器設(shè)計(jì)目的就是用于文本轉(zhuǎn)換。為了在其他指令中實(shí)現(xiàn)更復(fù)雜的數(shù)據(jù)變換，你應(yīng)該使用計(jì)算屬性。
過濾器函數(shù)總接受表達(dá)式的值作為第一個參數(shù)。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
過濾器可以串聯(lián)：
{{ message | filterA | filterB }}
過濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里，字符串 'arg1' 將傳給過濾器作為第二個參數(shù)， arg2 表達(dá)式的值將被求值然后傳給過濾器作為第三個參數(shù)。
10. 核心：自動響應(yīng)對象的變化到HTML標(biāo)簽
上面的例子都是 數(shù)據(jù)對象是寫死在創(chuàng)建的Vue對像上，那如果數(shù)據(jù)（data）發(fā)生改變時會怎樣呢？ 讓我們用chrome把上面例子的頁面打開，并打開發(fā)者工具控制臺,輸入：app.age = 20會有什么情況發(fā)生呢？
在頁面中添加一個按鈕，動態(tài)的增加年齡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<!-- computed里面的函數(shù)可以直接當(dāng)成data里面的屬性用，非常方便，注意沒有括號?。?！-->
<td>生日</td><td>{{ getBirthday }}</td>
</tr>
<tr>
<td>年齡</td><td>{{ age }}</td>
</tr>
<tr>
<td>地址</td><td>{{ address }}</td>
</tr>
</table>
</div>
<!-- 添加下面這行代碼，動態(tài)增加 年齡，頁面會有怎樣的變化呢？？ -->
<button type="button" onclick="app.age+=1;" >加加</button>
<script>
var app = new Vue({
el: '#app',
data: {
birthday: 914228510514, // 這是一個日期對象的值：1998年11月1日
age: 19,
address: '北京昌平區(qū)龍澤飛龍'
},
computed: {
// 把日期換成 常見規(guī)格格式的字符串。
getBirthday: function () {
var m = new Date(this.birthday);
return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
}
}
});
</script>
</body>
</html>
11. 雙向數(shù)據(jù)綁定
上面的例子我們大多講的是單向的 js對象向 HTML數(shù)據(jù)進(jìn)行綁定，那HTML怎樣向js進(jìn)行反饋數(shù)據(jù)呢？ HTML中只有表達(dá)能接受用戶的輸入，最簡單的演示雙向綁定的就是文本框了。
Vue提供了一個新的指令：v-model進(jìn)行雙向數(shù)據(jù)的綁定，注意不是v-bind。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之htmlraw</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model可以直接指向data中的屬性，雙向綁定就建立了 -->
<input type="text" name="txt" v-model="msg">
<p>您輸入的信息是：{{ msg }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '雙向數(shù)據(jù)綁定的例子'
}
});
</script>
</body>
</html>
最終的結(jié)果就是：你改變input文本框的內(nèi)容的時候，p標(biāo)簽中的內(nèi)容會跟著進(jìn)行改變，哇是不是很神奇呢...
關(guān)于其他表單的綁定的語法我就不贅述了，還是參考官網(wǎng)吧，我這里大部分例子也是來自官網(wǎng)。
12. 數(shù)據(jù)綁定總結(jié)
vue提供了大量的綁定的語法和方法，非常方便我們進(jìn)行數(shù)據(jù)的綁定，尤其它是雙向的數(shù)據(jù)綁定，極大的減少了我們dom操作的麻煩程度。可能你越來越喜歡它了吧...
Github地址：源碼下載
其他詳情請參考：http://aicoder.com/vue/preview/all.html
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼