Vue.js 使用了基于 HTML 的模版语法,废话不多说,让我们看一下vue.js模板语法有什么。
按照官网的教程来看大致分为三类:插值,指令,缩写。
1.插值
插值的类型大致分为四类,分别是插入文本,插入html,插入属性,插入表达式
-
插入文本
使用 {{…}}(双大括号)的文本插值,本人前一篇文章有介绍 -
插入html
使用 v-html 指令用于输出 html 代码,重点代码如下:
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>insert_html</h1>'
}
})
</script>
插入html的重点是在html代码中按照上面例子使用v-html指令
- 插入属性
通常使用v-bind插入html属性,主要代码如下:
<div id="app">
<div v-bind:style="{color: use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: 'green'
}
});
</script>
</body>
此时看到字为绿色,证明属性插入成功
- 插入表达式
如{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
2.指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。
-
参数
参数在指令后以冒号指明。例如,上面例子中的 v-bind 指令后加了:style,这个style就是参数,告知 v-bind 指令将该元素的style属性与表达式的值绑定。 -
修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
3.缩写
v-bind=:
例如:
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on=@
例如:
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>