VUE（二）——繫結值
阿新 • • 發佈：2021-12-17
學習重點
這一篇主要介紹一下vue中MVVM的特點，也就是研究一下這個特點：改變資料的值，頁面會跟著改變，頁面上的值發生變化，資料也會聯動。
我們要學的就是：
- Html標籤與資料的繫結；
- Html標籤與屬性（CSS樣式等）的繫結，；
- Html標籤與事件（點選事件等）的繫結;
- 攔截器，給各種繫結設定一個攔截功能（資料需要滿足什麼情況，才需要繫結？）。
值繫結
使用佔位符{{fieldName}}，資料會總動填充到頁面上。
使用v-model可以與輸入控制元件（input/select）進行繫結，輸入框內的值發生變化，資料也會發生變化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試例項</title>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--資料繫結-->
<p>{{ message1 }} </p>
<!--類似InnerHTML-->
<div v-html="message2"></div>
<!--雙向繫結，輸入框與展示的資料進行聯動，v-model的值影響data中的值，data中的值再影響<p>標籤的值-->
<input v-model="message1">
</div>
<script>
new Vue({
el: '#app',
data: {
message1: 'runoob!',
message2: '<h>123456</h>',
}
})
</script>
</body>
</html>
屬性繫結
屬性繫結指的是控制元件自身的屬性，例如<a>標籤的href屬性，使用v-bind進行屬性繫結，簡寫 “:bind”、或者只保留一個 “:”。
後面會發現，其實自定義元件的值，也是通過這種方式進行繫結的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試例項</title>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--繫結id屬性-->
<div v-bind:id="rawId"></div>
<!--繫結href屬性-->
<a v-bind:href="url">{{name}}</a>
<!--繫結CSS樣式-->
<div :style="mystyle">{{name}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
mystyle:'background: #444;color: #eee',
name: 'baidu',
url: 'www.baidu.com',
rawId: 'div_id',
}
})
</script>
</body>
</html>
事件繫結
事件和屬性的區別，就是事件是一個Function，而屬性是一個Object。
語法上有所差別，vue需要在methods中定義事件函式，
使用v-on:click繫結點選事件，簡寫@click。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Vue 測試例項</title>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--點選事件，v-on表示 監聽事件-->
<button v-on:click="dialog('msg')">Click</button>
<!--點選事件，v-on表示 監聽事件-->
<button @click="dialog()">Click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob!'
},
methods: {
dialog: function (msg) {
if (!msg) {
alert(this.message);
} else {
alert(msg);
}
}
}
})
</script>
</body>
</html>
攔截器（filters）
資料繫結之前，對資料計算或者校驗，比如說：數值是百分比，顯示之前，你需要給它增加一個百分號。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Vue 測試例項</title>
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--一般的屬性繫結不需要攔截器，需要動態改變樣式可以使用雙向繫結實現-->
<div :class="{'class1': isShow}">Text</div>
<div :class="{'class1': true}">Text</div>
<!--在值繫結中，可以對輸入輸出進一步處理-->
<input :value="message2 | formatStr"/>
<span> {{message2 | formatStr}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
message1: 'msg1',
message2: 'msg',
isShow: false
},
filters: {
formatStr: function (value) {
return value + "%"
}
}
})
</script>
<script>
</script>
</body>
</html>
瘋狂的妞妞 ：每一天，做什麼都好，不要什麼都不做……