Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應函數）
什么是組件？
組件（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；
②在輸入框內按回車鍵，則會將輸入框的內容轉為數字，并添加到一個列表里，該列表里轉換后的數字和一個刪除按鈕，并且輸入框內的值，變?yōu)檗D為數字后的值加一。
如圖：
③他的添加，利用的是雙向綁定，將輸入的值push到data里面的values這個數組之種，然后利用渲染列表的效果，輸出多行值。
④在button標簽里，函數的參數名給了一個參數，是該行索引，參數名是$index
⑤標簽里，觸發(fā)的函數的函數名，可以加括號，也可以不加括號，實測似乎是沒有影響的。
（七）標簽和API總結（1）
① {{ 變量名 }}
表示綁定的變量，調用時需要用this.變量名
② v-model=”變量”
雙向綁定使用，如果input里不加任何type就是文本，如果加type就是type，例如：
<input v-model="DATE" type="date"/>
<li>{{DATE}}</li>
就會將日期類型的輸入框的值，和li標簽顯示的內容綁定在一起。
③ v-on:click=”函數名”
點擊時觸發(fā)該函數，可加()也可以不加，$index作為參數表示索引，索引值從0開始。
④ v-for
雙向綁定的在數組內容更新后，會實時更新，v-model也是；
類似for in語句，被多次使用的是
⑤ v-on:事件
即觸發(fā)的事件，有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其在作用域鏈中的優(yōu)先級更高
以上所述是小編給大家介紹的Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應函數），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了vue編寫檢測敏感詞匯組件的多種思路，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
使用Vue.observable()進行狀態(tài)管理的實例代碼詳解
這篇文章主要介紹了使用Vue.observable()進行狀態(tài)管理的實例代碼，本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了使用antv替代Echarts實現數據可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue自定義一個v-model的實現代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細介紹了vue實現div拖拽互換位置的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了淺談vue項目,訪問路徑#號的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
下面小編就為大家分享一篇vue2.0 axios跨域并渲染的問題解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇vue data恢復初始化數據的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue中使用$http.post請求傳參的錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了一個Vue頁面的內存泄露分析詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06