vue使用了基于html的模板语法,所有的vue.js的模板语法是合法的html。
1、文本
使用了{{}}双大括号的形式
<span>Message: {{ msg }}</span>
{{msg}}会被替代为对应数据对象上的msg属性的值,并在绑定数据对象的msg发生改变,内容也会随之变化。
使用v-once指令,执行一次插值,之后不会变化。
<span v-once>这个将不会改变: {{ msg }}</span>
2、原始HTML
双大括号会将数据解释为普通文本(即连带标签一并显示),而非html代码,为输出真正的html,需要使用v-html
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>
3、特性
Mustache 语法不能直接作用在html特性上,此处可以使用v-bind
<div v-bind:id="dynamicId"></div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
dynamicId:'dyid'
}
});
</script>
3、vue数据绑定可支持javascript
可以试下下列简单实例
<div id="app">
{{number+1}}
<br>
{{ok? 'YES' : 'NO'}}
<br>
{{message.split('').reverse().join('')}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
number:1,
ok:false,
message:'hello'
}
});
</script>
表达式会在所属vue实例的数据作用域下作为js被解析,但是只能包含单个表达式,下面的例子就不会生效:
<!-- 这是语句,不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效,请使用三元表达式 --> {{ if (ok) { return message } }}
4、指令
指令是带有v-前缀的特殊特性,指令特性预期值是单个js表达式(v-for除外)
指令职责:当表达式的值改变时,将其产生的连带影响作用域dom。
参数:一个指令能够接受一个参数,在指令名称之后以冒号表示。v-bind:href v-bind:class
v-on可用于监听事件
<a v-on:click="doSomething">...</a>
v-bind与v-on缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>