Vuejs入門教程之Vue生命周期，數(shù)據(jù)，手動掛載，指令，過濾器
原教程：
http://cn.vuejs.org/guide/instance.html
http://cn.vuejs.org/guide/syntax.html
本博文是在原教程的基礎上加上實例，并嘗試說明的更詳細。
（十）Vue實例的生命周期
如圖：（我自己翻譯的中文版，英文版請查看本博文頂部的，第一個鏈接）
（八）傳入的數(shù)據(jù)綁定
先創(chuàng)建一個對象（假如是obj），然后將他傳入Vue實例中，作為data屬性的值，那么
①obj的值的變化，將影響Vue實例中的值的變化；
②相反一樣；
③可以在Vue實例外面操縱obj，一樣對Vue實例有影響；
④獲取obj.a的值（假如他有這個屬性），可以通過Vue實例（例如變量vm），vm.a這樣的形式來獲取（他們是等價的，也是綁定的）；
⑤后續(xù)添加的數(shù)值是無效的
例如：
<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函數(shù)中兩條語句效果是等價的，都可以讓顯示的值+1
但若將代碼改成這樣：
var obj = {b: 1}
var vm = new Vue({
el: '#app',
data: obj
})
function add() {
obj.a = 1;
}
那么在點擊按鈕后，并不會顯示值（沒有綁定）。
注意：即使修改為vm.a=1也是無效的
準確的說，在Vue實例創(chuàng)建后，添加新的屬性到實例上，是不會觸發(fā)視圖更新的。
在以上情況下，obj.a === vm.a ，注意，a之前沒有data。
函數(shù)：
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變化時，會觸發(fā)回調函數(shù)
更多的可以查看
搜索 $ 作為關鍵詞來查看。
（十一）$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>
（十三）數(shù)據(jù)綁定：
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
③插入內容的數(shù)據(jù)綁定無效（在沒有使用partials的情況下）
使用兩個大括號或者三個大括號都一樣
例如，將②中的html改為以下值
data: {
html: "<span>span{{val}}</span>",
val: "11"
}
顯示結果乃是：
span{{val}}
說明沒有綁定數(shù)據(jù)；
按照說明，使用partials可以綁定
http://cn.vuejs.org/api/#partial
不過不會用，等研究明白了再說
④禁止在用戶提交的內容上動態(tài)渲染，否則會受到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
但是只能輸出表達式，不能輸出比如函數(shù)，或者直接放個v-for標簽之類的。
但是我推斷后者應該可以，可能是我寫的方法不對。
（十五）過濾器
①簡單來說，在插值中，加入管道符“|”，然后過濾器會生效。
例如：
capitalize這個過濾器，會將字符串的首字母大寫
<div id="app">
{{{html|capitalize}}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
html: "abc",
val: "11"
}
})
</script>
輸出值是Abc
如果是漢字、數(shù)字、或者是本身首字母就大寫了，則無反應。
②過濾器不能充當表達式使用，因此不能在表達式內使用過濾器，只能在表達式的后面使用。
例如：
{{html[0]|capitalize}}
是可以的，會輸出html的首個字母并將其大寫；
但
(html|capitalize)[0]
是會報錯的（不加括號也報錯），說明，不能將過濾器視為表達式的一部分
③過濾器可以加參數(shù)。
第一個參數(shù)：固定為表達式的值（被過濾目標）；
第二個參數(shù)，過濾器后面的第一個單詞；
第三個參數(shù)，過濾器后面的第二個單詞，依次類推。
參數(shù)加引號則視為字符串，參數(shù)不加引號則視為表達式，表達式的值作為參數(shù)傳遞給過濾器。
官方例子是：
{{ 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的值被設置為空）
②指令后面可以添加參數(shù)：
有些指令（例如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事件，表示監(jiān)視的是click事件，也可以改為
<div v-on:mouseup="alert">背景顏色變化</div>
表示該標簽當鼠標彈起的時候，執(zhí)行methods的alert函數(shù)。
③修飾符
修飾符用于表示指令應當以特殊的方式進行綁定。
例如：.literal修飾符告訴指令應當將他的值解析為字符串，而不是表達式
或者是keydown.enter表示按回車鍵時調用函數(shù)
<input v-on:keydown.enter="alert"></input>
④縮寫：
v-on的縮寫是@ shift+數(shù)字2
v-bind的縮寫是:就是冒號
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于Vue代碼分割懶加載的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
本篇文章主要介紹了分享一個精簡的vue.js 圖片lazyload插件實例。非常具有實用價值，需要的朋友可以參考下。2017-03-03
文章介紹了如何在Vue項目中使用jsPlumb庫來生成流程圖,文章提供了兩個簡單的示例代碼,展示了如何定義流程圖的數(shù)據(jù)字段和如何配置連線樣式,最后,文章鼓勵讀者繼續(xù)探索更多關于vue和jsPlumb的使用技巧,感興趣的朋友一起看看吧2025-02-02
vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class
本篇文章主要介紹了vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Pinia 是2019年由vue.js官方成員重新設計的新一代狀態(tài)管理庫,類似Vuex,下面我們就來學習一下如何通過Pinia實現(xiàn)持久化存儲的相關知識,感興趣的小伙伴可以了解下2023-12-12
本文主要介紹了Vue+Cesium快速搭建的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要介紹了vue實現(xiàn)一個懶加載的樹狀表格實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了拿來即用的vue旋轉木馬組件demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue3結合typescript中使用class封裝axios
這篇文章主要為大家介紹了vue3結合typescript中使用class封裝axios實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue使用Google Recaptcha驗證的實現(xiàn)示例
我們最近的項目中需要使用谷歌機器人驗證，所以就動手實現(xiàn)一下，本文就來詳細的介紹一下vue Google Recaptcha驗證，感興趣的可以了解一下2021-08-08