一、模板语法

1、插值

(1),普通文本

<span>Message: {{ msg }}</span>

Musteche标签将会被替代为对应数据对象上的msg属性值，无论何时，绑定数据对象上msg属性发生了改变，插值处的内容都会更新。

(2),插入原始html

<div id="app">
  <div>欢迎来到<span v-html="msg"></span></div>
</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
     msg: "<strong>智学无忧IT教育</strong>"
    }
  });
</script>

v-html将内容以html标签的方式渲染，相当于原生的innerHTML属性

(3),v-bind在html的属性上插值

<ul><!--v-for循环里不用var声明-->
  <li v-for="i in 10" v-bind:class="'list-'+i">{{i}}</li>
</ul>

比如给className动态添加类名、给id动态添加名称，用v-bind可以轻松实现

(4),使用js表达式

{{任何有效的js表达式}}，如果不是有效的表达式不做任何处理

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

注意：

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。

你不应该在模板表达式中试图访问用户定义的全局变量。

2、指令

(1)、v-开头的都是指令，通常需要一个js表达式

<p v-if="seen">现在你看到我了</p>

(2)、指令的参数

在指令名称之后以冒号表示，<a v-bind:href="url">...</a>，href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。

(3)、指令的修饰符

<form v-on:submit.prevent="onSubmit">...</form>

是以半角句号，指明的特殊后缀，用于指出一个指令该以特殊方式绑定。上面代码表示表单提交，调用even.preventDefault()阻止事件冒泡。

3、缩写

(1)、v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

(2)、v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>