Moustache语法：{{message}}不仅仅可以定义变量、常量还能进行数值运算、字符串拼接等操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../js/vue.js"></script> <div id="app"> {{message}} <h1>{{message}},西巴</h1> <!--Mustache语法 不仅仅可以写值、也可以写表达式，也可以写变量 --> <h2>{{firstName+lastName}}</h2> <h2>{{firstName+ ' ' +lastName}}</h2> <h3>{{counter *4}}</h3> </div> <script> const app = new Vue ({ el : '#app', data: { message: '你好Vue', firstName: 'kebe', lastName: 'bryant', counter : 100 } }) </script> </body> </html>2：v-once指令 :只允许页面第一次渲染对值进行修改，后续不允许修改。
<div id="app"> {{message}} <h2 v-once>{{message}} </h2> <!--只渲染一次，数据只在加载的时候修改第一次--> </div> <script src="../js/vue.js"></script> <script> const app = new Vue ({ el : '#app', data: { message: '你好Vue', } }) </script>3：v-html：当后台传来一个字符串“<a href="xxx">xxxx</a>”前台需要直接将这个进行展示
<div id="app"> {{message}} <p v-html="url"></p> </div> <script src="../js/vue.js"></script> <script> const app = new Vue ({ el : '#app', data: { message: '你好Vue', url : '<a href="www.baidu.com">百度一下</a>' } }) </script>4：v-text指令 ：与Moustache语法不同的是：v-text是覆盖原有的内容，进行新增
<div id="app"> <p>{{message}}</p> <p v-text="message"></p> <!--会覆盖p标签内的所有内容--> <p v-pre>{{message}}</p> <!--会把标签内的内容原封不动的显示出来--> </div> <script src="../js/vue.js"></script> <script> const app = new Vue ({ el : '#app', data: { message: '你好Vue', } }) </script>5：v-cloak：页面进行js卡住没有进行vue解析时会显示{{xxx}}这样难看的标志。
<div id="app" v-cloak> {{message}} </div> <script src="../js/vue.js"></script> <script> /* * 在vue解析之前，div有一个叫v-cloak的属性 * 在vue解析之后，div没有一个叫v-cloak的属性 * */ /*代码从上到下执行，有些时候js代码会卡住，页面首先展示的是{{message}}，然后才进行渲染*/ setTimeout(function () { const app = new Vue ({ el : '#app', data: { message: '你好Vue', } }) },1000) </script>
Moustache是对元素内的值进行改变渲染，v-bind是对元素属性进行渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 之前学的是讲内容进行绑定显示，但是有一些情况需要绑定一些元素的属性，比如说 src的url是动态获取的这时候就需要使用v-bind属性 mustache语法只能在content中进行使用 错误做法 <img src="{{url}}"></img> 这里不可以使用 效果为<img src="{{url}}"></img> 无法解析 正确做法： --> <div id="app"> <img v-bind:src="url" /> <a v-bind:href="baiduUrl">百度一下</a> <!-- vue 给我们提供了简易语法糖写法--> <img :src="url"/> <a :href="baiduUrl">百度一下</a> </div> <script src="../js/vue.js"></script> <script> const app = new Vue ({ el : '#app', data: { message: '你好Vue', url : 'https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png', baiduUrl : 'http://www.baidu.com' } }) </script> </body> </html>2：v-bind动态绑定class 对象语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <p class="active">{{message}}</p> <p :class="active">{{message}}</p> <!--<p :class="{类目1 ：布尔值，类目2 ：布尔值}">v-bindClass测试</p>--> <p :class="{active: isActive,line : isLine}">v-bind测试</p> </div> <div id="app2"> <!--需求：点击按钮第一下变成红色、再点变成黑色--> <p :class="{active:isActive}">{{message}}</p> <button v-on:click="changeButton">点击变色</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue ({ el : '#app', data: { message: '你好Vue', active: 'active', isActive: true, isLine: true } }) const app2 = new Vue({ el: '#app2', data: { message: '改变颜色点击按钮', active: 'active', isActive: true }, methods:{ changeButton :function(){ this.isActive=!this.isActive } } }) </script> </body> </html>
