1.模板template的三種寫法

首先我們要明白template里面不是html語言而是xml語言，標(biāo)簽是需要閉合的

<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>

元素已經(jīng)生成存在，只不過可能看不見（display）

6.Vue模板的特點

1.使用XML語法而不是HTML語法

2.表達(dá)式采用{{}}

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修飾符