day39(VueJS)vuejs的概念与要点,选项种类,经典案例,双向绑定的底层原理

选项的概念与要点

data,methods,computed 等可以选择添加使用,称之为选项
注意:vue组件中的选项(data,methods,computed,...)名字是不能随意更改的,也是不能重复定义的(更改选项名会报错,无法正常渲染,重复定义会导致后面的覆盖前面的)

data选项

data选项必须是个函数,且必须返回一个{},其内部注册响应式数据,当响应式数据被改变,会使引用对应数据的组件模板代码重新执行export default {data(){return {tabs:[{ name:'首页',pic:'' },{ name:'分类',pic:'' },{ name:'购物车',pic:'' },{ name:'我的',pic:'' },],currentIndex:0}}
}

methods选项

methods 选项 必须是个对象格式,内部定义若干方法(函数),用逗号两两隔开export default {methods:{handleClick(i){this.currentIndex = i;}}
}  

computed选项

1.要点1) computed 选项, 定义计算属性( 定义时像函数,写法上和函数相同; 使用时像变量,不带括号,否则会报错)2) 计算属性内部所依赖的数据发生变化时, 计算属性本身就会自动重新计算返回一个新的计算值并缓存起来3) 计算属性内部所依赖的数据没有发生变化, 计算属性会直接返回上一次缓存的值computed:计算,计算的2.代码演示<template><div class="app"><div class="goods"><div v-for="(item,index) in goods" :key="index" class="good"><div class="name">{{item.name}}</div><div class="price">¥{{item.price}}</div><div class="num"> <button @click="minus(item)"> - </button> x{{item.num}} 			<button @click="add(item)"> + </button></div></div></div><h3>总数: {{totalNum}} 总价: {{totalPrice}}</h3></div></template><script>export default {data(){return {goods:[{ name:'iphone xx',price:8888,num:1 },{ name:'iphone xx pro',price:10000,num:1 },{ name:'iphone xx max',price:20000,num:2 },],count:0,}},computed:{totalNum(){-----------该属性计算购物车中商品的总数console.log('totalNum');var res = 0;this.goods.forEach((item)=>{---------思路一: 循环遍历, 累加商品的数量res += item.num})return res;----------累加的商品的数量作为返回值},totalPrice(){--------------计算购物车中商品的总价格var res = 0;this.goods.forEach((item)=>{----------思路一: 循环遍历, 累加商品的金额res += item.num * item.price})return res;}},}</script>

directives选项

1.要点1) directives选项, 定义自定义指令( 局部指令 )directive:指令,指令的2) 注意: 1> 局部指令只能在当前文件中使用,全局指令可以在任何.vue 文件中使用2> 当局部指令和全局指令冲突时, 局部指令优先生效。3) 全局指令语法:定义指令:app.directive('指令名',{mounted(el,binding){指令功能代码}})el代表指令所在的 dom节点,binding获取指令携带的参数4) 局部指令语法:directives:{指令名:{mounted(el,binding){指令功能代码}}}2.局部指令局部指令在.vue为后缀的组件中声明语法:directives:{指令名:{mounted(el,binding){指令功能代码}}}<template><div class="app"><input type="text" v-focus v-validate>--------指令添加在组件模板中的元素标签上,该元素执行时,指令就生效</div></template><script>export default directives:{focus:{-------表单自动聚焦指令mounted(el,binding){--------el 获取指令所在的dom节点 , binding获取指令携带的参数console.log('局部指令 focus');el.focus();-------聚焦,失焦为el.blur();}},validate:{------验证表单输入内容是否为空指令mounted(el,binding){---------el 获取指令所在的dom节点 , binding 获取指令携带的参数if( !el.value ){el.style.border = '1px solid red';  }}}}}</script>3.全局指令补充:::::::::::::::;;
v-focus 和 v-validate 都是 Vue.js 中的自定义指令。v-focus:这是一个自定义指令,用于在元素渲染时自动设置焦点。通过在元素上添加 v-focus 指
令,当该元素被渲染到页面上时,会自动获得焦点,无需手动点击或调用 focus() 方法。例如,可
以在输入框上使用 v-focus 指令,使页面加载后自动聚焦到该输入框。v-validate:这也是一个自定义指令,用于进行表单验证。通过在表单元素上添加 v-validate 指
令,并传入相应的验证规则,可以实现对表单数据的实时验证。当用户输入或改变表单数据时,v-
validate 会根据指定的验证规则对数据进行验证,并根据验证结果添加相应的样式或显示错误信
息。常见的验证规则包括必填字段、最小长度、最大长度、正则表达式等。

