1. 胡子语法 {{}} 在两个大括号中可以进行一些简单的计算
<div id="app"> <!-- {{}}叫做Mustache：胡子语法 --> <h2>{{firstname+lastname}}</h2> <h2>{{firstname+' ' +lastname}}</h2> <h2>{{firstname}} {{lastname}}</h2> <h2>{{counter*2}}</h2> <h2>{{counter*2}}</h2> <h2>{{1+2}}</h2> <h2>1+2</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app',//用于挂载要管理的元素 data:{//定义数据 message:"消息", firstname:"tom", lastname:"tomLee", counter:100 } }) </script>
2. 插值语法 -- v-bind
（1）绑定指令 -- 简化链接的拼写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- <img v-bind:src="imgURL"> <a v-bind:href="aURL">百度一下</a> --> <!-- 语法糖的写法 --> <img :src="imgURL"> <a :href="aURL">百度一下</a> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'你好啊', imgURL:"https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=888206991,1760071208&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=cc5d57a46142087a2aa2124099bc6eec", aURL:"http://www.baidu.com" } }) </script> </body> </html>
（2）绑定class v-bind:class="{类名:Boolean,类名:Boolean} 例如：将文字变为红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active{ color:red; } </style> </head> <body> <div id="app">
<p v-bind:class="{active:true}">你好啊</p>
<p v-bind:class="{active:isActive}">你好啊</p> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ isActive:true } }) </script> </body> </html>
案例：点击Button，改变文字颜色，再次点击变回原来颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <p v-bind:class="{active:isActive}">你好啊</p> <button v-on:click="getClick()">Button</button>
<!-- 去除Button，只点击文字变色-->
<p v-bind:class="{active:isActive}" v-on:click="getClick()">你好啊</p>
</div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ isActive:false }, methods:{ getClick(){ this.isActive = !this.isActive } } }) </script> </body> </html>
3.作业 ：点击列表中的哪一项，那么该项的颜色发生变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in moveis" :class="{active : currentIndex === index}" v-on:click="getClick(index)"> {{item}}{{index}} </li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ moveis:['海王','达芬奇密码','复仇者联盟'], currentIndex : 0 }, methods:{ getClick(index){ this.currentIndex = index } } }) </script> </body> </html>
4.绑定 style :style="{key属性名: value,...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <p :style="{fontSize:'50px'}">你好啊</p> <p :style="{fontSize:size}">你好啊</p> <p :style="{fontSize:size2 + 'px'}">你好啊</p> <p :style="getStyle()">你好啊</p> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ size:'50px', size2: 50 }, methods:{ getStyle(){ return {fontSize:this.size2+'px'} } } }) </script> </body> </html>
6. 计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{firstname +" " +lastname}}</p> <p>{{firstname}} {{lastname}}</p> <p>{{getFullName()}}</p> <p>{{fullName}}</p> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ firstname:"tom", lastname:"tomLee" }, //计算属性 computed:{ fullName(){ return this.firstname + ' '+this.lastname } }, methods:{ getFullName(){ return this.firstname + ' '+this.lastname } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{totilePrice}}</p> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ books:[ {id:110,name:"Unix编程艺术",price:110}, {id:111,name:"Java编程艺术",price:220}, {id:112,name:"Python编程艺术",price:112}, {id:113,name:"C++编程艺术",price:123} ] }, //计算属性 computed:{ totilePrice(){ let result = 0 for(let i = 0;i <this.books.length;i++){ result += this.books[i].price } return result } }, }) </script> </body> </html>