day29-Vue.js
一、Vue基礎(chǔ)
1.Vue
- Vue是用js封裝的一個(gè)庫(kù)，為網(wǎng)頁(yè)內(nèi)容提供數(shù)據(jù)的(不需要節(jié)點(diǎn)操作)。
2.創(chuàng)建Vue對(duì)象
var 變量名 = new Vue({ el:選擇器, data:數(shù)據(jù)對(duì)象, methods:方法對(duì)象 })
3.Vue相關(guān)指令
- 1)設(shè)置標(biāo)簽內(nèi)容：{{Vue中data屬性}}
- 2)設(shè)置標(biāo)簽的屬性值：v-bind:標(biāo)簽屬性 = Vue中data屬性
- 3)if語(yǔ)句：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ū)動(dòng)程序"- 事件驅(qū)動(dòng)程序：1)可以是操作語(yǔ)句2)Vue中methods中的屬性3)Vue中methods中的函數(shù)調(diào)用表達(dá)式
- el：綁定標(biāo)簽
- data：通過屬性提供數(shù)據(jù)
- methods：通過屬性提供方法
- 單項(xiàng)綁定：在js中改變Vue對(duì)象屬性的值，跟它關(guān)聯(lián)的標(biāo)簽的內(nèi)容也會(huì)發(fā)生改變
2.事件修飾符
v-on:事件名.事件修飾符="事件驅(qū)動(dòng)程序"- 常用修飾符：
- stop：捕獲事件，阻止事件傳遞給父標(biāo)簽
- prevent：覆蓋標(biāo)簽自帶事件
- once：事件只響應(yīng)一次
3.雙向綁定
v-model='Vue中data屬性'