components选项

1.要点1) 注意:components选项用于注册局部组件,component方法用于注册全局组件,二者有区别,方法的拼写少一个“s”2) 局部组件:语法:在需要使用的组件书写1> 导入组件:import 组件名 from '组件文件路径'2> 注册组件:components:{组件名,...}3) 全局组件语法:在入口文档 main.js 中书写1> 导入组件(将在其他.vue 文件中写好的组件导入到入口文件):import 组件名 from '组件文件路径'2> 注册组件:使用app.component('注册名',注册组件)方法,为引入的组件进行注册,注册完成后全局组件可在任何.vue 文件使用component:组成部分,组成的2.局部组件语法:在需要使用的组件书写1)导入组件:import 组件名 from '组件文件路径'2)注册组件:components:{组件名,...}<script>导入轮播图组件import swiper from './components/swiper.vue'导入快捷入口组件import entry from './components/entry.vue'export default {components:{----------------------components注册组件,导入的组件需要在components中注册才可以使用swiper,--------------当key与value相同时,可以简写entry}}</script>3.全局组件语法:在入口文档main.js中书写1)导入组件(将在其他.vue文件中写好的组件导入到入口文件):import 组件名 from '组件文件路径'2)使用app.component('注册名',注册组件);为引入的组件进行注册,注册完成后全局组件可在任何.vue文件使用import { createApp } from 'vue'import App from './App-选项-computed.vue'var app = createApp(App)注册全局组件 ( 全局组件可以在任何.vue文件中使用(渲染) )导入轮播图组件import swiper from './components/swiper.vue'导入快捷入口组件import entry from './components/entry.vue'app对象调用component方法注册全局组件app.component('swiper',swiper);app.component('entry',entry);app.mount('#app')

filter选项(已弃用)

filters 选项, 定义过滤器 filter:过滤的
注意: 在 vue2.x 中 filters 是可以用的, 在 vue3.x 中 已经不再支持了<template><div class="app"><h3> {{ time | formatTime }} </h3></div>
</template><script>
export default {filters:{formatTime(time){var d = new Date(time);return `${d.getFullYear()} - ${d.getMonth()} - ${d.getDate()}`}}
}
</script>

案例(分组件开发)

主页面文件:app.vue<template>搜索区<div class="search-box"><span>北京</span><input type="text" placeholder="搜索商品"><span>我的</span></div>轮播图<swiper />快捷入口<entry />秒杀推荐 </template><script>导入轮播图组件import swiper from './components/swiper.vue'导入快捷入口组件import entry from './components/entry.vue'export default {omponents 注册组件components:{swiper,--------------当key与value相同时,可以简写entry}}</script><style>。。。。。。。。</style>
轮播图文件:swiper.vue(组件需要放在component文件夹中)<template><div class="swiper"></div></template><script>export default {}</script><style>.swiper{background-color: lightseagreen;height: 150px;}</style>
快捷入口文件:entry.vue(组件需要放在component文件夹中)<template><div class="entry"><div v-for="(item,index) in list" :key="index" class="item">{{item.name}}</div></div></template><script>export default {data(){return {list:[{ name:'超市' },{ name:'生鲜' },{ name:'服饰' },{ name:'充值' },{ name:'缴费' },{ name:'9.9' },{ name:'领券' },{ name:'plus' },{ name:'到家' },{ name:'家电' },]}}}</script><style>.entry{display: flex;flex-wrap: wrap;}.entry .item{width: 20%;margin: 20px 0;text-align: center;font-size: 14px;}</style>

vue数据绑定的底层原理

