Vue中的模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>template-grammar</title>
</head>
<body>
<!-- Vue模板语法
1.插值语法
功能：用于解析标签体内容
写法：{{XXX}}，xxx是js表达式，且可以直接读取到data中的所有属性
2.指令语法
功能：用于解析标签（包括标签属性、标签体内容、绑定事件……）
指令：v-bind、v-model、v-on……
-->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr />
<h1>指令语法</h1>
<a v-bind:href="school.url">点我去{{school.name}}学习1</a>
<a :href="school.url">点我去{{school.name}}学习2</a>
</div>
<script>
//阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "jack",
school: {
name: "atguigu",
url: "http://www.atguigu.com",
},
},
});
</script>
</body>
</html>
