DIV CSS 佈局教程網

什麼是組件？

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

接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應函數基礎知識，具體詳情如下所示：

（一）單向綁定

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

①el應該表示綁定的意思，綁定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屬性的值；

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

（三）函數返回值

<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標簽在哪裡，就是以他為單位進行多次復制。

（五）處理用戶輸入

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

②如果不能加，則像正常表達式加錯了那樣返回結果，例如NaN；

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

④methods裡是函數集合，他們之間用逗號分隔；

⑤獲取值的時候，要加上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()，如果是數字類型，則用this.val 
if (val) { 
this.values.push({val: val}); 
} 
this.val = String(val + 1); 
}, 
removeList: function (index) { 
this.values.splice(index, 1); 
} 
} 
}) 
</script> 

效果：

①初始輸入框內值為1；

②在輸入框內按回車鍵，則會將輸入框的內容轉為數字，並添加到一個列表裡，該列表裡轉換後的數字和一個刪除按鈕，並且輸入框內的值，變為轉為數字後的值加一。

如圖：

③他的添加，利用的是雙向綁定，將輸入的值push到data裡面的values這個數組之種，然後利用渲染列表的效果，輸出多行值。

④在button標簽裡，函數的參數名給了一個參數，是該行索引，參數名是$index

⑤標簽裡，觸發的函數的函數名，可以加括號，也可以不加括號，實測似乎是沒有影響的。

（七）標簽和API總結（1）

① {{ 變量名 }}

表示綁定的變量，調用時需要用this.變量名

② v-model=”變量”

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

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

就會將日期類型的輸入框的值，和li標簽顯示的內容綁定在一起。

③ v-on:click=”函數名”

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

④ v-for

雙向綁定的在數組內容更新後，會實時更新，v-model也是；

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

⑤ v-on:事件

即觸發的事件，有click（點擊），keypress（按鍵按下）

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

更多的需要之查看

⑥ new vue

通過new一個vue的實例，然後傳一個對象作為參數給這個實例；

其中：

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

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

methods 表示方法

⑦ 函數內部調用變量

通過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的作用域內，因此val in values 裡的val其在作用域鏈中的優先級更高

以上所述是小編給大家介紹的Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應函數），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！