Vuejs單向綁定、雙向綁定、列表渲染、回應函數

什麼是組件？

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

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

（一）單向綁定

<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</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: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</script>

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

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

（三）函數傳回值

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

效果：

（三）函數傳回值

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

效果：

（三）函數傳回值

<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: &#39;#app&#39;,
data: {
message: 1
},
methods: {
add: function () {
this.message++; //这步要加this才能正确获取到值
},
minus: function () {
this.message--;
},
reset: function () {
this.message = 0;
}
}
})
</script>

①輸出值也是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: &#39;#app&#39;,
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>

  

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

個人認為，

in

①可以把list in to todos，理解為 list然後把下一行的list.text理解為todos[list].text

然後這個v-for標籤在哪裡，就是以他為單位進行多次複製。

（五）處理使用者輸入

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

效果：

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

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

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

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

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

（六）多功能

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

 

效果：

①初始輸入框內值為1；

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

如圖：

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

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

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

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

① {{ 變量名}}

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

② v-model=變量”
雙向綁定使用，如果input裡不加任何type就是文本，如果加type就是type，例如：

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

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

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

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

④ v-for

雙向綁定的在陣列內容更新後，會即時更新，v-model也是；

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

👤 v-on:⑤ v-on

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

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

更多的需要之看看

⑥ new vue

透過new一個vue的實例，然後傳一個物件作為參數給這個實例；

其中：

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

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

methods 表示方法

⑦ 函數內部呼叫變數

通過this.變數名，例如：

rrreee

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

rrreee

裡面的val. ，至於原因，個人認為是這裡的val處於v-for的作用域內，因此val in values 裡的val其在作用域鏈中的優先級更高

希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！

更多Vuejs單向綁定、雙向綁定、列表渲染、響應函數相關文章請關注PHP中文網！