模板 template

template的三种写法

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

//html

//vue

new Vue({

el: '#xxx',

data(){

return{

n:0

}

},

methods:{add(){}}

})

复制代码

写法二：Vue完整版，写在选项里

//html

//vue

new Vue({

template: `

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

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

}).$mount('#app')

//注意: div#app将会被替代!

复制代码

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

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则不会对模板进行编译。

四、绑定属性 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 判断

复制代码

七、for 循环

for (value,key) in 对象或数组

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

复制代码

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

复制代码

八、显示与隐藏

当x除以2取余等于0时显示“x是偶数”，否则不显示。

模板的主要特点

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

使用{{ }}插入表达式，其实双花括号就是占位符

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

使用 v-if v-for 等指令实现条件判断和循环

指令 directive

以“v-”开头的东西就叫做指令！

指令语法：v-指令名:"参数"=值，如

PS:有些指令没有参数和值如v-pre ，有些指令没有值如@click.prevent

修饰符

v-on的修饰符

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

.prevent 表示阻止默认动作

.stop.prevent 阻止事件冒泡并阻止默认动作

v-bind修饰符

.sync修饰符

.sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

template: '

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