模板 template

template的三種寫法

寫法一：Vue完整版，寫在HTML里

//html

{{n}}

+1

//vue

new Vue({

el: '#xxx',

data(){

return{

n:0

}

},

methods:{add(){}}

})

復(fù)制代碼

寫法二：Vue完整版，寫在選項(xiàng)里

//html

//vue

new Vue({

template: `

{{n}}

+1

`,

data(){return{n:0}},

methods:{add(){ this.n += 1 }}

}).$mount('#app')

//注意: div#app將會(huì)被替代!

復(fù)制代碼

寫法三：Vue非完整版，配合xxx.vue文件

{{n}}

+1

export default {

data(){ return {n:0} },

// data 必須為函數(shù)

methods:{add(){ this.n += 1 }}

}

//在另一個(gè)vue文件中寫如下代碼

import Xxx from './xxx.vue'

// Xxx是一個(gè)options對象

new Vue({

render: h => h(Xxx)

}).$mount('#app')

復(fù)制代碼

template的語法有哪些

我們把HTML模板叫做template

一、展示內(nèi)容

{{ 表達(dá)式 }}，如{{ object.a }}

{{ 任何簡單運(yùn)算 }}，如{{ n+1 }}

{{ 調(diào)用函數(shù) }}，如{{ fn(n) }}

注意如果{{}}內(nèi)值為null或undefined時(shí)會(huì)不顯示

以上寫法等同于v-text

二、HTML內(nèi)容

假設(shè)data.a的值為hello，需求是在頁面直接顯示出粗體hello而不是這串代碼。

我們只需要寫成

用v-html可以把表達(dá)式按照html的標(biāo)簽來顯示。

三、顯示{{ n }}(把雙花括號也顯示出來)

使用v-pre則不會(huì)對模板進(jìn)行編譯。

{{ n }}

四、綁定屬性 v-bind

綁定src：

v-bind可簡寫成，：(冒號)就是v-bind的縮寫！

綁定對象：

五、綁定事件 v-on

+1 點(diǎn)擊"+1"后去執(zhí)行add()

x 點(diǎn)擊"x"后去執(zhí)行x(1)

y 點(diǎn)擊"y"后執(zhí)行表達(dá)式y(tǒng)*=2

v-on的縮寫為@，如+1

六、條件判斷

if else 判斷

x大于0x等于0x小于0

復(fù)制代碼

七、for 循環(huán)

for (value,key) in 對象或數(shù)組

• 索引:{{index}} 值:{{u.name}}

復(fù)制代碼

• 屬性名:{{name}} 屬性值:{{name}}

復(fù)制代碼

八、顯示與隱藏

x是偶數(shù)

當(dāng)x除以2取余等于0時(shí)顯示“x是偶數(shù)”，否則不顯示。

模板的主要特點(diǎn)

使用XML語法(不是HTML！！！)

使用{{ }}插入表達(dá)式，其實(shí)雙花括號就是占位符

使用 v-on v-bind v-html 等指令來操作DOM

使用 v-if v-for 等指令實(shí)現(xiàn)條件判斷和循環(huán)

指令 directive

以“v-”開頭的東西就叫做指令！

指令語法：v-指令名:"參數(shù)"=值，如

+1

PS:有些指令沒有參數(shù)和值如v-pre ，有些指令沒有值如@click.prevent

修飾符

v-on的修飾符

.stop 表示阻止事件冒泡或傳播

.prevent 表示阻止默認(rèn)動(dòng)作

.stop.prevent 阻止事件冒泡并阻止默認(rèn)動(dòng)作

v-bind修飾符

.sync修飾符

.sync的功能是：當(dāng)一個(gè)子組件改變了一個(gè) prop 的值時(shí)，這個(gè)變化也會(huì)同步到父組件中所綁定。

{{bar}}

template: '

點(diǎn)我+1',

data: function(){

return {copyFoo: this.foo}

},

props: ['foo'],

methods: {

increment: function(){

this.$emit('update:foo', ++this.copyFoo);

}

}

});

new Vue({

el: '#app',

data: {bar: 0}

});復(fù)制代碼

代碼會(huì)被擴(kuò)展成 bar = val">

總結(jié)

以上是生活随笔為你收集整理的vue 模板 html 表达式,Vue 模板template、指令directive、修饰符的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。