一、插值操作
1、Mustache
Mustache语法(也就是双大括号)；
<body> <div id="app"> {{message}} <h2>{{message}}，tom</h2> <h2>{{firstName + lastName}}</h2> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{counter * 2}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', firstName: 'kobe', lastName: 'bryant', counter: 100 } }) </script>
2、v-once
但是，在某些情况下，我们可能不希望界面随意的跟随改变
这个时候，我们就可以使用一个Vue的指令
v-once:
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body>
3、v-html
某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示:
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
<body> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', url: '<a href="https://www.baidu.com">百度一下</a>>' } }) </script> </body>
4、v-text
v-text作用和Mustache比较相似：都是用于将数据显示在界面中;
v-text通常情况下，接受一个string类型; v-text没有mustache语法灵活；
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message"></h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body>
5、v-pre
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如下面的代码：
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-pre>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body>
6、v-cloak
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
这样是不太友好的，我们需要暂时先把它遮起来，解析完成后再显示；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [v-vloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <h2 v-cloak>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> setTimeout(function () { const app = new Vue({ el: '#app', data: { message: '你好啊' } }) }, 2000) </script> </body> </html>
二、绑定属性
1、v-bind基本使用
前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
<body> <div id="app"> <img v-bind:src="imgurl"> <hr> <a v-bind:href="a">百度一下</a> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', imgurl: 'https://cn.vuejs.org/images/logo.png', a: 'https://www.baidu.com' } }) </script> </body>
2、v-bind语法糖
简写为一个冒号：
<a :href="a">百度一下</a>
3、v-bind绑定css
很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。
绑定class有两种方式：
对象语法
数组语法
对象语法案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style> </head> <body> <div id="app"> <h2 class="active">{{message}}</h2> //对象语法也就是在v-bind:class绑定一个对象的时候，里面的值将影响最终取值 //比如如果 这里isActive的值为true 则会被渲染成class='active' 如果为false , 则class不会存在 <h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2> <button v-on:click="btnclick">按钮</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', isActive: true, isLine: true }, methods: { btnclick: function () { this.isActive = !this.isActive } } }) </script> </body> </html>
此外， v-bind:class 指令可以与普通的 class 属性共存，解析时会与v-bind绑定的class合并：
<h2 class=“title” v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
class如果过于复杂，可以放在一个methods：
<body> <div id="app"> <h2 class="active">{{message}}</h2> <h2 class=“title” v-bind:class="{active: isActive, line: isLine}">{{message}}</h2> <h2 class=“title” v-bind:class="getclass()">{{message}}</h2> //与上面一行作用相同 <button v-on:click="btnclick">按钮</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', isActive: true, isLine: true }, methods: { btnclick: function () { this.isActive = !this.isActive }, getclass: function () { //加了一个方法 return {active: this.isActive, line: this.isLine} } } }) </script>
数组语法案例：
<body> <div id="app"> <h2 class="active">{{message}}</h2> <h2 class=“title” v-bind:class="{active: isActive, line: isLine}">{{message}}</h2> <h2 class=“title” v-bind:class="getclass()">{{message}}</h2> <button v-on:click="btnclick">按钮</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', isActive: true, isLine: true }, methods: { btnclick: function () { this.isActive = !this.isActive }, getclass: function () { //也可以写在方法中 return {active: this.isActive, line: this.isLine} } } }) </script>
4、v-bind绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式。
在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
绑定class有两种方式：
对象语法
数组语法
对象语法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title { font-size: 50px; color: red; } </style> </head> <body> <div id="app"> <!--这里的50px要加单引号，否则会当作一个变量去解析--> <!-- <h2 :style="{fontSize: '50px'}">{{message}}</h2>--> <h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', finalSize: '100', finalColor: 'red' } }) </script> </body> </html>
如果过于复杂，也可以放在一个methods中；
数组语法：
nstyle后面跟的是一个数组类型，多个值以，分割即可；
<div v-bind:style="[baseStyles, overridingStyles]"></div>