模板 template

template的三種寫法

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

//html

{{n}}

+1

//vue

new Vue({

el: '#xxx',

data(){

return{

n:0

}

},

methods:{add(){}}

})

復制代碼

寫法二：Vue完整版，寫在選項里

//html

//vue

new Vue({

template: `

{{n}}

+1

`,

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

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

}).$mount('#app')

//注意: div#app將會被替代!

復制代碼

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

{{n}}

+1

export default {

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

// data 必須為函數

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

}

//在另一個vue文件中寫如下代碼

import Xxx from './xxx.vue'

// Xxx是一個options對象

new Vue({

render: h => h(Xxx)

}).$mount('#app')

復制代碼

template的語法有哪些

我們把HTML模板叫做template

一、展示內容

{{ 表達式 }}，如{{ object.a }}

{{ 任何簡單運算 }}，如{{ n+1 }}

{{ 調用函數 }}，如{{ fn(n) }}

注意如果{{}}內值為null或undefined時會不顯示

以上寫法等同于v-text

二、HTML內容

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

我們只需要寫成

用v-html可以把表達式按照html的標簽來顯示。

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

使用v-pre則不會對模板進行編譯。

{{ n }}

四、綁定屬性 v-bind

綁定src：

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

綁定對象：

五、綁定事件 v-on

+1 點擊"+1"后去執行add()

x 點擊"x"后去執行x(1)

y 點擊"y"后執行表達式y*=2

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

六、條件判斷

if else 判斷

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

復制代碼

七、for 循環

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

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

復制代碼

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

復制代碼

八、顯示與隱藏

x是偶數

當x除以2取余等于0時顯示“x是偶數”，否則不顯示。

模板的主要特點

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

使用{{ }}插入表達式，其實雙花括號就是占位符

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

使用 v-if v-for 等指令實現條件判斷和循環

指令 directive

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

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

+1

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

修飾符

v-on的修飾符

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

.prevent 表示阻止默認動作

.stop.prevent 阻止事件冒泡并阻止默認動作

v-bind修飾符

.sync修飾符

.sync的功能是：當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定。

{{bar}}

template: '

點我+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}

});復制代碼

代碼會被擴展成 bar = val">

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。