vue 数据绑定的底层原理:
1. vue 数据绑定实际是借助Object.defineProperty()实现数据劫持, 给每个属性都添加 getter,setter 方法。1) vue3 中数据绑定的原理将Object.defineProperty()改成了 Proxy 实现2) vue2 中Object.defineProperty()无法监听数组,对象属性的改变(添加属性,删除属性), 但是 Proxy 可以监听到改变
2. 当访问到某个数据属性时, 会触发 getter 方法的调用, 这时该数据属性会和当前 Watcher 实例进行绑定。
3. 当修改某个数据属性的值时, 会触发 setter 方法的调用, 这时会自动通过当前属性属性所绑定的 Watcher 实例进行 dom 的更新( Watcher 实例会将对应的异步更新函数放入到异步更新队列中, 等到下一次事件循环时批量执行,Vue 通过虚拟 DOM 技术对 DOM 进行更新,将更新后的 DOM 渲染到页面上 )proxy:代理的

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

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

相关文章

常用 sqlite3 命令

本次将向您讲解 SQLite 编程人员所使用的简单却有用的命令。这些命令被称为 SQLite 的点命令&#xff0c;这些命令的不同之处在于它们不以分号 ; 结束。 让我们在命令提示符下键入一个简单的 sqlite3 命令&#xff0c;在 SQLite 命令提示符下&#xff0c;您可以使 用各种 …

【MyBatis Plus】初识 MyBatis Plus,在 Spring Boot 项目中集成 MyBatis Plus,理解常用注解以及常见配置

文章目录 一、初识 MyBatis Plus1.1 MyBatis Plus 是什么1.2 MyBatis Plus 和 MyBatis 的区别 二、在 Spring Boot 项目中集成 MyBatis Plus2.1 环境准备2.2 引入 MyBatis Plus 依赖2.3 定义 Mapper2.4 测试 MyBatis Plus 的使用 三、MyBatis Plus 常用注解3.1 为什么需要注解3…

谈谈我对 Reacitive 方法的理解

本文我想和大家分享一下我对当前 Reactivity 方法和现状的理解。我并不是说我的观点就是对的&#xff0c;但我认为&#xff0c;正是通过分享自己的观点&#xff0c;我们才能对行业中的事物达成共识&#xff0c;我希望这些来之不易的见解能够对其他人有所帮助&#xff0c;并补充…

【C++初探:简单易懂的入门指南】二

【C初探&#xff1a;简单易懂的入门指南】二 1.引用1.1引用做函数的参数1.2 引用做返回值1.2.1 关于引用做返回值的几点补充 1.3 多引用(对一个变量取多个别名)1.4 引用类型一致性原则以及权限的问题阐述1.5引用的效率问题1.6引用和指针的比较 2.auto关键字2.1 auto关键字的使用…

react中的forwardRef 和memo的区别?

文章目录 前言介绍forwardRefmemo适用场景优点缺点后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端面试 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错…

VUE重学

v-if和v-show的区别&#xff1a; v-if是按条件渲染&#xff0c;因为他确保在切换时&#xff0c;条件区块内的事件监听器和子组件都会被销毁和重建&#xff0c;也是惰性的&#xff0c;如果初次渲染条件为false&#xff0c;则不会做任何事&#xff0c;只有true才会渲染 v-show:无…

springMVC 面试题

一、springMVC 面试题 1.Spring MVC的常用注解由有哪些&#xff1f; Controller&#xff1a; 用于标识此类的实例的是一个控制器 RequestMapping: 映射url路劲 ReponseBody: 返回JSON数据 RequestBody&#xff1a;将JSON数据转换为json数据&#xff0c;将json数据转换为Ja…

共谈信创谋发展 | 开源网安主办的信创生态构建沙龙圆满完成

​10月26日&#xff0c;由珠海市工业和信息化局、珠海市高新区科技创新和产业发展局指导&#xff0c;珠海华发产业园与开源网安珠海公司等联合主办的“赋能数字转型 提速国产替代”—Uni-Idea信创生态构建沙龙在华发信创产业园成功举办&#xff0c;近百位行业代表参加本次活动&…

使用requests库进行HTTP爬虫编程

目录 一、安装requests库 二、发送HTTP请求 三、解析HTML页面 四、处理HTTP响应和异常 五、使用代理和会话管理 六、使用多线程或多进程提高效率 七、数据存储和处理 八、注意事项和总结 在当今的数字化世界中&#xff0c;数据已经成为了一种宝贵的资源。而网络爬虫程序…

