腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vuejs入門(mén)教程之Vue生命周期，數(shù)據(jù)，手動(dòng)掛載，指令，過(guò)濾器

更新時(shí)間：2017年04月19日 10:43:52 作者：qq20004604

本篇文章主要介紹了Vuejs入門(mén)教程之Vue生命周期，數(shù)據(jù)，手動(dòng)掛載，指令，過(guò)濾器的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

原教程：

http://cn.vuejs.org/guide/instance.html

http://cn.vuejs.org/guide/syntax.html

本博文是在原教程的基礎(chǔ)上加上實(shí)例，并嘗試說(shuō)明的更詳細(xì)。

（十）Vue實(shí)例的生命周期

如圖：（我自己翻譯的中文版，英文版請(qǐng)查看本博文頂部的，第一個(gè)鏈接）

（八）傳入的數(shù)據(jù)綁定

先創(chuàng)建一個(gè)對(duì)象（假如是obj），然后將他傳入Vue實(shí)例中，作為data屬性的值，那么

①obj的值的變化，將影響Vue實(shí)例中的值的變化；

②相反一樣；

③可以在Vue實(shí)例外面操縱obj，一樣對(duì)Vue實(shí)例有影響；

④獲取obj.a的值（假如他有這個(gè)屬性），可以通過(guò)Vue實(shí)例（例如變量vm），vm.a這樣的形式來(lái)獲?。ㄋ麄兪堑葍r(jià)的，也是綁定的）；

⑤后續(xù)添加的數(shù)值是無(wú)效的

例如：

<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ù)中兩條語(yǔ)句效果是等價(jià)的，都可以讓顯示的值+1

但若將代碼改成這樣：

var obj = {b: 1} 
var vm = new Vue({ 
 el: '#app', 
 data: obj 
}) 
function add() { 
 obj.a = 1; 
}

那么在點(diǎn)擊按鈕后，并不會(huì)顯示值（沒(méi)有綁定）。

注意：即使修改為vm.a=1也是無(wú)效的

準(zhǔn)確的說(shuō)，在Vue實(shí)例創(chuàng)建后，添加新的屬性到實(shí)例上，是不會(huì)觸發(fā)視圖更新的。

在以上情況下，obj.a === vm.a ，注意，a之前沒(méi)有data。

函數(shù)：

function test() { 
 if (vm.a === obj.a) { 
  console.log("vm.a === obj.a"); 
 } 
}

其判斷條件是true

（九）Vue實(shí)例暴露的接口

在上一篇中，提到vm.a=obj.a這個(gè)；然而我們并沒(méi)有獲取全部的data這個(gè)屬性；

而Vue提供了幾個(gè)暴露的接口：

接口（假設(shè)實(shí)例為vm）效果

vm.$data 是vm的data屬性

vm.$el 是vm的el屬性所指向的dom結(jié)點(diǎn)

vm.$watch 示例：

vm.$watch(“a”,function(newVal, oldVal){})

當(dāng)data里的a變化時(shí)，會(huì)觸發(fā)回調(diào)函數(shù)

更多的可以查看

http://cn.vuejs.org/api/

搜索 $　作為關(guān)鍵詞來(lái)查看。

（十一）$mount()手動(dòng)掛載

當(dāng)Vue實(shí)例沒(méi)有el屬性時(shí)，則該實(shí)例尚沒(méi)有掛載到某個(gè)dom中；

假如需要延遲掛載，可以在之后手動(dòng)調(diào)用vm.$mount()方法來(lái)掛載。例如：

<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}}

當(dāng)點(diǎn)擊按鈕后，變成了1

（十二）用Vue的v-for寫(xiě)一個(gè)表格

<!DOCTYPE html> 
<html> 
<head> 
 <title>Vue</title> 
 <script src="vue.js"></script> 
</head> 
<body> 
<div id="app"> 
 <button onclick="load()">點(diǎn)擊掛載表格</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: "點(diǎn)擊事件"}, 
   {id: "1", name: "a", description: "amorous", clickButton: "點(diǎn)擊彈窗"}, 
   {id: "2", name: "b", description: "beautiful", clickButton: "點(diǎn)擊彈窗"}, 
   {id: "3", name: "c", description: "clever", clickButton: "點(diǎn)擊彈窗"}, 
   {id: "4", name: "d", description: "delicious", clickButton: "點(diǎn)擊彈窗"}, 
  ] 
 } 
 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標(biāo)簽的純文本顯示／被當(dāng)做html標(biāo)簽處理；

插值單次更新；

①使用兩個(gè)大括號(hào)時(shí)，假如字符串內(nèi)容是html標(biāo)簽，那么不會(huì)被轉(zhuǎn)義，而是正常顯示；

②使用三個(gè)打括號(hào)時(shí)，字符串內(nèi)的html標(biāo)簽會(huì)被直接轉(zhuǎn)義，

例如：

<div id="app"> 
 {{html}} 
</div> 
<script> 
 var vm = new Vue({ 
  el:"#app", 
  data: { 
   html:"<span>span</span>" 
  } 
 }) 
</script>

屏幕上顯示內(nèi)容是：

<span>span</span>

如果是三個(gè)大括號(hào)包含變量名：

