vue 笔记03

目录

01 vue 对象本身的属性和方法

02 computed计算属性的使用

03 filter过滤器的使用

04 使用key属性管理重复元素(虚拟dom原理)

05 MVC 和 MVVM

06 双向数据绑定原理


 

01 vue 对象本身的属性和方法

        vue构造函数传入的是options对象

        可以通过vue对象的$option获取 vm.$option

        可以通过vue对象$el获取到el属性指向的元素

        可以通过vue对象$data获取到data对象

        总结:

                el data其实并不是vm对象的属性    而是参数传递进去的那个options对象的属性

                但是我们平时直接vm.msg 就可以调用data里面的变量了 是因为vue底层帮我们做好了 方便我们调用

02 computed计算属性的使用

        data里面定义的数据无法直接互相访问  因为加载到data的时候还没有产生当前的vue对象

        如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性

        用法:

                简单写法:

                computed:{

                        计算属性变量名(){

                                这里面可以通过this访问到data里面的任意数据

                                return 返回的结果就是当前计算属性的值

                          }

                    }

                一旦计算属性引用的其中任意一个变量的值发生变化了

               那么当前计算属性对应的函数就会执行 重新计算属性的值重新渲染

                updated生命周期函数  (钩子函数)

                这种需求为什么不使用updated钩子函数

                因为updated钩子函数是 只要data里面任意一个变量值发生变化都会触发 范围太大

                computed是页面加载时就会执行一次 就算初始结果

                计算属性本身不能直接修改值 需要定义存值器和取值器

                        高级写法:

                                computed:{//里面可以定义多个变量

                                    变量:{

                                        set(){

                                                设置当前变量的值

                                        },

                                        get(){

                                                    return 返回当前变量的值

                                        }

                                    }

                                }

                计算属性本身不能直接修改值 需要定义存值器和取值器

                第一种写法是简单写法

                我们需要使用高级写法才能实现修改计算属性值的需求

03 filter过滤器的使用

        针对页面mustache语法渲染的数据进行再次过滤可以使用过滤器

        用法:

                data同级的位置:

                        filters:{

                                过滤器名字(val){当前过滤器使用的内容

                                        return 返回过滤后的新内容

                                    }

                       }

                使用过滤器:

                        {{变量或者表达式 |  过滤器名字}}

                官方声明:

                        过滤器只能用在mustache语法 和 v-bind上面

                在vue中定义的过滤器是局部过滤器 

                还可以定义全局过滤器:

                        Vue.filter('过滤器的名字',回调函数)

                        回调函数的参数就是过滤原本的值return 返回过滤的新值

        

04 使用key属性管理重复元素(虚拟dom原理)

         输入框在切换时原本上一次输入框的内容被保留到了新切换的输入框里面

        原因:

            涉及到Vue的虚拟DOM原理

            在vue当中是双向数据绑定原理是用到objectdefineproperty方法为每一个属性绑定的

            因为原生js操作dom是很消耗性能的因为你每次查找元素都是document就相当于在dom树

            找来找去 如果每次都爬树对树是有损伤的  

            虚拟DOM

            vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么?没有的话就接着修改 如果确定不修改了那么中间有一个diff算法 最终修改

        v-for指令在实际开发中必须定义key属性

        使用:key='数组中每一个对象的不重复属性'

        使用key绑定一个不重复的属性值

        如果当前数组或者的对象中没有不重复的值比如id

        只能暂时使用索引值 :key='index'

        但是官方不建议使用索引值

05 MVC 和 MVVM

        M:model模型层负责数据的增删改查

        V:view视图层

        C:controller控制者(业务逻辑层)

        MVVM结构:

            Model--View--View--Model  模型和视图直接绑定

            vue干掉了中间的业务逻辑层实现了模型和视图直接绑定

06 双向数据绑定原理

        vue的双向数据绑定是通过数据劫持 Object.defineProperty()来实现的

        Object.defineProperty()是es5提供出来的一个无法shim(兼容)的特性

        无法兼容ie8以下的浏览器

        Object.defineProperty() 添加/修改属性

        **参数1 把属性添加到哪个对象上面去

        **参数2 : 添加的属性

        **参数3 : 属性描述符 对象形式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/19610.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【稳定检索/投稿优惠】2024年语言、文化与艺术发展国际会议(LCAD 2024)

2024 International Conference on Language, Culture, and Art Development 2024年语言、文化与艺术发展国际会议 【会议信息】 会议简称:LCAD 2024大会时间:2024-08-10截稿时间:2024-07-27(以官网为准)大会地点:中国…

Rainbond 携手 TOPIAM 打造企业级云原生身份管控新体验

TOPIAM 企业数字身份管控平台, 是一个开源的IDaas/IAM平台、用于管理账号、权限、身份认证、应用访问,帮助整合部署在本地或云端的内部办公系统、业务系统及三方 SaaS 系统的所有身份,实现一个账号打通所有应用的服务。 传统企业 IT 采用烟囱…

纯C++做多项式拟合

一、多项式拟合用途 当前有一组对应的x、y数据,希望通过这些数据点做出近似的多项式曲线:YnX^2mXc 其中多项式最高次数可调,返回各个参数及曲线的拟合度R^2 二、函数实现 参数中的order为设置的多项式最高次次数,coefficients为…

源码编译安装LNMP

