vue、day3
作者：互联网
1.计算属性
1.1姓名案例，插值语法实现
当改变姓和名的时候，姓名跟着一起改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
姓名：<span>{{''+firstname+lastname}}</span>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
}
})
</script>
</body>
</html>
1.2姓名案例，方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
<!-- fullname的话就是将这个函数代码插入，fullname（）就是将函数的返回值插入，差别是比较大的，绑定事件的函数里面，有没有括号都一样，但是这里不一样-->
姓名：<span>{{fullName()}}</span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
methods:{
fullName(){
// 这个vm.是不可以的，因为这是在初始化之前进行，这里面的就是初始化的内容
// return vm.firstname+vm.lastname;
return this.firstname+this.lastname;
}
}
})
</script>
</body>
</html>
1.3姓名案例，计算属性实现
-
fullname的话就是将这个函数代码插入，fullname（）就是将函数的返回值插入，差别是比较大的，绑定事件的函数里面，有没有括号都一样，但是这里不一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
<!-- fullname的话就是将这个函数代码插入，fullname（）就是将函数的返回值插入，差别是比较大的，绑定事件的函数里面，有没有括号都一样，但是这里不一样-->
姓名：<span>{{fullname}}</span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
//vue认为data中的东西都是属性
data:{
firstname:'张',
lastname:'三'
},
methods:{
fullName(){
// 这个vm.是不可以的
// return ''+vm.firstname+vm.lastname;
return this.firstname+this.lastname;
}
},
//自己理解：计算属性就是将data中的东西进行一定的计算与配置
computed:{
//因为计算属性的过程比较复杂，所以要求将计算属性的过程配置为一个对象
fullname:{
//当有人读取fullname时，get就会被调用，且返回值作为fullname的值
//get什么时候调用？1.初次读取fullname时 2.所依赖的数据发生变化
//和计算属性相比，只要第一次调用会调用get，然后就会缓存，多次调用该函数时可以直接用
get(){
return this.firstname+'-'+this.lastname;
},
//set什么时候调用？1.修改fullname时
//要求：将读取过来的姓名拆成姓和名
set(value){
const arr = value.split('-');
this.firstname = arr[0];
this.lastname = arr[1];
}
}
}
})
</script>
</body>
</html>
1.4计算属性简写方式
只有当计算属性只读不改的时候才可以用简写方式，也就是我们上面1.2个例子，只进行姓名的显示，并没有用到set方法
//简写前提，只有get，没有set，只读不改
computed:{
fullname(){
return this.firstname+'-'+this.lastname;
}
}
2.监视属性
2.1天气案例
-
点击切换天气
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天的天气很{{ifHot}}</h2>
<button type="button" @click="changebit">按键切换天气</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
isHot:true
},
methods:{
changebit(){
//每点击一次取反
this.isHot = !this.isHot;
}
},
//要注意，这里的ifhot（）并不是一个方法，而是一个对象，只是可以这么简写
computed:{
ifHot(){
return this.isHot?'炎热':'凉爽';
}
}
})
</script>
</body>
</html>
2.2天气案例用监视属性写
2.2.1将watch写在vue内和vue外
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天的天气很{{ifHot}}</h2>
<button type="button" @click="changebit">按键切换天气</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
methods:{
changebit(){
//每点击一次取反
this.isHot = !this.isHot;
}
},
//要注意，这里的ifhot（）并不是一个方法，而是一个对象，只是可以这么简写
computed:{
ifHot(){
return this.isHot?'炎热':'凉爽';
}
},
//监测属性，监视谁就写谁的名字
// watch:{
// isHot:{
// //1.handler什么时候被调用，当监视的属性被修改的时候
// //2.还能将修改之前的值和修改之后的值给我
// // 2.1handler(x,y){
// // console.log('ishot被修改了',x,y);
// // }
// // 结果就是ishot被修改了 false true
// //3.除了handler配置还有其他配置imediateimmediate:true,
// // 3.1初始化是让handler调用一下
// //4.计算出来的也是属性，computed里面的呢东西也能监视
// immediate:true,
// handler(x,y){
// console.log('ishot被修改了',x,y);
// }
// }
// }
})
//这样子写也可以
// vm.$watch('isHot',{
// immediate:true,
// handler(x,y){
// console.log('ishot被修改了',x,y);
// }
// })
</script>
</body>
</html>
2.2.2注意事项
标签：vue,firstname,lastname,isHot,day3,vm,Vue,fullname 来源： https://www.cnblogs.com/raoxin/p/16217048.html