前言
在本篇,我将记录我对vue的 计算属性和侦听器 的学习记录
注:本篇对于”侦听“和”监听“是一个意思
一、计算属性
在官网上,可以看到这样一个例子:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
Vue官方预判到了某些人学了Vue,会在{{}}写复杂的语句,而这些语句会大大降低可读性,但有时候又不得不去写这么复杂的逻辑来满足业务需求
因此Vue提供了新的配置项:computed
在面对每当我们读取变量时需要对变量进行处理后再现实的情况
1.1 计算属性的基本用法
看代码:
computedcomputed<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div id="root">
输入b站视频连接: <input v-model="bUrl"><br>
该视频的id为: {{id}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //绑定元素,el的属性值可以是dom节点也可以是css选择器
data:{
bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click", //这是可以存放用于展示的数据
},
computed:{
id(){
if(this.bUrl.includes("?")){
return this.bUrl.split("/").slice(-2,-1)[0];
}
return this.bUrl.split("/").slice(-1)[0];
}
}
})
</script>
</html>
在这个例子中,在input框输入b站url链接,computed配置的方法会立刻计算,在dom节点可以当成属性来获取
为什么每次修改input的内容computed相关方法会重新执行一次呢?因为v-model对bUrl和input框的内容进行了双向绑定,一旦改变了其中一个另外一个也会跟着变化,变化的时候就会触发computed配置里面的相关方法
1.2 计算属性添加setter
除此之外,如果我要对计算属性的方法添加一个setter,那么就需要写成这样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div id="root">
输入b站视频连接: <input v-model="bUrl"><br>
该视频的id为: {{id}} <br>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //绑定元素,el的属性值可以是dom节点也可以是css选择器
data:{
bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click",
},
computed:{
id:{
get(){
if(this.bUrl.includes("?")){
return this.bUrl.split("/").slice(-2,-1)[0];
}
return this.bUrl.split("/").slice(-1)[0];
},
set(){
/* show your code. */
}
}
}
})
</script>
</html>
二、侦听器
在Vue中提供了单独的配置去监听变量的变化,这个配置项就是:watch
2.1 监听器的基本用法
对于watch来说,当被监听对象发生改变时会调用监听的回调函数(handler):
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
输入b站视频连接: <input v-model="msg"><br>
变化: {{info}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", 、
data:{
msg:"hello",
info:"没变化"
},
watch:{
msg:{
handler(oldValue,newValue){
this.info = `之前是${oldValue},现在是${newValue}。`;
}
}
}
})
</script>
</html>
除此之外,你还可以用vm去创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
输入b站视频连接: <input v-model="msg"><br>
变化: {{info}}
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#root",
data:{
msg:"hello",
info:"没变化"
},
});
vm.$watch('msg',function(oldValue,newValue){
this.info = `之前是${oldValue},现在是${newValue}。`;
});
</script>
</html>
2.2 监听器的各种配置
- deep
- immediate
deepimmediate:true,<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 50px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
<h1>{{mark.subject}}</h1>
当前学习进度:{{mark.process}} % <br>
输入要修改的值:<input type="text" v-model="newValue"> <button @click="changeProcess">确认</button>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#root",
data:{
newValue:0,
mark:{
subject:"Vue课程学习进度",
process:30
}
},
watch:{
mark:{
deep:true, //开启深度监听,即遇到对象时对象成员变化也会触发handler
immediate:true, //开启立即执行,即刚一开始dom渲染也会被调用一次
handler(oldV,newV){
if(!newV){
return; //把这个注释掉可以体会下有无immediate的区别
}
alert("老师修改进度为:"+ newV.process);
}
}
},
methods: {
changeProcess(){
this.mark.process = this.newValue;
}
},
});
</script>
</html>
2.3 监听的两种简写方式
如果要使用监听的简写方式意味着你放弃了配置 immediate 和 deep 属性
就是将,原本配置对象的地方,改为一个函数,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
输入b站视频连接: <input v-model="msg"><br>
变化: {{info}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
msg:"hello",
info:"没变化"
},
watch:{
msg(oldValue,newValue){
this.info = `之前是${oldValue},现在是${newValue}。`;
}
}
})
</script>
</html>
The More
本节完~~~~
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容