Vue模板语法

最新推荐文章于 2024-09-25 18:15:20 发布

weixin_33713503

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量63

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/1518527

版权

2019独角兽企业重金招聘Python工程师标准>>>

文本

数据绑定最常见的形式是使用Mustache 语法（双大括号）的文本插值
<span>Message: {{ msg }}</span>
通过使用v-once指令，执行一次性插值，当数据改变时，插值处的内容不会更新，但请注意这会影响到该节点所有的数据绑定
<span v-once>这个将不会改变: {{ msg }}</span>

纯html

双大括号会将数据解释为纯文本，而非HTML,为了输出真正的html,需要使用v-html指令
<div v-html="rawHtml"></div> 这个div的内容将会被替换成为属性值rawHtml
var app=new Vue({
el:"#app-7",
data:{rawHtml:"<h2>hello world</h2>"}
})

特性（属性）

Mustache 语法不能作用在HTML特性（属性）上，这种情况应该使用v-bind指令
<div v-bind:id="dynamicId"></div>
同样适用于布尔类特性
<button v-bind:disabled="isButtonDisabled">Button</button>

使用JavaScript表达式

Vue.js都提供了完全的Javascript表达式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

指令

指令是带有v-前缀的特殊属性
<p v-if="seen">现在你看到我了</p>

v-if指令将根据表达式seen的值的真假来插入/移除<p>元素

参数
一些指令能够接收一个参数，在指令名称之后以冒号表示，例如，v-bind指令可以用于响应式的更新html属性
<a v-bind:href="url"></a>
在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定在一起

另一个例子是v-on指令，它用于监听DOM事件
<a v-on:click="doSomething"></a>

修饰符

修饰符Modifiers是以点 . 指名的特殊后缀，用于指出一个指令应该以特殊方式绑定，

例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()
<form v-on:submit.prevent="onSubmit"></form>

过滤器

Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在2个地方,mustache 差值和v-bind 表达式

{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>
过滤器函数总接收表达式的值作为第一个参数，在这个例子中capitalize过滤器函数将会接收message的值作为第一个参数

{{message1 | capitalize }}
var app7 = new Vue({
el: '#app-7',
data: {
message1: "lovestudyvue"
},
filters:{
capitalize:function(value){
if(!value) return ''
//value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

})
//过滤器添加在javascript表达式的尾部，前面的是原始的数据，主要用于文本转换