1.Vue模板语法有2大类：

1. 插值语法：

功能：用于解析标签体内容。
写法：，xxx是js表达式，且可以直接读取到data中的所有属性。

2. 指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

注意:Vue中的模板语法，都是基于数据驱动的，即：当数据发生变化时，页面会自动更新。

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>模板语法</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
        
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>插值语法</h1>
   <h3>你好，{{name}}</h3>
   <hr/>
   <h1>指令语法</h1>
   <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
   <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
   el:'#root',
   data:{
    name:'jack',
    school:{
     name:'百度',
     url:'http://www.baidu.com',
    }
   }
  })
 </script>
</html>