零基础入门Vue之窥探大法——计算与侦听
前言
在本篇，我将记录我对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
本节完~~~~
零基础入门Vue之窥探大法——计算与侦听的更多相关文章
- 从零基础入门JavaScript（1）
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- 【JAVA零基础入门系列】Day4 变量与常量
这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...
- 【JAVA零基础入门系列】Day5 Java中的运算符
运算符,顾名思义就是用于运算的符号,比如最简单的+-*/,这些运算符可以用来进行数学运算,举个最简单的栗子: 已知长方形的长为3cm,高为4cm,求长方形的面积. 好,我们先新建一个项目,命名为Rec ...
- 【JAVA零基础入门系列】Day9 Java中的那个大数值
什么是大数值?用脚趾头想也知道,当然是"大"的数值(233).Java中有两个用于表示大数值的类,BigInteger和BigDecimal,那到底能表示多大的数值呢?理论上,可以 ...
- Siki_Unity_1-3_Unity零基础入门_古迹探险
1-3 Unity零基础入门 古迹探险 任务1/2:资料下载 链接:https://pan.baidu.com/s/1jHVymNk 密码:rbob 任务3:工程的创建和打开 Project:古迹探险 ...
- Siki_Unity_1-1_Unity零基础入门_打砖块
1-1 Unity零基础入门 打砖块 任务1:素材源码 www.sikiedu.com/course/77 任务2:Unity介绍 王者荣耀,球球大作战等游戏都是用unity开发的 跨平台的游戏引擎 ...
- (转)零基础入门深度学习(6) - 长短时记忆网络(LSTM)
无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的技术,会不会感觉马上就o ...
- 《零基础入门学习Python》【第一版】视频课后答案第001讲
测试题答案: 0. Python 是什么类型的语言? Python是脚本语言 脚本语言(Scripting language)是电脑编程语言,因此也能让开发者藉以编写出让电脑听命行事的程序.以简单的方 ...
- 零基础入门 实战mpvue2.0多端小程序框架
第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...
- 大牛整理最全Python零基础入门学习资料
大牛整理最全Python零基础入门学习资料 发布时间:『 2017-11-12 11:56 』 帖子类别:『人工智能』 阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料 ...
随机推荐
- <vue 基础知识 8、购物车样例>
代码结构 一. 效果 1. 展示列表v-for 2. 购买数量增加减少,使用@click触发回调函数. 减少的时候如果已经为1了就不让继续减少,使用了v-bind绑定属性 3. 移除也是使用@ ...
- C#读取FX5U线圈（modbusTCP）
第一步:导入所需的类库 第二步:包含命名空间 第三步:实例化modbus类 ModbusTcpNet busTcpClient = null; busTcpClient = new ModbusTcp ...
- Vue - 组件通信（父子单向传递、父子相互传递、祖孙隔代传递）
父组件向子组件单向传递 父组件:引入子组件后,通过属性绑定的形式,将值传入子组件: ` ` 子组件:子组件通过props接收父组件传入的值; ` {{sonGetParam}} ` 子组件向父组件单向 ...
- freeswitch APR库内存池
概述 freeswitch的核心源代码是基于apr库开发的,在不同的系统上有很好的移植性. apr库中的大部分API都需要依赖于内存池,使用内存池简化内存管理,提高内存分配效率,减少内存操作中出错的概 ...
- keystore 与 trust store 的区别 及 keytool 常用命令
本文为博主原创,未经允许不得转载: 1. key store 与 trust store 区别 2. java 配置 单向认证与双向认证的过程 3. key store 与 trust store 常 ...
- Angular系列教程之生命周期钩子
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...
- 12-Verilog-同步FIFO设计
同步FIFO和异步FIFO FIFO分为一个同步FIFO,一个异步FIFO,FIFO有读口和写口 读写时钟是一个,就是同步FIFO;读写时钟不是一个,异步FIFO IP核设计中,一般使用同步FIFO设 ...
- 使用pip安装pycharm插件时，要使用管理员权限打开cmd安装
1.问题 安装到一半报错 报错1 报错2 2.解决 解决1 原文:https://blog.csdn.net/weixin_44899752/article/details/128372969 下面是 ...
- 浏览器兼容 ： IE 5 到 IE 9
<!--[if IE]> <link href="ie.css" rel="stylesheet"> <![endif]--> ...
- 快速定位Java应用卡顿的原因
快速定位Java应用卡顿的原因 背景 同事的环境说出现了一周的卡顿现象. 元旦加班期间告诉我时已经是2024.1.1下午五点了. 当时没有来得及去查看. 上班之后发现问题很简单. 不过为了能够指导一下 ...