<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>

顯示的內(nèi)容則只有

span

③插入內(nèi)容的數(shù)據(jù)綁定無(wú)效（在沒(méi)有使用partials的情況下）

使用兩個(gè)大括號(hào)或者三個(gè)大括號(hào)都一樣

例如，將②中的html改為以下值

data: { 
 html: "<span>span{{val}}</span>", 
 val: "11" 
}

顯示結(jié)果乃是：

span{{val}}

說(shuō)明沒(méi)有綁定數(shù)據(jù)；

按照說(shuō)明，使用partials可以綁定

http://cn.vuejs.org/api/#partial

不過(guò)不會(huì)用，等研究明白了再說(shuō)

④禁止在用戶提交的內(nèi)容上動(dòng)態(tài)渲染，否則會(huì)受到XSS攻擊

⑤插值也可以用在html標(biāo)簽的屬性中，例如class，或者id，或者其他。

但是Vue.js的指令和特殊特性內(nèi)是不可以用插值的。

（十四）綁定表達(dá)式

插值的位置，可以使用JavaScript的表達(dá)式，例如：

<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

但是只能輸出表達(dá)式，不能輸出比如函數(shù)，或者直接放個(gè)v-for標(biāo)簽之類的。

但是我推斷后者應(yīng)該可以，可能是我寫(xiě)的方法不對(duì)。

（十五）過(guò)濾器

①簡(jiǎn)單來(lái)說(shuō)，在插值中，加入管道符“|”，然后過(guò)濾器會(huì)生效。

例如：

capitalize這個(gè)過(guò)濾器，會(huì)將字符串的首字母大寫(xiě)

<div id="app"> 
 {{{html|capitalize}}} 
</div> 
<script> 
 var vm = new Vue({ 
  el: "#app", 
  data: { 
   html: "abc", 
   val: "11" 
  } 
 }) 
</script>

輸出值是Abc

如果是漢字、數(shù)字、或者是本身首字母就大寫(xiě)了，則無(wú)反應(yīng)。

②過(guò)濾器不能充當(dāng)表達(dá)式使用，因此不能在表達(dá)式內(nèi)使用過(guò)濾器，只能在表達(dá)式的后面使用。

例如：

{{html[0]|capitalize}}

是可以的，會(huì)輸出html的首個(gè)字母并將其大寫(xiě)；

但

(html|capitalize)[0]

是會(huì)報(bào)錯(cuò)的（不加括號(hào)也報(bào)錯(cuò)），說(shuō)明，不能將過(guò)濾器視為表達(dá)式的一部分

③過(guò)濾器可以加參數(shù)。

第一個(gè)參數(shù)：固定為表達(dá)式的值（被過(guò)濾目標(biāo)）；

第二個(gè)參數(shù)，過(guò)濾器后面的第一個(gè)單詞；

第三個(gè)參數(shù)，過(guò)濾器后面的第二個(gè)單詞，依次類推。

參數(shù)加引號(hào)則視為字符串，參數(shù)不加引號(hào)則視為表達(dá)式，表達(dá)式的值作為參數(shù)傳遞給過(guò)濾器。

官方例子是：

{{ message | filterA 'arg1' arg2 }}

④過(guò)濾器可以自己手寫(xiě)

（十六）指令

①指令（Directives）就是特殊的，以帶有前綴v-的特性。

簡(jiǎn)單粗暴來(lái)說(shuō)，標(biāo)簽里v-開(kāi)頭的就是指令（當(dāng)然，要Vue能支持）。

指令的值限定為綁定表達(dá)式，就是等號(hào)后引號(hào)里的。

如：

<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”>就是指令，

可以通過(guò)點(diǎn)擊按鈕讓那一行消失（因?yàn)閔tml的值被設(shè)置為空）

②指令后面可以添加參數(shù)：

有些指令（例如v-bind）可以在名稱后等號(hào)前，添加一個(gè)屬性，這個(gè)屬性的作用是響應(yīng)性的更新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>

初始情況下，這個(gè)div的class和data里的BC綁定，由于BC的值是black，那么相當(dāng)于v-bind所在的標(biāo)簽的class=”black”，所以初始情況下，背景顏色為黑色。

當(dāng)點(diǎn)擊按鈕后，BC的值被更改為white，那么相當(dāng)于標(biāo)簽的class=”white”，而類white的背景顏色為白色，所以該div的背景顏色變成了白色。

類似的有v-on:click事件，表示監(jiān)視的是click事件，也可以改為

<div v-on:mouseup="alert">背景顏色變化</div>

表示該標(biāo)簽當(dāng)鼠標(biāo)彈起的時(shí)候，執(zhí)行methods的alert函數(shù)。

③修飾符

修飾符用于表示指令應(yīng)當(dāng)以特殊的方式進(jìn)行綁定。

例如：.literal修飾符告訴指令應(yīng)當(dāng)將他的值解析為字符串，而不是表達(dá)式

或者是keydown.enter表示按回車鍵時(shí)調(diào)用函數(shù)

<input v-on:keydown.enter="alert"></input>

④縮寫(xiě)：

v-on的縮寫(xiě)是@ shift+數(shù)字2