vue 模板 html 表达式,Vue 模板template、指令directive、修饰符

本文详细介绍了Vue.js中template的三种常见写法:HTML内嵌、选项对象和非完整版配合组件。通过实例演示了如何使用{{表达式}

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

模板 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大于0
x等于0
x小于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">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值