有关vue的插值操作与绑定属性
当前计数:{{counter}}
...插值操作与绑定属性与计算属性
vue计数器实例（渐进式，MVVM）
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button> -->
<!-- <button v-on:click="counter--">-</button> -->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({ //const 修饰类的成员变量，表示成员常量，不能被修改。
el:"#app",
data:{
counter:0
},
methods:{
add:function(){
// console.log("add被执行");
this.counter++;
},
sub:function(){
// console.log("sub被执行");
this.counter--;
}
}
})
</script>
mustache语法
（也就是双大括号）将数据用{{}}插入HTML中，内容插入 （括号内实际就是表达式，可以进行字符串拼接）
体验vue的响应式
v-once
（该指令之后不需要跟任何表达式，比如v-for之后是跟表达式的）
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
v-html
在某些情况下，我们从服务器请求到的数据本身就是一个Html代码，如果我们直接用{{}}来输出，会将html代码一起输出，但是我们希望按照HTML格式解析并显示相应的内容。
该指令之后往往会跟上一个string类型，会将string的html解析出来并且进行渲染
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-html="url">{{url}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊！',
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
v-text
与mustache相似，都是将数据显示在界面上
<h2>{{message}}，路西</h2>//会拼接起来
<h2 v-text="message">,luxi</h2>//message内容会覆盖,luxi
v-pre
用于跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法，直接显示{{message}}
v-cloak
在某些情况下，我们浏览器可能会直接显示出未编译的mustache标签
<!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>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{message}}，路西</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
//在vue解析之前。div中由一个属性v-cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(function(){
const app = new Vue({
el:'#app',
data:{
message:'你好啊！',
}
})
},3000);
</script>
</html>
v-bind动态绑定
动态绑定一个或多个属性值，或者向另一个组件传递props值，在开发中，有很多属性需要动态绑定，例如：图片的链接src，网站的链接href，动态绑定一些类和样式等等。语法糖：：
<img v-bind:src=“imgURL” alt="">
<a v-bind:href="texturl">百度一下</a>
//语法糖
<img :src=“imgURL” alt="">
<a :href="texturl">百度一下</a>
v-bind绑定class
v-bind动态绑定class(对象语法)：可以在class中用键值对的形式，class中的对象会进行合并
数据如果想放在methods的function中，可以在函数中return数值作为class中的属性
：class="{类名：布尔值}"
<h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
<h2 :class="getClasses()">{{message}}</h2>
<button v-on:click="btnclick"></button>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊！', imgURL:'http://5b0988e595225.cdn.sohucs.com/images/20190505/76ee0659f87543ddaa6d40d536e90571.jpeg',
texturl:"http://www.baidu.com",
active: "active",
isActive:true,
isLine:true,
},
methods:{
btnclick:function(){
this.isActive = !this.isActive
},
getClasses:function(){
return [this.active,this.line]
}
}
});
</script>
v-bind动态绑定class(数组语法)
<h2 :class="[active1,line1]">{{message}}</h2> //分清"active" active
实例1：点击哪个数据即改变其style属性
<!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-on:click="liclick(index)" v-for="(item,index) in movies" :class="{active:currentIndex===index}">{{index}}-{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['机器猫','火影忍者','工作细胞','西西里'],
isActive:true,
currentIndex:0,
},
methods:{
liclick(index){
this.currentIndex=index;
},
}
})
// 如果想要两个方法之间有数据之间的联系，可以在data中设置一个值进行比较，但是函数中利用此值需要用this.进行访问
</script>
</html>
v-bind绑定style
v-bind绑定style（对象语法）
:style="{key(属性名):value(属性值)}" 对象的value可以是具体的赋值，也可以是data中的属性
如果style太长，可以在methods中添加getStyles:function(){return ……} 记得加this
可以动态决定相同组件的不同style形式
<h2 :style="{fontSize:'70px'}">{{message}}</h2>，//注意只能单引号，变成字符串形式
<h2 :style="{fontSize:70px}">{{message}}</h2>//报错 因为会把70px当成是一个变量，去data寻找
<h2 :style="{fontSize:finalSize+'px'}">{{message}}</h2> //finalSize = 100，
<h2 :style="{fontSize:finalSize}">{{message}}</h2> //finalSize = 100px，
v-bind绑定style（数组语法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 :style="[basestyle,basestyle1]">{{message}}</h2> //数组语法
<h2 :style="{fontSize:finalSize+'px',color:color}">{{message}}</h2> //对象语法
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊！',
finalSize:90,
color:"red",
basestyle:{backgroundColor:'red'}, //数组语法
basestyle1:{fontSize:'100px'},
}
})
</script>
</html>
计算属性
在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况下，需要让数据进行计算转化后再显示（例如总和，除余……）
我们需要把计算属性写在实例中的computed选项中
computed:{
totalprice:function(){
let result=0;
for(i=0 ; i< this.books.length; i++){
result += this.books[i].price;
}
for(let i of this.books){
console.log(i);
result += i.price;
}
for(let i in this.books){
console.log(i);
result += this.books[i].price;
}
return result;
}
}//计算价钱总和
计算属性的getter setter
每个计算属性都包含一个getter和一个setter，在大多数时候我们都是使用getter读取，在某些情况下也可以提供一个setter方法。
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'kobe',
lastName:'Bryant',
},
computed:{
fullName:{
set:function(newValue){
console.log('----',newValue);
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
// console.log(this.firstName);
},
get:function(){
return this.firstName +' '+this.lastName;
}
},
}
})
</script>
计算属性的缓存
计算属性相比于方法会有缓存，只在数据改变的时候释放内存并发生调用。
而如果html中多次使用相同的属性，只会进行一次；但methods会多次调用方法造成内存堆积。
v-for遍历 v-on 监听
v-on:click=“sub” === @click=“sub”
<li v-on:click="liclick(index)" v-for="(item,index) in movies">{{index}}-{{item}}</li>
本文地址：https://blog.csdn.net/weixin_45860674/article/details/107474882