vue.js模板语法

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>