[前端笔记030]vue之hello、数据绑定、MVVM、数据代理、事件处理、计算属性和监视属性
前言
- 本笔记参考视频,尚硅谷:BV1Zy4y1K7SH p1 -p25
- 官网文档完善,本文只做笔记使用,
- 官网下载vue的开发版和生产版或者使用CDN,并去谷歌商店下载开发插件
简介
- 组件化模式,提高代码复用率,更好维护
- 声明式编码,与命令式编码相比,无需直接操作DOM,提高开发效率
- 虚拟DOM+diff算法,尽量复用DOM节点。
- hello world:
0. 引入vue,前期用script标签引入,后期使用cli,npm
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- 准备好一个容器用于与vue绑定。
- 创建vue实例,
//容器里的代码呗称为【vue模板】,vue拿去解析并用 值 替代 {{}} 生成新的
<div id="root"><h1> hello {{name}} </h1>
</div>
const vm = new Vue({ //构造函数里传配置对象el:'#root', //el用于指定当前实例绑定的容器,通常为CSS选择器字符串data:{ //data存储数据,供el指定容器使用,对象/函数name:'world'}
})
- 容器与vue实例一对一,{{}}中为js表达式(能表示值的JS代码),1+1这种也是可以的,
- 使用
{{ xxx }}
在标签体引入动态变化的数据(插值语法),xxx可以为函数,需要加括号;指令语法:标签中的v-bind等,将字符串中的内容当成js表达式。 - data中的数据发生改变,Vue会重新解析下模板,{{ }}里面的函数也会重新执行
数据绑定
- v-bind:,简写:,绑定数据。单向绑定
- v-model:,双向绑定;只能应用到表单类属性(输入类元素)上;默认对value进行优化,所以v-model:value=““可以简写为v-model=””
el与data的第二种写法
- el可以不写,使用vm实例的vm.mount(‘#root’)实现绑定,mount是Vue的方法,vm实例沿着原型链调用。
- data函数式写法,函数必须返回一个对象,对象中的为需要的数据;使用组件时必须使用函数式。且不能使用箭头函数,箭头函数的this是window,而普通函数的this是vue;data:function(){},可以简写为data(){}
MVVM
- Model,对应data中的数据,一般js对象;view,模板页面,DOM;
- VM,ViewModel,Vue实例对象
- data中所有的属性,最后都出现在了vm身上,vm的所有属性,和Vue原型上的所有属性,在vue模板中都可以直接使用
数据代理
- Object.defineProperty()
Object.defineProperty( 对象名,'对象属性',{ //配置对象value:,enumerabele:true, //控制属性是否可以枚举,默认falsewritable:true, //控制属性是否可以被修改,默认falseconfigurabel:true //是否可以被删除,默认falseget(){ //当读取该属性时,get()会触发,返回值为age的值return 值变量}set(value){ 值变量=新值 } //修改值时,set会被调用,且会收到修改的具体值
})
- vue数据代理,通过vm对象代理对data对象中属性的操作
- 通过Object.defineProperty()实现,将data对象中的所有属性添加到vm上,为每个添加到vm上的属性,指定一个getter和setter
v-on,事件处理
- v-on:xxx 或 @xxx 绑定事件,xxx可以为事件回调配置在配置对象的methods中,也可以为简单的表达式
- @click=“fun”,与 @click="fun($event)"一致,后者能穿event以外的参数
- methods中的this为Vue(箭头函数时,为windows),methods中的方法无数据代理
- 事件修饰符:@click.xxx.xxx,xxx可以为事件修饰符,多个xxx时表示and
- prevent 阻止默认事件,比如a标签的跳转
- stop 阻止事件的冒泡,
- once 事件只触发一次,
- capture 使用事件的捕获模式,与冒泡相反
- self 只有event.target是当前操作的元素时才触发事件
- passive 事件的默认行为立即执行,无需等待事件回调执行完毕;正常流程是,事件触发,调用回调,执行默认行为比如滚动条滚动。
- 键盘事件,按键别名:@click.xxx.xxx,xxx可以为按键别名,多个xxx时表示and,Vue中常用的按键别名:
- 回车:enter
- 删除:delete (捕获“删除”和“退格”键)
- 退出:esc
- 空格:space
- 换行:tab (特殊,必须配合keydown去使用)
- 上:up
- 下:down
- 左:left
- 右:right
- 注意:系统修饰键(用法特殊):ctrl、alt、shift、meta
- 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
- 配合keydown使用:正常触发事件
- 可以使用keyCode去指定具体的按键,比如:@keydown.13=“showInfo”,但不推荐这样使用
- 未提供别名的键,使用按键原始的key值去绑定,比如Enter,两个词的需要转化为断横线命名法
- Vue.config.keyCodes.自定义键名 = 键码,可以自定义按键别名
compute,计算属性
- vue配置对象中的属性,计算属性,需要通过已有属性计算得来。
computed:{fullName:{get(){ //这个地方的this,vue更改绑定到vm身上,使用返回值作为计算属性的值return this.firstName + '-' + this.lastName},set(value){const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}},fullName:{ //简写return this.firstName + '-' + this.lastName}
}
- 底层借助了
Objcet.defineproperty()
方法提供的getter和setter。 - get函数,1. 初次读取时会执行一次,之后读取会读取缓存2. 当依赖的数据发生改变时会被再次调用
- 计算属性最终会出现在vm上,直接读取使用即可,修改计算属性,使用set函数去响应修改,且set中要引起计算时依赖的数据发生改变
监视属性
- vue配置对象中的属性,监视属性,
- 当被监视的属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视
- 监视有两种写法:1. 创建Vue时传入watch配置。2. 通过
vm.$watch
监视 - 深度监视:1. Vue中的watch默认不监测对象内部值的改变(一层)2. 在watch中配置
deep:true
可以监测对象内部值的改变(多层)3. Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
watch:{//监视多级结构中所有属性的变化numbers:{immediate:true, //刷新/初始加载时执行一次deep:true, //开启深度监视handler(){console.log('numbers改变了')}}//监视多级结构中某个属性的变化/* 'numbers.a':{handler(){console.log('a被改变了')}} */
}
- 如果监视属性除了handler没有其他配置项的话,可以进行简写
watch:{//正常写法isHot:{handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}, //简写isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)}
}
//正常写法
vm.$watch('isHot',{handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}
})
//简写
vm.$watch('isHot',function(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)
})
- computed和watch之间的区别:
- computed能完成的功能,watch都可以完成
- watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
- 两个重要的小原则:
- 所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。
相关文章:
[前端笔记030]vue之hello、数据绑定、MVVM、数据代理、事件处理、计算属性和监视属性
前言 本笔记参考视频,尚硅谷:BV1Zy4y1K7SH p1 -p25官网文档完善,本文只做笔记使用,官网下载vue的开发版和生产版或者使用CDN,并去谷歌商店下载开发插件 简介 组件化模式,提高代码复用率,更好维护声明式编…...
每天学一点之注解、元注解
注解 1、注解概述 定义: 注解(Annotation),也叫元数据。与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面,用来对这些元素进行说明,注释。 作用分类&#…...
STA环境
目录1. CMOS逻辑门2. 波形3. 时钟3.1. 指定时钟create_clock时钟延迟set_clock_latency 时钟不确定度set_clock_uncertainty 跨时钟域set_false_path3.2. 衍生时钟3.3. 虚拟时钟4. 时序路径2.1. 输入路径2.2. 输出路径2.3. 点对点约束本文介绍在执行静态时序分析(St…...
嵌入式系统实践 12 ——基于ARM汇编 Keil5 MSP432 P401R开发板
物联网实验1 阿里云远程控制小灯 ///****************************************************************************** // * // * MSP432P401 // * ----------------- // * | | // * | |…...
【密码学篇】密码行业标准汇总(GM)
【密码学篇】密码行业标准汇总(GM) 截止到2023年03月10日,共130个密码行业标准,适用商用密码应用与安全性评估等密码行业,可点击链接预览或下载标准—【蘇小沐】 文章目录【密码学篇】密码行业标准汇总(GM…...
桌面文件删除后没有在回收站原因和恢复方法
桌面误删文件回收站也没有怎么办?遇到电脑桌面文件误删了,重要数据回收站找不回这种情况不要慌!如今数据恢复技术很成熟,许多文件丢失问题都能够成功解决。下面我们就一起来了解下桌面误删文件回收站没有的原因和相关文件恢复方法…...
什么是业务运营?关键组成部分有哪些?
企业领导者使用收入运营和智能软件等技术来分析买家的不同接触点。这些见解决定了客户互动的成败,从而改善了业务运营,从而带来了成功。 什么是业务运营? 业务运营包括企业为保持盈利而执行的一系列日常任务。虽然这些任务可能因业务类型或行…...
腾讯云新用户怎么配置服务器的方法教程
腾讯云新用户怎么配置服务器?腾讯云服务器配置选择攻略,先选择云服务器地域和可用区,然后根据用户使用场景需要平衡型、计算型或高IO型等特性来选择云服务器CVM实例规格,主机教程网来详细说下腾讯云服务器配置选择攻略。 1、腾讯云…...
windows 11系统,通过ip地址远程连接连接ubuntu 22.04系统(共同局域网下,另一台主机不需要联网)
windows 11系统,通过ip地址远程连接连接ubuntu 22.04系统(不需要联网)问题来源问题分析解决方案问题来源 自己搭建了一台ubuntu系统作为深度学习的机器,但是学校的网络问题,一个账号只能同时登录3台设备。通过远程连接…...
头脑风暴(一):Controller层前端传参接收;在Service层实现类中?为何要build相关构建器?添加套餐业务分析
文章目录1 MyBatis中Controller层List集合接收数据,泛型添加与否1.1 案例场景1.2 应该用什么接收1.3 是否可以用其他方式接收?1.4 LIst集合接收可否不指定泛型1.5 mybatis中使用基本类型接收数据?resultType是集合中的元素的类型,…...
vue-cropper 拖动图片和截图框
现象 开发遇到vue--cropper不能拖动图片和截图框 解决方法 can-move-box设置为true,表示可以拖动截图框 can-move设置为true,表示可以拖动图片 *注意: 我外层套了一个el-col, el-col的宽高一定要大于截图框的宽高,否则移动不了…...
[Linux基础]history相关的环境变量设置
目录 背景 简介 命令操作 1. 语法: 2. 功能 3. 参数 环境变量设置 背景 工作中时常收到客户的反馈,我的系统什么也没干,就出现文件丢失,程序错误等等问题;我们在问题排查的时候查看history信息也是重要环节…...
怎么给电脑分盘与合并磁盘?教你三招
电脑只有一个C盘,想要再分出一个或多个分区,怎么办?电脑C盘的容量太小,太容易满了,想重新分盘,或者把其他盘跟它合并,但因为文件太多备份实在是太麻烦,怎么办?怎么给电脑…...
HCIP-5.4OSPF路由聚合、缺省路由
1、路由聚合 OSPF 是一种链路状态路由协议,因此 OSPF路由器不传输路由,而是传输链路状态信息。因此,OSPF 路由通过汇总 LSA 来控制链路状态信息的传输,从而减小 LSDB 数据库的大小,进而控制路由的汇总。 由于OSPF路由…...
【数据结构】——树与二叉树
文章目录树二叉树二叉树的性质完全二叉树二叉树的存储遍历二叉树和线索二叉树6.4 树和森林哈夫曼树应用树 树的定义:树是以分支关系定义的层次结构。 D; 树(Tree)是n(n≥0)个结点的有限集。 R 数据关系 有且仅有一个特定的称为根(Root) 的结点 当n>1时&…...
等离子纳秒高压脉冲电源维修HVP-20 P
等离子纳秒高压脉冲电源维修HVP-20 P;HVP-10B;HVP-05;HVP-02等型号均可维修 HVP-20 P(N)用于气体放电与低温等离子体的高性能纳秒高压脉冲电源。 HVP-20P(N)采用专有的marx电路,实现高压脉冲电源参数的便捷可调,包括峰值电压0 – 20 KV (-2…...
JavaScript内改变this指向
之前我们说的都是代码内 this 的默认指向今天我们要来说一下如何能改变 this 指向也就是说, 你指向哪我不管, 我让你指向哪, 你就得指向哪开局在函数的原型( Function.prototype ) 上有三个方法callapplybind既然是在函数的原型上, 那么只要是函数就可以调用这三个方法…...
Cobalt Strike---(2)
数据管理 Cobalt Strike 的团队服务器是行动期间Cobalt Strike 收集的所有信息的中间商。Cobalt Strike 解析来 自它的 Beacon payload 的输出,提取出目标、服务和凭据。 如果你想导出 Cobalt Strike 的数据,通过 Reporting → Export Data 。Cobalt Str…...
docker的命令使用和相关例子
Docker是一种流行的容器化平台,可以帮助开发人员更轻松地构建、发布和管理应用程序。下面是一些Docker的命令使用和相关例子: Docker镜像相关命令: 搜索Docker镜像: docker search 例子:docker search ubuntu 下载D…...
23模式--代理模式
本篇主要聊一些23中模型中的代理模式: 看一下百度百科的解释: 代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目…...
【Linux】信号的产生、保存、捕捉处理 (四种信号产生、核心存储、用户态与内核态、信号集及其操作函数)
文章目录1、什么是信号?2、信号的产生2.1 通过键盘产生信号2.2 通过系统调用产生信号2.3 硬件异常产生的信号2.4 由软件条件产生的信号2.5 进程的核心转储3、信号的保存4、信号的捕捉4.1 用户态和内核态4.2 用户态到内核态的切换4.3 信号捕捉过程5、信号集操作函数以…...
redis经典五种数据类型及底层实现
目录一、Redis源代码的核心部分1.redis源码在哪里2.src源码包下面该如何看?二、我们平时说redis是字典数据库KV键值对到底是什么1.6大类型说明(粗分)2.6大类型说明3.上帝视角4.Redis定义了redisObject结构体4.1 C语言struct结构体语法简介4.2 字典、KV是什么4.3 red…...
三十而立却被裁,打工人要如何应对职场危机?
又到金三银四就业季,对于部分职场人来说,年龄成为了他们找工作的最大限制。 因为绝大部分企业招聘中层干部以下岗位的时候,都会要求年龄不超过35周岁,再加上每年千万毕业生涌入社会,竞争程度相当激烈,这就导…...
java面试-java基础
char 变量能不能存贮一个中文汉字?为什么? char 变量可以存贮一个汉字,因为 Java 中使用的默认编码是 Unicode ,一个 char 类型占 2 个字节(16 bit),一个汉字是2个字节,所以放一个中…...
Kafka 消息不丢失
Kafka 消息不丢失生产者丢失消费者丢失不丢失配置Kafka 保证消息不丢失:只对已提交的消息 (committed message) 做有限度的持久化保证 已提交的消息:当 n 个 Broker 成功接收到该消息并写入到日志文件后,就告诉生产者该消息已成功提交有限度…...
ASEMI高压MOS管10N65参数,10N65规格,10N65封装
编辑-Z ASEMI高压MOS管10N65参数: 型号:10N65 漏极-源极电压(VDS):650V 栅源电压(VGS):30V 漏极电流(ID):10A 功耗(PDÿ…...
LeetCode-416. 分割等和子集
目录题目分析回溯法动态规划动态规划(压缩)题目来源 416. 分割等和子集 题目分析 这道题目是要找是否可以将这个数组分割成两个子集,使得两个子集的元素和相等。 那么只要找到集合里能够出现 sum / 2 的子集总和,就算是可以分割成两个相同元素和子集了…...
2021年 第12届 蓝桥杯 Java B组 省赛真题详解及小结【第2场省赛 2021.05.09】
一、试题A:求余(本题总分:5 分) 得:5分 本题总分:5 分 【问题描述】 在 C/C/Java/Python 等语言中,使用 % 表示求余,请问 2021%20 的值是多少? 【答案提交】 这是一道结果…...
elasticSearch写入原理
elasticSearch写入原理 最近学习完了es相关的课程整理除了es的核心内容,学习这东西知其然知其所以然,自己按照自己的理解整理了es相关的面试题。先热个身,整理一下es的写入原理,有不对的地方请大家指正。 这些原理的东西我觉得还是…...
第十四届蓝桥杯模拟赛(第三期)Python
1 进制转换 问题描述 请找到一个大于 2022 的最小数,这个数转换成十六进制之后,所有的数位(不含前导 0)都为字母(A 到 F)。 请将这个数的十进制形式作为答案提交。 答案:2730 def ch…...
Pytorch模型参数的保存和加载
目录 一、前言 二、参数保存 三、参数的加载 四、保存和加载整个模型 五、总结 一、前言 在模型训练完成后,我们需要保存模型参数值用于后续的测试过程。由于保存整个模型将耗费大量的存储,故推荐的做法是只保存参数,使用时只需在建好模…...
面试热点题:回溯算法之组合 组合与组合总和 III
什么是回溯算法? 回溯算法也可以叫回溯搜索算法,回溯是递归的"副产品",回溯的本质是穷举,然后选出我们需要的数据,回溯本身不是特别高效的算法,但我们可以通过"剪枝"来优化它。 理解回溯算法 回溯…...
java面试-jvm
JVM JVM 是 java 虚拟机,简单来说就是能执行标准 java 字节码的虚拟计算机 JVM 是如何工作的 首先程序在执行之前先要把 Java 代码(.java)转换成字节码(.class),JVM 通过类加载器(ClassLoade…...
vscode下载与使用
1.vscode下载 官网下载地址:Download Visual Studio Code - Mac, Linux, Windows下载太慢,推荐文章:解决VsCode下载慢问题_vscode下载太慢_迷小圈的博客-CSDN博客下载太慢,推荐下载链接:https://vscode.cdn.azure.cn/s…...
人员摔倒识别预警算法 opencv
人员摔倒识别预警算法通过opencv网络模型技术,人员摔倒识别预警算法能够智能检测现场画面中人员有没有摔倒,无需人为干预可以立刻抓拍告警。OpenCV的全称是Open Source Computer Vision Library,是一个跨平台的计算机视觉处理开源软件库&…...
华为OD机试题 - 火星文计算(JavaScript)| 机考必刷
更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:火星文计算题目输入输出示例一输入输出说明Code解题思路版权说明…...
AI人工智能 - 初探
1.应用场景 主要用于了解和系统学习AI,从而可以在工作生活中利用AI做一些事。 2.学习/操作 1.文档阅读 下面的内容来自于与chatGPT的对话 2.整理输出 介绍AI 人工智能(Artificial Intelligence,简称AI)是计算机科学中的一个分支&…...
Spring-AOP工作流程
Spring-AOP工作流程 3,AOP工作流程 3.1 AOP工作流程 由于AOP是基于Spring容器管理的bean做的增强,所以整个工作过程需要从Spring加载bean说起: 流程1:Spring容器启动 容器启动就需要去加载bean,哪些类需要被加载呢?需要被增强的类,如:B…...
C51---串口发送指令,控制LED灯亮灭
1.Code: #include "reg52.h" #include "intrins.h" sfr AUXR 0x8E; sbit D5 P3^7; void UartInit(void) //9600bps11.0592MHz { //PCON & 0x7F; //波特率不倍速 AUXR 0x01; SCON 0x50; //8位数据,可变波…...
【Wiki】XWiki数据备份
XWiki为主题使用java开发的开源wiki,官网地址如下: https://www.xwiki.org/xwiki/bin/view/Main/ 目录1、 XWiki升级数据备份1.1、 获取XWiki配置的数据库与持久化目录信息1.2 备份数据库信息1.3 备份持久化目录2、XWiki数据迁移如果一个知识库不能确保数…...
ctk框架开发Qt插件应用示例工程
目录 前言 约定 插件工程pluginApp: 主启动工程StartApp: 效果演示 结语...
spring5源码篇(4)——beanFactoryPostProcessor执行/注解bean的装配
spring-framework 版本:v5.3.19 前面研究了beanDefinition的注册,但也仅仅是注册这一动作。那么在spring容器启动的过程中,是何时/如何装配的?以及装配的bean是如何注入的? (考虑到xml方式基本不用了以及篇…...
masstransit的message几个高级用法
1)问题,Class MessageA 基类,Class MessageB继承自MessageA; 用bus.Publish方法本想把有些消息只发给B队列,结果由于其继承关系A队列也获得了消息; 解决方法用send, Uri uri new Uri(RabbitM…...
漏洞分析丨cve-2012-0003
作者:黑蛋一、漏洞简介这次漏洞属于堆溢出漏洞,他是MIDI文件中存在的堆溢出漏洞。在IE6,IE7,IE8中都存在这个漏洞。而这个漏洞是Winmm.dll中产生的。二、漏洞环境虚拟机调试工具目标软件辅助工具XP-SP3、KaliOD、IDAIE6Windbg组件gflags.exe三…...
rm命令——删除文件或目录
rm命令是英文单词remove的缩写,主要功能是删除文件或目录。 因为删除文件是一个破坏性动作,因此,在使用时需要格外小心,在执行之前一定要再三确认删除的是哪个目录中的什么文件。 rm命令的语法格式如下: rm [选项] …...
【零基础入门学习Python---Python的基本语法使用】
一.Python基本语法使用 Python是一种易学且功能强大的编程语言,具有简洁的语法和广泛的应用领域。在本文中,我们将介绍Python的基本语法使用,以帮助初学者快速入门Python编程。 1.1 注释 Python 支持两种类型的注释:单行注释和多行注释。 单行注释:以 # 符号开头,从 # …...
数据仓库相关概念的解释
数据仓库相关概念的解释 文章目录数据仓库相关概念的解释1 ETL是什么?ETL体系结构2 数据流向何为数仓DW3 ODS 是什么?4 数据仓库层DWDWD 明细层DWD 轻度汇总层(MID或DWB,data warehouse basis)DWS 主题层(D…...
1/4车、1/2车、整车悬架模糊PID控制仿真合集
目录 前言 1. 1/4悬架系统 1.1数学模型 1.2仿真分析 2. 1/2悬架系统 2.1数学模型 2.2仿真模型 2.3仿真分析 3. 整车悬架系统 3.1数学模型 3.2仿真分析 4.总结 前言 前面几篇文章介绍了LQR、SkyHook、H2/H∞、PID控制,接下来会继续介绍滑模、反步法、M…...
Linux性能补丁升级,避免不必要的跨核Wake-Up
导读一个由英特尔发起的、旨在改进Linux内核公平调度程序代码的补丁系列,也看到了来自AMD工程师和其他利益相关者的测试/反馈,并继续进行改进。这个补丁系列的重点是避免在不必要的情况下发生过多的跨核唤醒(Cross-CPU Wake-up)。这样一来,这…...
Spring Cloud Alibaba全家桶(六)——微服务组件Sentinel介绍与使用
前言 本文小新为大家带来 微服务组件Sentinel介绍与使用 相关知识,具体内容包括分布式系统存在的问题,分布式系统问题的解决方案,Sentinel介绍,Sentinel快速开始(包括:API实现Sentinel资源保护,…...