Vue 學(xué)習(xí)筆記入門篇-小結(jié)
v-model的作用是？
A: 雙向綁定數(shù)據(jù)
<input type="text" v-model="msg"/> {{msg}} <!--取數(shù)據(jù)-->
v-for demo
<div id="app">
<ul>
<li v-for="girl in girls">{{girl}}</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
girls: {
girl1: '徐若瑄',
girl2: '歐陽娜娜',
girl3: '山田直美'
}
},
})
使用v-bind衡蚂，v-on寫出一個(gè)demo
v-bind
<div id="box">
<input type="text" v-bind:value="msg">
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222"
}
}
})
</script>
v-on
<div id="box">
<!-- v-on -->
<button v-on:click="say">按鈕</button>
<!--<button @click="say">按鈕</button>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>
v-if,v-else,v-show,v-text,v-html,v-on,v-bind绳慎，v-once,v-cloak的作用分別是什么条霜？
- v-if：根據(jù)表達(dá)式的值的真假條件渲染元素忿峻。在切換時(shí)元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建昆箕。如果元素是 <template> ，將提出它的內(nèi)容作為條件塊妥色。
- v-else：跟在v-if后面使用
- v-show：根據(jù)表達(dá)式之真假值搪花，切換元素的 display CSS 屬性。
v-if 和v-show對比的區(qū)別 就是是否刪除dom節(jié)點(diǎn) 默認(rèn)值為false
- v-text 解析文本
- v-html 解析html標(biāo)簽
- v-on 綁定事件 函數(shù)必須寫在methods里面
- v-bind 動(dòng)態(tài)綁定 作用： 及時(shí)對頁面的數(shù)據(jù)進(jìn)行更改,設(shè)置HTML屬性
- v-once 進(jìn)入頁面時(shí) 只渲染一次 不在進(jìn)行渲染
- v-cloak 防止閃爍
