Vuejs第一篇之入門教程詳解(單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù))
什么是組件?
組件(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)文章
使用Vue.observable()進行狀態(tài)管理的實例代碼詳解
這篇文章主要介紹了使用Vue.observable()進行狀態(tài)管理的實例代碼,本文通過代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08vue data恢復(fù)初始化數(shù)據(jù)的實現(xiàn)方法
今天小編就為大家分享一篇vue data恢復(fù)初始化數(shù)據(jù)的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10