动态绑定属性
很多时候，数据是会改变的，而我们也经常需要根据数据的改变来改变，这时候就可以通过动态绑定标签的属性，来动态决定标签的在页面中呈现出来的样子。
动态绑定的语法：v-bind: 语法糖：:tips:语法糖即语法的缩写，后期基本都使用语法糖
v-bind动态绑定class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{color:red;}
.line{color:green;}
</style>
</head>
<body>
<div id="app">
<!-- v-bind绑定class 此class可绑定类或者数组 -->
<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
<!-- button的代码可以先不用看，知道有这个功能就可以了，第四章会详细讲 -->
<button @click="btnclick()">点我</button>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: 'hang',
isActive: true,
isLine: false
},
methods:{ // 在我这里可以定义函数
btnclick(){ // 我是那个响应函数，我要在methods中定义才有效
// 还记得在对象里面使用此对象的属性需要使用this吗
this.isActive = !this.isActive;
this.isLine = !this.isLine
}
}
})
</script>
</body>
</html>v-bind动态绑定style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 让style绑定函数 -->
<h2 :style="getsty()">
{{message}}
</h2>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: '啊杭小帅',
finalsize: 100
},
methods:{
getsty(){
return {fontSize: this.finalsize + 'px'}
}
}
})
</script>
</body>
</html>computed
计算属性也算动态绑定属性的一种吧。因为这类属性也是动态的。
computed跟methods的区别computed有自己的缓存空间，只会被编译一次，而methods在每次调用方法时都会编译一次 tips：响应方法一定要写在methods里面，而经常用到的函数并且与属性挂钩的可以使用computed
<body>
<div id="app">
<h2>{{getfullname()}}</h2>
<h2>{{fullname}}</h2>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: 'hailo',
name: 'hang'
},
computed:{
fullname(){
return this.message + " " +
}
},
methods:{
getfullname(){
return this.message + " " +
}
}
})
</script>
</body>当message 或者name改变时，fullname也会随着改变。并且每次改变都会重新编译一次。
计算属性的复杂操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>总价是:{{prices}}</h2>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
books: [
{id: 110, name: 'c语言', price: 100 },
{id: 111, name: 'java', price: 198 },
{id: 112, name: 'python', price: 98 },
{id: 113, name: 'js', price: 122 },
{id: 114, name: 'vue', price: 109 }
]
},
computed:{
prices(){
let bprice = 0;
for(let book of this.books){
bprice += book.price
}
return bprice
}
}
})
</script>
</body>
</html>watch侦听属性
当一个属性的数据发生改变时，如果我们需要对其作出相应的一些操作。这时我们可以用watch来监听该属性。
<body>
<div id="app">
<h2>{{fullname}}</h2>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: 'hailo',
name: 'hang',
fullname:''
},
watch:{
message(newVal, oldVal) {
// 监听 message属性的数据变化
// 作用 : 只要 message的值发生变化,这个方法就会被调用
// 第一个参数 : 新值
// 第二个参数 : 旧值,之前的值
this.fullname= newVal + ' ' +
},
name(newVal, oldVal){
this.fullname= this.message + ' ' + newVal
}
}
})
</script>
</body>你会发现，这样做fullname也会跟着message跟name的值改变而改变，对比一下两者的代码，很容易看出watch监听属性的方法更加的繁琐一点。所以一般可以用computed就不用watch。那什么时候用watch呢？当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择
以上是watch最简便的写法，属性直接当函数名来写。
message(newVal, oldVal) {
this.fullname= newVal + ' ' +
}这两者等价
message: {
handler(newVal, oldVal) {
this.fullname= newVal + ' ' +
}
}下面说两个watch的两个属性。
immediate
前面的方式(只设置了handler)使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要把immediate属性设置为true。
message: {
handler(newVal, oldVal) {
this.fullname= newVal + ' ' +
},
immediate:true
}deep
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要把deep属性设置为true才可以对对象进行深度监听。
user: {
handler(newVal, oldVal) {
= newVal
},
//immediate:true,
deep:true
}这里扩充一下：let of 和let in
let of 取出的是每个对象
for(let book of this.books){
bprice += book.price
}
let in 取出的是每个对象的下标
for(let book in this.books){
bprice += books[book].price
}
