Vuejs——(2)Vue生命週期,資料,手動掛載,指令,過濾器
原教程:
http://cn.vuejs.org/guide/instance.html
http://cn.vuejs.org/guide/syntax.html
本博文是在原教程的基礎上加上例項,並嘗試說明的更詳細。
(十)Vue例項的生命週期
如圖:(我自己翻譯的中文版,英文版請檢視本博文頂部的,第一個連結)
(八)傳入的資料繫結
先建立一個物件(假如是obj),然後將他傳入Vue例項中,作為data屬性的值,那麼
①obj的值的變化,將影響Vue例項中的值的變化;
②相反一樣;
③可以在Vue例項外面操縱obj,一樣對Vue例項有影響;
④獲取obj.a的值(假如他有這個屬性),可以通過
⑤後續新增的數值是無效的
例如:
<div id="app"> {{a}} </div> <button onclick="add()">+1</button> <script> var obj = {a: 1} var vm = new Vue({ el: '#app', data: obj }) function add() { //vm.a++; obj.a++; } </script>
add函式中兩條語句效果是等價的,都可以讓顯示的值+1
但若將程式碼改成這樣:
var obj = {b: 1}
var vm = new Vue({
el: '#app',
data: obj
})
function add() {
obj.a = 1;
}
那麼在點選按鈕後,並不會顯示值(沒有繫結)。
注意:即使修改為vm.a=1也是無效的
準確的說,在Vue例項建立後,新增新的屬性到例項上,是不會觸發檢視更新的。
在以上情況下,obj.a === vm.a ,注意,a之前沒有data。
函式:
function test() { if (vm.a === obj.a) { console.log("vm.a === obj.a"); } }
其判斷條件是true
(九)Vue例項暴露的介面
在上一篇中,提到vm.a=obj.a這個;然而我們並沒有獲取全部的data這個屬性;
而Vue提供了幾個暴露的介面:
介面(假設例項為vm) |
效果 |
vm.$data |
是vm的data屬性 |
vm.$el |
是vm的el屬性所指向的dom結點 |
vm.$watch |
示例: vm.$watch(“a”,function(newVal, oldVal){}) 當data裡的a變化時,會觸發回撥函式 |
更多的可以檢視
搜尋 $ 作為關鍵詞來檢視。
(十一)$mount()手動掛載
當Vue例項沒有el屬性時,則該例項尚沒有掛載到某個dom中;
假如需要延遲掛載,可以在之後手動呼叫vm.$mount()方法來掛載。例如:
<div id="app">
{{a}}
</div>
<button onclick="test()">掛載</button>
<script>
var obj = {a: 1}
var vm = new Vue({
data: obj
})
function test() {
vm.$mount("#app");
}
初始,顯示的是{{a}}
當點選按鈕後,變成了1
(十二)用Vue的v-for寫一個表格
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button onclick="load()">點選掛載表格</button>
</div>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #888;
border-top: 1px solid #888;
background: #efefef;
}
th, td {
border-right: 1px solid #888;
border-bottom: 1px solid #888;
padding: 5px 15px;
}
th {
font-weight: bold;
background: #ccc;
}
</style>
<script>
var obj = {
grid: [
{id: "ID", name: "名字", description: "描述", clickButton: "點選事件"},
{id: "1", name: "a", description: "amorous", clickButton: "點選彈窗"},
{id: "2", name: "b", description: "beautiful", clickButton: "點選彈窗"},
{id: "3", name: "c", description: "clever", clickButton: "點選彈窗"},
{id: "4", name: "d", description: "delicious", clickButton: "點選彈窗"},
]
}
var vm = new Vue({
data: obj,
template: '<table><tr v-for="row in grid">' +
'<td>{{row.id}}</td>' +
'<td>{{row.name}}</td>' +
'<td>{{row.description}}</td>' +
'<td><button v-on:click="alert($index)">{{row.clickButton}}</button></td>' +
'</tr></table>',
methods: {
alert: function (index) {
alert("該行是第" + index + "行")
}
}
})
function load() {
vm.$mount("#app");
}
</script>
</body>
</html>
(十三)資料繫結:
html標籤的純文字顯示/被當做html標籤處理;
插值單次更新;
①使用兩個大括號時,假如字串內容是html標籤,那麼不會被轉義,而是正常顯示;
②使用三個打括號時,字串內的html標籤會被直接轉義,
例如:
<div id="app">
{{html}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
螢幕上顯示內容是:
<span>span</span>
如果是三個大括號包含變數名:
<div id="app">
{{{html}}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
<script>
function load() {
vm.$mount("#app");
}
</script>
顯示的內容則只有
span
③插入內容的資料繫結無效(在沒有使用partials的情況下)
使用兩個大括號或者三個大括號都一樣
例如,將②中的html改為以下值
data: {
html: "<span>span{{val}}</span>",
val: "11"
}
顯示結果乃是:
span{{val}}
說明沒有繫結資料;
按照說明,使用partials可以繫結
不過不會用,等研究明白了再說
④禁止在使用者提交的內容上動態渲染,否則會受到XSS攻擊
⑤插值也可以用在html標籤的屬性中,例如class,或者id,或者其他。
但是Vue.js的指令和特殊特性內是不可以用插值的。
(十四)繫結表示式
插值的位置,可以使用JavaScript的表示式,例如:
<div id="app">
{{html?html:val}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
html: "",
val: "11"
}
})
</script>
例如以上示例,
假如有html值,則輸出hmtl值,否則輸出val值;
也可以輸出字串,例如改為:
{{html?html:"no words"}}
則輸出no words
但是隻能輸出表達式,不能輸出比如函式,或者直接放個v-for標籤之類的。
但是我推斷後者應該可以,可能是我寫的方法不對。
(十五)過濾器
①簡單來說,在插值中,加入管道符“|”,然後過濾器會生效。
例如:
capitalize這個過濾器,會將字串的首字母大寫
<div id="app">
{{{html|capitalize}}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
html: "abc",
val: "11"
}
})
</script>
輸出值是Abc
如果是漢字、數字、或者是本身首字母就大寫了,則無反應。
②過濾器不能充當表示式使用,因此不能在表示式內使用過濾器,只能在表示式的後面使用。
例如:
{{html[0]|capitalize}}
是可以的,會輸出html的首個字母並將其大寫;
但
(html|capitalize)[0]
是會報錯的(不加括號也報錯),說明,不能將過濾器視為表示式的一部分
③過濾器可以加引數。
第一個引數:固定為表示式的值(被過濾目標);
第二個引數,過濾器後面的第一個單詞;
第三個引數,過濾器後面的第二個單詞,依次類推。
引數加引號則視為字串,引數不加引號則視為表示式,表示式的值作為引數傳遞給過濾器。
官方例子是:
{{ message | filterA 'arg1' arg2 }}
④過濾器可以自己手寫
(十六)指令
①指令(Directives)就是特殊的,以帶有字首v-的特性。
簡單粗暴來說,標籤裡v-開頭的就是指令(當然,要Vue能支援)。
指令的值限定為 繫結表示式,就是等號後引號裡的。
如:
<div id="app">
<div v-if="html">
{{val}}
</div>
<button onclick="test()">消失上一行</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
html: "abc",
val: "11"
}
})
function test() {
vm.html = "";
}
</script>
輸出11
其中<div v-if=”html”>就是指令,
可以通過點選按鈕讓那一行消失(因為html的值被設定為空)
②指令後面可以新增引數:
有些指令(例如v-bind)可以在名稱後等號前,新增一個屬性,這個屬性的作用是響應性的更新HTML特性。
例如:
<style>
.white {
background-color: white;
}
.black {
background-color: black;
}
</style>
<div id="app">
<div v-bind:class="BC">背景顏色變化</div>
<button onclick="test()">消失上一行</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
BC: "black"
}
})
function test() {
vm.BC = "white";
}
</script>
初始情況下,這個div的class和data裡的BC繫結,由於BC的值是black,那麼相當於v-bind所在的標籤的class=”black”,所以初始情況下,背景顏色為黑色。
當點選按鈕後,BC的值被更改為white,那麼相當於標籤的class=”white”,而類white的背景顏色為白色,所以該div的背景顏色變成了白色。
類似的有v-on:click事件,表示監視的是click事件,也可以改為
<div v-on:mouseup="alert">背景顏色變化</div>
表示該標籤當滑鼠彈起的時候,執行methods的alert函式。
③修飾符
修飾符用於表示指令應當以特殊的方式進行繫結。
例如:.literal修飾符告訴指令應當將他的值解析為字串,而不是表示式
或者是keydown.enter表示按回車鍵時呼叫函式
<input v-on:keydown.enter="alert"></input>
④縮寫:
v-on的縮寫是@ shift+數字2
v-bind的縮寫是:就是冒號