欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuejs第一篇之入門教程詳解(單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù))

 更新時間:2016年09月09日 10:18:47   作者:qq20004604  
組件(Component)是 Vue.js 最強大的功能之一。接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識,非常不錯,感興趣的朋友一起看看吧

什么是組件?

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

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

(一)單向綁定

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

①el應(yīng)該表示綁定的意思,綁定id=app這個標簽

也可以改為以下這樣:

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

el: '.app',

一樣有效。

但如果是多個的話,只對第一個有效:

<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的返回值;

②缺點:失去雙向綁定!

(四)渲染列表

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

個人認為,

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

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

然后這個v-for標簽在哪里,就是以他為單位進行多次復(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> 

效果:

①對輸入框的值,點擊一次add按鈕,則值+1;

②如果不能加,則像正常表達式加錯了那樣返回結(jié)果,例如NaN;

③data里的message的值,是初始值;

④methods里是函數(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()); //注意,因為當上面的val是字符串類型的時候,才能用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)按回車鍵,則會將輸入框的內(nèi)容轉(zhuǎn)為數(shù)字,并添加到一個列表里,該列表里轉(zhuǎn)換后的數(shù)字和一個刪除按鈕,并且輸入框內(nèi)的值,變?yōu)檗D(zhuǎn)為數(shù)字后的值加一。

如圖:

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

④在button標簽里,函數(shù)的參數(shù)名給了一個參數(shù),是該行索引,參數(shù)名是$index

⑤標簽里,觸發(fā)的函數(shù)的函數(shù)名,可以加括號,也可以不加括號,實測似乎是沒有影響的。

(七)標簽和API總結(jié)(1)

① {{ 變量名 }}

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

② v-model=”變量”

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

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

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

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

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

④ v-for

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

類似for in語句,被多次使用的是

⑤ v-on:事件

即觸發(fā)的事件,有click(點擊),keypress(按鍵按下)

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

更多的需要之查看

⑥ new vue

通過new一個vue的實例,然后傳一個對象作為參數(shù)給這個實例;

其中:

el 表示綁定的模板(只會匹配到綁定的第一個)

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

methods 表示方法

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

通過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,至于原因,個人認為是這里的val處于v-for的作用域內(nèi),因此val in values 里的val其在作用域鏈中的優(yōu)先級更高

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

相關(guān)文章

最新評論