day29-Vue.js
一、Vue基礎(chǔ)
1.Vue
- Vue是用js封裝的一個庫葛账，為網(wǎng)頁內(nèi)容提供數(shù)據(jù)的(不需要節(jié)點操作)客年。
2.創(chuàng)建Vue對象
var 變量名 = new Vue({ el:選擇器, data:數(shù)據(jù)對象, methods:方法對象 })
3.Vue相關(guān)指令
- 1)設(shè)置標(biāo)簽內(nèi)容：{{Vue中data屬性}}
- 2)設(shè)置標(biāo)簽的屬性值：v-bind:標(biāo)簽屬性 = Vue中data屬性
- 3)if語句：v-if='Vue中data屬性'
- 判斷Vue中data屬性的值是否為true烤黍，如果是當(dāng)前標(biāo)簽就顯示，否則就隱藏
- for循環(huán)結(jié)構(gòu)：v-for='變量 in Vue中data屬性'
二擅耽、事件綁定
1.綁定事件
-
v-on:事件名="事件驅(qū)動程序"- 事件驅(qū)動程序：1)可以是操作語句2)Vue中methods中的屬性3)Vue中methods中的函數(shù)調(diào)用表達(dá)式
- el：綁定標(biāo)簽
- data：通過屬性提供數(shù)據(jù)
- methods：通過屬性提供方法
- 單項綁定：在js中改變Vue對象屬性的值活孩，跟它關(guān)聯(lián)的標(biāo)簽的內(nèi)容也會發(fā)生改變
2.事件修飾符
v-on:事件名.事件修飾符="事件驅(qū)動程序"- 常用修飾符：
- stop：捕獲事件，阻止事件傳遞給父標(biāo)簽
- prevent：覆蓋標(biāo)簽自帶事件
- once：事件只響應(yīng)一次
3.雙向綁定
v-model='Vue中data屬性'
