简介
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
语法分类
一、基本语法
1.想让Vue工作，就必创建一个Vue实例，且要传入一个配置对象
2.root容器中的代码依然符合html规范，只不过混入了一些Vue语法
3.容器中的代码被称为【Vue模板】
4.Vue实例和容器是一一对应的
5.真实开发中只有一个Vue实例，并且会配合组件一起使用
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7.一旦data中的数据改变,页面中用到数据的地方会自动更新
注意区分：js表达式 和 js代码（语句）
1.表达式：一个表达式会生成一个值，可放在任何一个需要值的地方：
（1）a
（2）a+b
（3）demo(1)
(4) x == y?'a','b'
2.js语句
（1）判断语句 if() {} 控制走不走
(2) 循环语句 for(){} 控制走几次
二、模板语法
1.插值语法（双大括号表达式{{Mustache语法}}）
（1） 功能：用于解析标签体的内容
（2） 语法：{{xxx}}，xxx会作为js表达式解析
2.指令语法（以v-开头的）
（1） 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
举例：v-bind:href="xxx" 或者简写为 :href="xxx" xxx同样是js表达式
且可以直接读取到data中的所有属性
备注 vue中有很多指令 且形式都是 v-???-
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
三、重要的原则
由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了
举例说明
Vue 中有很多的指令，本例只是用 v-bind 进行说明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url" x="hello">点我去{{school.name}}学习</a>
<!--v-bind简写版 点击跳转到Vue中文网-->
<a :href="school.url" x="hello">点我去{{school.name}}学习</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'wangxq',
school:{
name:'Vue中文网',
url:'https://cn.vuejs.org/',
}
}
})
</script>
</html>