1.差值语法
在div中填写{{}}两个花括号，同时在script中绑定Vue实例，就可以进行与Vue实例中data数据绑定了。
例如：
<html><head><metacharset="UTF-8"/><title>模板语法</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ name:'jack', blogs:{ name:'XGC' } } }) </script></html>
2.指令语法
v-bind指令后面的引号：当作JS表达式执行了。
例如：
<a v-bind:href="url" >点我跳转</a>
这样就可以通过Vue实例中的data中的数据进行展示。
例如
<html><head><metacharset="UTF-8"/><title>模板语法</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><av-bind:href="blogs.url.toUpperCase()"x="hello">点我去{{blogs.name}}学习1</a></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ name:'jack', blogs:{ name:'XGC', url:'https://www.ylesb.com', } } }) </script></html>
简写模式只需要v-bind:简写成：
例如：
<html><head><metacharset="UTF-8"/><title>模板语法</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><av-bind:href="blogs.url.toUpperCase()"x="hello">点我去{{blogs.name}}学习1</a><a:href="blogs.url"x="hello">点我去{{blogs.name}}学习2</a></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ name:'jack', blogs:{ name:'XGC', url:'https://www.ylesb.com', } } }) </script></html>
3.总结
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
<html><head><metacharset="UTF-8"/><title>模板语法</title><!-- 引入Vue --><scripttype="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举个例子。--><!-- 准备好一个容器--><divid="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><av-bind:href="blogs.url.toUpperCase()"x="hello">点我去{{blogs.name}}学习1</a><a:href="blogs.url"x="hello">点我去{{blogs.name}}学习2</a></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ name:'jack', blogs:{ name:'XGC', url:'https://www.ylesb.com', } } }) </script></html>