使用SweetAlert2 弹层(模态,提示框,过几秒消失......等等)

最近在做一个Asp.net MVC的项目&#xff0c;里面用部分视图页弹层&#xff0c;感觉很不爽&#xff0c;用着别扭。在前后端分离的项目里&#xff0c;我们肯定用封装好的前端UI库了&#xff0c;比如element ui&#xff0c;但是 Asp.net MVC的项目里面集成这个比较困难...... 就找…

基本微信小程序的体检预约小程序

项目介绍 我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;体检预约系统小程序被用户普遍使用&#xff0c;为方便用户…

使用ControlNet生成视频(Pose2Pose)

目录 ControlNet 介绍 ControlNet 14种模型分别是用来做什么的 ControlNet 运行环境搭建 用到的相关模型地址 ControlNet 介绍 ControlNet 是一种用于控制扩散模型的神经网络结构&#xff0c;可以通过添加额外的条件来实现对图像生成的控制。它通过将神经网络块的权重复制到…

OPNET <<< Program Abort >>> Standard function stack imbalance

OPNET <<< Program Abort >>> Standard function stack imbalance OPNET 问题原因及解决办法 OPNET 问题 OPNET仿真时遇到此问题&#xff1a; <<< Program Abort >>> Standard function stack imbalance 原因及解决办法 出现此问题是因…

【开题报告】基于Springboot的母婴商城设计与实现

1.研究背景与目的 随着社会发展和人们生活水平的提高&#xff0c;母婴市场逐渐兴起并蓬勃发展。为了满足消费者对母婴产品的需求&#xff0c;建立一个高效、可靠的母婴商城系统变得尤为重要。本项目旨在通过使用Spring Boot框架&#xff0c;设计和实现一个功能完善、易于扩展的…

Maven compile时报错 系统资源不足,出现OOM:GC overhead limit exceeded

今天在对项目进行Maven clean compile的时候&#xff0c;报出了如下的错误&#xff0c; 系统资源不足。 有关详细信息&#xff0c;请参阅一下堆栈跟踪。 java.lang.OutOfMemoryError: GC overhead limit exceededat java.util.EnumSet.noneOf(EnumSet.java:115)at com.sun.too…

半导体设备:静电卡盘

静电卡盘是半导体设备的核心组件之一&#xff0c;对于控制晶圆的温度&#xff08;加热及冷却&#xff09;至关重要。静电卡盘&#xff08;简称 ESC 或者 E-CHUCK&#xff09;具有高稳定性、晶圆平坦度高、颗粒污染小、边缘效应小等优势&#xff0c;目前已广泛应用在等离子和真空…

2.10、自定义量化优化过程

introduction 如何自定义量化优化过程,以及如何手动调用优化过程 code from typing import Callable, Iterableimport torch import torchvision from ppq import QuantizationSettingFactory, TargetPlatform from ppq.api import (ENABLE_CUDA_KERNEL, QuantizationSetti…

QT如何检测当前系统是是Windows还是Uninx或Mac?以及是哪个版本?

简介 通过Qt获取当前系统及版本号&#xff0c;需要用到QSysInfo。 QSysInfo类提供有关系统的信息。 WordSize指定了应用程序编译所在的平台的指针大小。 ByteOrder指定了平台是大端序还是小端序。 某些常量仅在特定的平台上定义。您可以使用预处理器符号Q_OS_WIN和Q_OS_MACOS来…

【设计模式】第14节:结构型模式之“代理模式”

一、简介 代理模式&#xff08;Proxy Design Pattern&#xff09;在不改变原始类&#xff08;或叫被代理类&#xff09;代码的情况下&#xff0c;通过引入代理类来给原始类附加功能。 二、优点 关注点分离访问控制延迟实例化远程访问缓存增加附加功能 三、应用场景 访问控…

【2021集创赛】海云捷迅杯一等奖:基于稀疏卷积与层融合的流水线优化方案

海云捷迅杯:基于FPGA C5Soc的MobileNetV1 SSD目标检测方案设计 本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 **杯赛题目&#xff1a;**海云捷迅杯——基于FPGA C5Soc的MobileNetV1 SSD目标检测方案设计 设计任务&#xff1a; 基于已训…