003-读书笔记-Vue官网 计算属性与监听器
1.计算属性
1-1 计算属性概述
计算属性也是 Vue 实例的属性,和 data
方法中返回的对象中的属性是等同的存在。通常来说,计算属性可以简单理解:
- 计算属性其实就是 Vue 实例的一个属性
- 计算属性一般依赖传统的 Vue 实例属性
- 计算属性一般是通过运算得到的属性
如果要更加深入的理解计算属性,可以往下看。
1-2 搭建HTML结构
由于计算属性有几个特性,需要做一些测试,虽然这些测试可以在 vue-devtools 中调试查看,但是肯定没有在页面上看着更直观,因此,搭建一下简单的 HTML 结构,更好的查看最终的执行效果:
<template><div id="app"><h2>常规属性:</h2><div>文本框1号:<input type="text" v-model="inpVal" placeholder="常规属性"></div><p>文本框中输入:{{inpVal}}</p><hr><h2>计算属性:</h2><div>文本框2号:<input type="text" v-model="comInpVal" placeholder="计算属性"></div><p>计算属性的值:{{comInpVal}}</p></div>
</template>
展示的效果如下图:
现在基本结构已经搭建完成了,下面就是写一些 JavaScript 代码来操作这些属性了。
1-3 计算属性的简单使用
为了递进式的了解计算属性,首先我们来看看,计算属性是如何通过常规属性计算得到一个新的属性的。
这里沿用官网给出的例子,将常规属性反转得到计算属性。
<script>export default {name: 'app',data() {return {inpVal: ''}},computed: {comInpVal() {return this.inpVal.split('').reverse().join('')}}}</script>
这个时候,聚焦到的 DOM 元素有 文本框1号 文本框中输入 计算属性的值,会发现计算属性会随着常规属性的输入,输出常规属性的反转形式:
可以发现,上面的计算属性是一个函数,返回值就是计算属性的值,而计算得到的值是依赖 Vue 的实例属性 inpVal
1-4 计算属性的get与set
get说明:
上面的计算属性只是一种简写方式,完整的写法如下:
computed: {comInpVal: {get() {return this.inpVal.split('').reverse().join('')}}}
其实在写计算属性的时候,默认指定的是计算属性的 get
方法。因此,可以得出两个结论:
- 在计算属性不需要设置值的时候,可以只写出
get
方法,并使用简写的形式 - 计算属性的
get
方法必须指定返回值,返回值作为计算属性的最终值
set说明:
既然存在了 get
方法来获取值,是不是就存在 set
方法来设置值呢?答案是肯定的,这也是结构中 文本框2号 存在的意义。
现在我们在 文本框2号 中输入内容,会发现谷歌人员开发工具中会报错。
[Vue warn]: Computed property "comInpVal" was assigned to but it has no setter.
从报错信息中,说明了没有指定 setter,因此不能对计算属性进行值的设置。如果我非要设置,并且还不让它报错,怎么办?
这个时候就可以指定 set
方法了。
下面我们指定 set
方法,通过计算属性的设置来得到常规属性的反转值:
computed: {comInpVal: {get() { // get方法:获取值return this.inpVal.split('').reverse().join('')},set(val) { // set方法:设置值this.inpVal = val.split('').reverse().join('')}}}
这个时候,再次在 文本框2号 中输入内容,不会出现任何错误。至此,获取计算属性的值和设置计算属性的值都已经学习完成了。
2.监听器
监听器的作用就是监视 Vue 实例中的内容变化的。
2-1 搭建简单的HTML结构
这次我们查看效果的时候,主要是在谷歌开发工具中的控制台中,因此,搭建一个简单的结构就好:
<template><div id="app"><input type="text" v-model="inpVal" placeholder="输入内容"></div>
</template>
2-2 简单使用监听器
下面我们补充一下监听器,用来监听 inpVal
属性:
<script>export default {name: 'app',data() {return {inpVal: ''}},watch: {inpVal() {console.log(this.inpVal)}}}</script>
通过代码会发现,监听器写在 watch
中。需要监听哪个属性,就把属性的名字写在监听器中。
在输入框中不断输入内容,就会看到随着内容的输入,控制台中的内容也是不断变化的。
2-3 监听器的第一个参数
在代码中可以看到,监听器是一个函数,如果是函数,那么应该就可以存在参数,下面指定第一个参数。
watch: {inpVal(newVal) {console.log(this.inpVal === newVal)}}
在文本框中输入内容的时候,会发现,控制台中输入的结果始终是 true
,这说明,第一个参数就是监视的属性值。
因此,如果只需要得到最终的结果的情况下,参数可以省略不写。
2-4 监听器的第二个参数
监听器的第一个参数是新输入的值,那第二个参数就是旧值。让我们写出两个参数对比一下:
watch: {inpVal(newVal, oldVal) {console.log(newVal, oldVal)}}
在输入框中输入内容,会发现控制台中输出的效果如下:
1
12 1
123 12
可以发现,在 123 输入的时候,12 是前一个值。这个时候,就很清楚的知道,123 是新值,前一个值是旧值。
2-5 总结
监听器的一般写法:
watch: {inpVal() {// ...}}
监听器的完整写法,指定两个参数:
watch: {inpVal(newVal, oldVal) {// ...}}
3.参考内容
- 计算属性和观察者
003-读书笔记-Vue官网 计算属性与监听器相关推荐
- Vue 官网学习笔记
VUE介绍 vue git 地址:https://github.com/vuejs/vue/projects Vue 官网教程地址:https://cn.vuejs.org/v2/guide/inst ...
- Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...
- vue 计算属性和监听器区别
上海疫情还没过去,裁员的噩耗又来了,,,快卷不动了!最近火急火燎的搞面试,趁复习面试题,总结一下.关于计算属性和监听器vue官方文档写的很简单,博客上也大相径庭.(我也只记的大概,哈哈)懒得查来查去所 ...
- Vue官网提供表单验证cnpm i vee-validate@2 --save
Vue官网提供表单验证 使用步骤: 1:安装vee-valadite,别安装最新版本@2 2:在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:注册插件 ...
- Vue官网所说的低侵入式含义
人生天地之间,若白驹之过隙,忽然而已 提出问题 在观看vue官网当中,在深入响应式系统出现一段话: Vue 最标志性的功能就是其低侵入性的响应式系统.组件状态都是由响应式的 JavaScript 对象 ...
- [vue] watch和计算属性有什么区别?
[vue] watch和计算属性有什么区别? 一个是侦听属性,一个是计算属性 2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应 3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行 ...
- [vue] 在使用计算属性的时,函数名和data数据源中的数据可以同名吗?
[vue] 在使用计算属性的时,函数名和data数据源中的数据可以同名吗? 莫名其妙的问题.可以同名,但data会覆盖methods.并且本就不该同名,同名说明你命名不规范.然后解释为什么会覆盖,因为 ...
- vue计算属性与监听器的区别
vue计算属性与监听器的区别 计算属性(computed) 监听器(watch) 监听data中没有的值 监听data中有的值 使用时触发 使用不会触发 值有变化就触发 值有变化就触发 没有settt ...
- 重磅:Vue 官网竟然有免费的中文视频教程了
loonggg 读完需要 2 分钟 速读仅需1分钟 关注我很久的读者应该都知道,这两年我一直在创业,当然了,作为程序员创业来讲,其实有时候真的不得不自己去干很多活.虽然我是移动端开发出身,但是这两年其 ...
最新文章
- 第十六届全国大学生智能汽车竞赛 讯飞智慧餐厅组别 全国选拔赛成绩公布说明
- matlab读取txt数据绘图(python命令行传参)
- ArrayBlockingQueue原理分析-itrs.elementDequeued()
- C# Collection was modified;enumeration operation may not execute
- div+css使多行文字垂直居中?
- 中国AI公司公开击败谷歌微软,这次是Yi+AI视觉团队
- vue axios 接口封装
- 从零开始攻略PHP(9)——错误和异常处理
- 07Java Server Pages
- 利用动态图层实现数据的实时显示
- 2022国产GIS软件排名
- 做软文营销发布有哪些常见平台?
- MongoDB——聚合管道之$project操作
- 18-Ansible常用模块-group模块
- Linux系统简介分区基础命令(ADMIN01-1)
- 主祷文第二、第三条求什么
- p 值计算(置信度)
- JDK的下载安装以及配置
- word编号格式“图 一-1”改为“图 1-1”
- Excel:二进制和十进制互相转换
热门文章
- html5 canvas 加载图片
- 人群分析--ResnetCrowd: A Residual Deep Learning Architecture
- 报错解决:InvalidArgumentError: Can not squeeze dim[1], expected a dimension of 1, got
- 硬盘满了 mysql启不来_MySQL数据库之磁盘已满造成的mysql启动失败问题分享
- nacos 负载策略_Spring Cloud Alibaba:Nacos 作为注册中心和配置中心使用
- Docker创建Docker-Registry-私服
- as cast float server sql_SQL-Server(五)T-SQL语言
- [Spring 深度解析]第5章 Spring之DAO
- MySQL夺命连环12问
- Logstash(一)的入门与运行机制