1、LNMP 包含:linux、Nginx、Mysql、php LNMP的工作原理 由客户端发送页面请求给Nginx,Nginx会根据location匹配用户访问请求的URL路径判断是静态还是动态,静态的一般是以 .html .htm .css .shtml结尾,动态的一般是以 .php .jsp…

17.js字符串

字符串创建 1.字面量创建 var 字符串名字符串 2.内部构造函数创建 var 字符串名new String(字符串) length属性 只能读取不能设置 var strabcdfegfglconsole.log(str.length) //10str.length5 console.log(str) //不能写 abcdfegfgl index属性 只能读不能设置 var strab…

水位监测站的工作原理

TH-SW2在雨季,河道和湖泊的水文信息监测对于防洪减灾、水资源管理和环境保护等方面具有至关重要的意义。水文监测站作为实现这一目标的基础设施,发挥着关键作用。水文监测站是观测及搜集河流、湖泊、水库等水体的水文、气象资料的基层水文机构。在雨季&a…

C++基础项目 通讯录管理系统

尝试找实习面试,结果发现自己的学习还有很多不足,没有了解c11/14很多新特性的使用以及学习,因此打算重新过一遍基础.通讯录管理系统是c的基础入门,主要运用了结构体,数组,函数以及指针等东西.下面详细的说明整个设计工程. 需求分析 * 联系人上限为1000人,联系人信息…

harbor -- docker私有仓库安装配置

1 安装docker-compose $ curl -L "https://get.daocloud.io/docker/compose/releases/download/v1.25.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose $ chmod x /usr/local/bin/docker-compose 2 安装配置harbor $ wget https://g…

代码随想录算法训练营第36天 | 738.单调递增的数字

代码随想录算法训练营第36天 | 738.单调递增的数字 自己看到题目的第一想法看完代码随想录之后的想法自己实现过程中遇到哪些困难 ) 链接: 738.单调递增的数字 自己看到题目的第一想法 738.单调递增的数字:先判断本身是否单调递增,如果是就直接返回该…

Android NDK系列(五)内存监控

在日常的开发中,内存泄漏是一种比较比较棘手的问题,这是由于其具有隐蔽性,即使发生了泄漏,很难检测到并且不好定位到哪里导致的泄漏。如果程序在运行的过程中不断出现内存泄漏,那么越来越多的内存得不到释放&#xff0…

centos时间不对

检查当前时区是否正确 timedatectl status如果时区不正确,使用以下命令设置正确的时区(将Asia/Shanghai替换为您所在的时区): timedatectl set-timezone Asia/Shanghai如果时区正确但时间不准确,使用以下命令同步网络…

Java基础语法——字符串(String/StringBuilder/Stringjoiner)

String Java的String类是不可变的,意味着一旦创建,其值就不能被改变。String类提供了丰富的API来操作字符串。 以下是一些常用的方法: 构造方法: 有以下几种常见的: public class stringlearn {public static void…

AI 赋能前端 -- 文本内容概要生成

幸福不在于你获得了什么,而在于你比他人多获得了什么 是比较出来的 大家好,我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder 此篇文章所涉及到的技术有 OpenAILangChainRust/WebAssemblyWeb Workerreact+ts+vite配置环境变量(env)因为,行文字数所限,有些概…

渗透课程第二阶段--Part1--信息收集

目录 一. 为什么要做信息收集? 渗透测试的流程 信息收集包括的内容 学习框架: 二. 分类 1. 域名相关信息 域名(Domain Name)是什么 域名的分类 域名联系人信息 子域名信息 域名DNS信息 2. IP相关信息 ping/nslookup …

香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(一)

整期笔记索引 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(一) 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(二) 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff0…

使用element的提示框并修改css

使用el-tooltip来做提示框&#xff1a; <el-tooltip popper-class"popper" content"敬请期待" placement"right"><div><i class"iconfont icon-lianjie-01"></i><span>输入链接</span></div&…

和鲸“101数智领航计划”——在武大解码 GeoAI,地理空间智能(GeoAI)学术研讨会及编程工作坊圆满落幕

AI 正革新地理空间数据分析的范式&#xff0c;既为科学研究及行业落地应用带来了机遇&#xff0c;同样也带来了挑战。 5 月 25 日&#xff0c;和鲸科技联合武汉大学遥感信息工程学院、中国地质大学&#xff08;武汉&#xff09;地理与信息工程学院&#xff0c;于武汉大学成功举…

element.addEventListener() 方法 详细解析与代码示例

element.addEventListener() 方法用于向指定的元素添加事件监听器。 语法: element.addEventListener(event, function, useCapture);参数说明: event&#xff1a;表示要监听的事件类型&#xff0c;比如 "click"、"mouseover"、"keydown" 等等…

使用mongorestore时no reachable servers错误的解决

使用mongorestore命令恢复导出的.bson文件至mongodb时&#xff0c;比如 mongorestore -d mydb -c mycollection mycollection.bson可能会遇到遇到类似下面的错误 Failed: error connecting to db server: no reachable servers而此时mongosh&#xff0c;或者mongo命令本身是可…

关于TeamSpeak3-网易音乐机器人的基础使用方法(胎教级教程)

本文转自博主的个人博客&#xff1a;https://blog.zhumengmeng.work,欢迎大家前往查看。 原文链接&#xff1a;点我访问 序言&#xff1a;在自己的ts服务器上安装了网易音乐机器人&#xff0c;写这篇文章旨在教群友/网友如何使用机器人!&#x1f60b;&#x1f44d; 一、TS3Audi…