写在开篇
模板语法
roor容器里的代码都称为“Vue模板”，有了模板，就会有模板语法，模板语法主要分成两大类：插值语法和指令语法，下面简单的逐一剖析这两类语法的使用。
root容器如下图：
插值语法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>插值语法研讨</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="pinfo"> <h1>插值语法</h1> <p>Hello！{{type}}：{{name}}，某篇文章URL：{{url}}</p> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#pinfo", //选择div容器ID，表示管理id为pinfo的div容器 data:{ //定义数据，给el指定的div使用 type:'微信公众号', name:'TtrOpsStack', url:'https://mp.weixin.qq.com/s/e4zB2w8hA0j3XHkuKppPuA' } }) </script> </body> </html>
所谓的插值语法其实就是 {{xxx}}，如上面代码中的{{type}}、{{name}}、{{url}}
指令语法
- 先来一次失败的演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>插值语法研讨</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="test"> <h1>指令语法</h1> <a href={{url}}>去看《第一次和VUE的亲密接触》</a> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#test", //选择div容器ID，表示管理id为test的div容器 data:{ //定义数据，给el指定的div使用 url:'https://mp.weixin.qq.com/s/e4zB2w8hA0j3XHkuKppPuA' } }) </script> </body> </html>
打开页面后，点击超链接
点击后，打开的效果，非常糟糕
F2，查看错误消息
错误原因：在div容器中的a标签中，直接以这样 {{url}} 插值的方式是无法拿到Vue实例的data数据中的url，把它当成字符串看待了。
- 引入v-bind
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>指令语法研讨</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="test"> <h1>指令语法</h1> <a v-bind:href="url">去看《第一次和VUE的亲密接触》</a> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#test", //选择div容器ID，表示管理id为test的div容器 data:{ //定义数据，给el指定的div使用 url:'https://mp.weixin.qq.com/s/e4zB2w8hA0j3XHkuKppPuA' } }) </script> </body> </html>
点击超链接
成功跳转到指定的url
F12查看元素
关键的地方：a标签里的href前面引入了v-bind，引入v-bind后，就会当成js表达式去执行，v-bind还可以简写成“:href”，v-bind的主要作用就是用于属性绑定。
再来个稍微复杂一点点的数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>指令语法研讨</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="test"> <h1>主机信息</h1> <a href="name">主机名: {{name}}</a> <br> <a href="">业务IP: {{ip.busines}}</a> <br> <a href="">管理IP: {{ip.manage}}</a> </div> <script type="text/javascript"> Vue.config.productionTip=false //阻止vue在启动时生成生产提示。 //创建Vue实例 new Vue({ el:"#test", //选择div容器ID，表示管理id为test的div容器 data:{ //定义数据，给el指定的div使用 name:'mysql-db01', ip:{ busines:'192.168.10.89', manage:'172.16.18.23' } } }) </script> </body> </html>
上面代码中，创建的Vue实例为id=“test”的div容器提供数据，div容器里使用插值语法进行取值。
效果如下图
在Vue实例里的data如下：
data:{ //定义数据，给el指定的div使用 name:'mysql-db01', ip:{ busines:'192.168.10.89', manage:'172.16.18.23' } }
想要得到ip里的业务IP和管理IP，需使用 {{ip.busines}} 和 {{ip.manage}}
写在最后
总结：模板语法主要分成两大类
- 插值语法
用于解析标签体内容，写法为{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
- 指令语法
用于解析标签（包括标签属性、标签体内容、绑定事件等），比如 v-bind:href="xxx"，或者简写为 :href="xxx"，xxx同样也是js表达式，且也可以直接读取到data中的所有属性。
最后，还要知道，其实在Vue中，有很多很多的指令，且形式都是：v-xxx，本篇仅拿了v-bind举例。
