1.模板template的三種寫法
首先我們要明白template里面不是html語言而是xml語言敷待,標簽是需要閉合的
<input name="username"/>
1.vue完整版萌丈,寫在html里面
2.vue完整版赎瞎,寫在選項里
3.vue不完整版,配合xxx.vue
2
1.v-bind 綁定屬性
<img v-bind:src=:"x" />
簡寫方式:
<img :src="x"/>
<div :style="border:1px solid red"></div>
2.v-on 綁定事件
v-on:事件名
<button v-on:click="add"></button>
簡寫方式<button @click="add"></button>
3.條件判斷 if...else
<div v-if="x>0">
判斷x>0
</div>
4.循環(huán) for(value,key)in 對象/數(shù)組
<ul v-for="(u,index) in users" :key="index">
索引:{{index}} value值是{{u.name}}
</ul>
5.顯示或者隱藏
<div v-show="n%2===0">n是偶數(shù)</div>
元素已經生成存在融柬,只不過可能看不見(display)
6.Vue模板的特點
1.使用XML語法而不是HTML語法
2.表達式采用{{}}
3.使用v-html v-bind v-on等指令來操作dom
4.使用v-if v-for來實現(xiàn)條件判斷和循環(huán)語句?
7.指令 directive
什么是指令死嗦,以v開頭的就是指令
v-指令名:參數(shù)=值 v-on:click="add"
8.修飾符
一些指令支持修飾符
@click.stop="add"
@click.prevent="add"
@click.stop.prevent="add"
.sync修飾符