什么是組件？

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。

接下來(lái)給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)基礎(chǔ)知識(shí)，具體詳情如下所示：

（一）單向綁定

<div id="app"> 
{{ message }} 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
} 
}) 
</script> 

①el應(yīng)該表示綁定的意思，綁定id=app這個(gè)標(biāo)簽

也可以改為以下這樣：

<div class="app"> 
{{ message }} 
</div> 

el: '.app',

一樣有效。

但如果是多個(gè)的話，只對(duì)第一個(gè)有效：

<div class="app"> 
{{ message }} 
</div> 
<div class="app"> 
{{ message }} 
</div> 
Hello Vue.js!
{{ message }}

②data里的message變量，表示{{message}的值

（二）雙向綁定

<div id="app"> 
{{ message }} 
<br/> 
<input v-model="message"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
} 
}) 
</script> 

效果是：

①input輸入框里有初始值，值是data里的message屬性的值；

②修改輸入框的值可以影響外面的值；

（三）函數(shù)返回值

<div id="app"> 
{{ message() }} 
<br/> 
<input v-model="message()"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: function () { 
return 'Hello Vue.js!'; 
} 
} 
}) 
</script> 

效果：

①輸出值也是message的返回值；

②缺點(diǎn)：失去雙向綁定！

（四）渲染列表

<div id="app"> 
<ul> 
<li v-for="list in todos"> 
{{list.text}} 
</li> 
</ul> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
todos: [ 
{text: "1st"}, 
{text: "2nd"}, 
{text: "3rd"} 
] 
} 
}) 
</script> 

v-for里的list，類似for in里面的i，

個(gè)人認(rèn)為，

①可以把list in todos，理解為for list in todos

②然后把下一行的list.text理解為 todos[list].text

然后這個(gè)v-for標(biāo)簽在哪里，就是以他為單位進(jìn)行多次復(fù)制。

（五）處理用戶輸入

<div id="app"> 
<input v-model="message"> 
<input type="button" value="值+1" v-on:click="add"/> 
<input type="button" value="值-1" v-on:click="minus"/> 
<input type="button" value="重置歸零" v-on:click="reset"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 1 
}, 
methods: { 
add: function () { 
this.message++; //這步要加this才能正確獲取到值 
}, 
minus: function () { 
this.message--; 
}, 
reset: function () { 
this.message = 0; 
} 
} 
}) 
</script> 

效果：

①對(duì)輸入框的值，點(diǎn)擊一次add按鈕，則值+1；

②如果不能加，則像正常表達(dá)式加錯(cuò)了那樣返回結(jié)果，例如NaN；

③data里的message的值，是初始值；

④methods里是函數(shù)集合，他們之間用逗號(hào)分隔；

⑤獲取值的時(shí)候，要加上this，例如this.message獲取的是message的值。

（六）多功能

<div id="app"> 
<input v-model="val" v-on:keypress.enter="addToList"> 
<ul> 
<li v-for="val in values"> 
{{val.val}} 
<input type="button" value="刪除" v-on:click="removeList($index)"/> 
</li> 
</ul> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
val: "1", 
values: [] 
}, 
methods: { 
addToList: function () { 
var val = parseInt(this.val.trim()); //注意，因?yàn)楫?dāng)上面的val是字符串類型的時(shí)候，才能用trim()，如果是數(shù)字類型，則用this.val 
if (val) { 
this.values.push({val: val}); 
} 
this.val = String(val + 1); 
}, 
removeList: function (index) { 
this.values.splice(index, 1); 
} 
} 
}) 
</script> 

效果：

①初始輸入框內(nèi)值為1；

②在輸入框內(nèi)按回車鍵，則會(huì)將輸入框的內(nèi)容轉(zhuǎn)為數(shù)字，并添加到一個(gè)列表里，該列表里轉(zhuǎn)換后的數(shù)字和一個(gè)刪除按鈕，并且輸入框內(nèi)的值，變?yōu)檗D(zhuǎn)為數(shù)字后的值加一。

如圖：

③他的添加，利用的是雙向綁定，將輸入的值push到data里面的values這個(gè)數(shù)組之種，然后利用渲染列表的效果，輸出多行值。

④在button標(biāo)簽里，函數(shù)的參數(shù)名給了一個(gè)參數(shù)，是該行索引，參數(shù)名是$index

⑤標(biāo)簽里，觸發(fā)的函數(shù)的函數(shù)名，可以加括號(hào)，也可以不加括號(hào)，實(shí)測(cè)似乎是沒(méi)有影響的。

（七）標(biāo)簽和API總結(jié)（1）

① {{ 變量名 }}

表示綁定的變量，調(diào)用時(shí)需要用this.變量名

② v-model=”變量”

雙向綁定使用，如果input里不加任何type就是文本，如果加type就是type，例如：

<input v-model="DATE" type="date"/> 
<li>{{DATE}}</li> 

就會(huì)將日期類型的輸入框的值，和li標(biāo)簽顯示的內(nèi)容綁定在一起。

③ v-on:click=”函數(shù)名”

點(diǎn)擊時(shí)觸發(fā)該函數(shù)，可加()也可以不加，$index作為參數(shù)表示索引，索引值從0開(kāi)始。

④ v-for

雙向綁定的在數(shù)組內(nèi)容更新后，會(huì)實(shí)時(shí)更新，v-model也是；

類似for in語(yǔ)句，被多次使用的是

⑤ v-on:事件

即觸發(fā)的事件，有click（點(diǎn)擊），keypress（按鍵按下）

事件后面可以跟更具體的，例如keypress.enter是回車，keypress.space是空格等

更多的需要之查看

⑥ new vue

通過(guò)new一個(gè)vue的實(shí)例，然后傳一個(gè)對(duì)象作為參數(shù)給這個(gè)實(shí)例；

其中：

el 表示綁定的模板（只會(huì)匹配到綁定的第一個(gè)）

data 表示數(shù)據(jù)，可以直接被取用，例如用在v-model或者是{{變量名}}中

methods 表示方法

⑦ 函數(shù)內(nèi)部調(diào)用變量

通過(guò)this.變量名，例如：

data: { 
val: "1", 
values: [] 
}, 
methods: { 
addToList: function () { 
console.log(this.val); 

這里的this.val就是上面的data.val，也是html里的{{val}}，也是v-model=”val”，但不是

<li v-for="val in values"> 
{{val.val}} 
<input type="button" value="刪除" v-on:click="removeList($index)"/> 
</li> 

里面的val.val，至于原因，個(gè)人認(rèn)為是這里的val處于v-for的作用域內(nèi)，因此val in values 里的val其在作用域鏈中的優(yōu)先級(jí)更高

以上所述是小編給大家介紹的Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論