VUE基础
文章平均质量分 55
主要记录一些vue的基础知识
煸橙干儿~~
这个作者很懒,什么都没留下…
展开
-
vue---保存当前页面状态
比如从 B 组件跳转到 A 组件的时候,A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候,实际上是希望 B 组件重新渲染的,也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性,用来控制 A 组件是否读取 Storage 中的状态。在这里需要用到 state 参数,在 B 组件中通过 history.location.state 就可以拿到 state 值,保存它。要切换的组件作为子组件全屏渲染,父组件中正常储存页面状态。原创 2024-07-05 12:00:00 · 420 阅读 · 0 评论 -
vue---基本原理(二)
js中的对象是引用数据类型,当多个实例引用一个对象的时候,只要一个实例操作这个对象,其他实例中的数据也会发生变化。vue中,数据以函数返回值的形式定义,当复用组件时,会返回一个新的data,即每个组件有自己的私有数据空间,不会感染其他组件的操作。原创 2024-07-04 16:01:43 · 818 阅读 · 0 评论 -
vue---MVVM、MVC、MVP的区别
MVC、MVP和MVVM都是常见的软件架构设计模式。原创 2024-06-27 18:03:56 · 379 阅读 · 0 评论 -
vue---基本原理
同时,每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后,当依赖项的setter被调用的时候,会通知watcher重新计算,从而使它关联的组件得以更新。使用proxy的好处是可以完美的监听到任何方式的数据改变,缺点是兼容问题。vue的双向数据绑定采取的是数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各属性的setter和getter,在数据变动时,发布消息给订阅者,触发相应的监听回调。原创 2024-06-26 16:21:59 · 221 阅读 · 0 评论 -
跨域--浏览器与服务器通信过程中出现跨域问题
假设网站的地址是http://localhost:8088,那么代理服务器的三要素也是http://localhost:8088。配置完proxy,相当于webpack已经给启动了一个代理服务器,并且这个服务器的三要素和本地启动的网站的三要素是一致的。代理服务器默认是不会转发和相应请求的,必须要通过配置告诉代理服务器,哪些请求是需要他帮忙转发的。当代理服务器转发请求时,会把原路径之前的路径替换成target对应的值,替换之后,再转发请求。target后面的值,是告诉代理服务器,要转发到哪个目标服务器。原创 2024-02-09 10:36:25 · 1569 阅读 · 0 评论 -
可选链语法?.
允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。也可使用&&运算符进行判断,但&&书写起来比?与函数调用一起使用时,如果给定的函数不存在,则返回。) 的情况下不会引起错误,该表达式短路返回值是。链式运算符,不同之处在于,在引用为空 (原创 2024-02-08 15:02:26 · 440 阅读 · 0 评论 -
VUE3基础
watch对ref生成的响应式数据的深度监听需要用到deep属性,而watch默认对reactive生成的响应式数据进行深度监听,无需再使用deep属性。vue3中组合式API 组件内部的书型盒方法都是默认不暴露给父组件的,如果想让父组件访问子组件的属性和方法,要用defineExpose()向外暴露。监视响应式数据,同时newVal和oldVal的值也变成一个数组,数组中的值的顺序和监视的响应式数据是一致的。响应式底层API的变化,proxy数组下标的修改,对象动态添加属性;原创 2024-02-07 17:55:17 · 2036 阅读 · 0 评论 -
VUE---项目打包
当项目做完,要 执行 npm run build 打包最终的结果(最终的结果会打包进dist文件夹)。原创 2024-01-29 15:07:48 · 743 阅读 · 0 评论 -
VUE--VUEX
Vuex就是一个vue的状态(数据)管理工具,是vue项目实现大范围数据共享的技术方案。能够方便、高效的实现组件之间的数据共享。Vuex的好处(1)数据的存储一步到位,不需要层层传递(2)数据的流动十分清晰(3)存储在Vuex中的数据都是响应式的(数据更新后,使用数据的组件也会自动更新)适合存储到Vuex中的数据----需要共享的数据频繁、大范围的数据共享。(1)某个状态在很多个组件中使用(2)多个组件共同维护一份数据},},})// mutations里面放同步方法},},原创 2024-01-25 16:56:08 · 2268 阅读 · 0 评论 -
VUE -- 组件库
(饿了么前端团队开发,有vue2和vue3两种版本)原创 2024-01-23 14:13:04 · 474 阅读 · 0 评论 -
VUE -- ESLint
官方概念:ESLint是可组装的JavaScript和JSX检查工具。通俗理解:是一个用来约束团队成员风格的工具,是用来检查格式的。当通过@vue/cli脚手架工具安装项目后,默认将eslint相关的包安装并配置完成了。在项目中,我们将使用vue/eslint插件规定的默认规则进行检查。如需查看规则,可通过ESLint规则查看。原创 2024-01-23 12:17:45 · 749 阅读 · 0 评论 -
VUE--包管理器
本篇文章主要讲vue的包管理器:npm、yarn以及pnpm。原创 2024-01-23 10:57:37 · 559 阅读 · 0 评论 -
VUE---插槽
以达到复用组件且高度自定的效果。原创 2024-01-22 17:43:47 · 803 阅读 · 2 评论 -
VUE--路由
vue路由(vue-router)是vue.js官方给出的路由解决方案。它只能结合vue项目使用,能够轻松的管理SPA项目中组件的切换。vue路由官方网站。原创 2024-01-19 17:15:50 · 1079 阅读 · 0 评论 -
VUE---自定义指令
bind(ele,binding) {}, // 只执行一次;DOM渲染之前执行,里面可以进行样式操作。componentUpdated(ele,binding) {}, // 父子组件都更新后执行。bind(ele,binding) {}, // 只执行一次;componentUpdated(ele,binding) {}, // 父子组件都更新后执行。unbind(ele,binding) {}, // 指令解绑的时候执行。unbind(ele,binding) {}, // 指令解绑的时候执行。原创 2024-01-19 11:05:41 · 428 阅读 · 0 评论 -
VUE--- ref & refs
2、 通过this.$refs.xxx,获取目标组件,就可以调用组件中的方法。● ref & refs 查找的范围是当前组件内,更加精确稳定。● querySelector 查找的范围是整个页面。2、通过this.$refs.xxx,获取目标标签。1、给目标组件添加ref属性。1、目标标签添加ref属性。原创 2024-01-18 17:46:22 · 615 阅读 · 0 评论 -
VUE--组件通信(非父子)
一、非父子通信 --- event bus 事件总线作用:非父子组件之间进行步骤:1、创建一个都能访问到的事件总线(空vue实例)--- utils/EventBus.js二、非父子通信 --- provide & inject。原创 2024-01-18 17:37:39 · 695 阅读 · 0 评论 -
VUE--组件通信(父子)
因为组件的数据是独立的,无法直接访问其他组件的数据,想获取其他组件的数据,就需要用到组件通信。父级prop的数据更新,会向下流动,影响子组件。结果如下--点击子组件的按钮后,名称更新为“修改名称”,不符合要求的,控制台就会有错误提示,帮助开发者快速发现错误。● data的数据是自己的,可以。● prop的数据是外部的,● 作用:向子组件传递数据。作用:为组件的prop指定。props 和 $emit。通知父组件,对数据进行更新。原创 2024-01-18 10:50:58 · 779 阅读 · 0 评论 -
VUE---data
vue中一个组件的data选项必须是一个函数data() { return {} }。若写成一下样式,则无论点击哪个按钮,三个数字会统一修改。原创 2024-01-17 17:25:49 · 545 阅读 · 0 评论 -
VUE---组件的样式冲突scoped
才会有这个自定义属性, 才会被这个样式作用到,不会造成样式冲突。,因此很容易造成多个组件之间的样式冲突问题。2、css选择器都被添加。: 默认组件中的样式会作用到全局。[data-v-hash值]当前组件内的所有标签添加。data-v-hash值。:写在组件中的样式会。让样式只作用于当前组件。必须是当前组件的元素。原创 2024-01-17 17:14:20 · 527 阅读 · 0 评论 -
VUE工程化--vue组件注册
2、注册组件--注册成html标签(components中)1. 局部注册:只能在注册的组件内使用。2. 全局注册:所有组件内都能使用。原创 2024-01-17 16:58:28 · 492 阅读 · 0 评论 -
VUE工程化项目--vue组件化
tamplate>中。(3)中横线----abc-def.vue。(1)小驼峰----abcDef.vue。(2)大驼峰----AbcDef.vue。script中的data要写成。原创 2024-01-17 15:29:14 · 450 阅读 · 0 评论 -
VUE生命周期和生命周期四个阶段
此为点击了+的更新函数结果。Vue生命周期过程中,会。原创 2024-01-15 17:12:43 · 875 阅读 · 0 评论 -
VUE---watch监听器
对复杂类型深度监视,当对象的任一属性改变后,都可以侦听到。// 该方法会在数据变化时,触发执行。① 简单写法 → 简单类型数据,直接监视。页面刷新立刻执行一次handler方法。非对象模式也可以使用语法2的形式书写。,执行一些 业务逻辑 或 异步操作。(变化后的值, 变化前的值)(变化后的值, 变化前的值)// watch 完整写法。一些业务逻辑 或 异步操作。一些业务逻辑 或 异步操作。② 完整写法 → 添加额外。原创 2024-01-12 10:48:03 · 477 阅读 · 0 评论 -
VUE---计算属性computed
② 使用起来和普通属性一样使用 {{,再次使用直接读取缓存, 依赖项变化了,会。中,一个计算属性对应一个函数。此缓存特性,可提升性能。计算属性默认写法----计算属性默认写法----计算属性默认写法----计算属性默认写法----原创 2024-01-10 10:51:32 · 476 阅读 · 0 评论 -
v-bind 控制元素的样式
有这个类,否则没有这个类,适合于一个类名来回切换样式;→ 数组中所有的类,都会添加到盒子上,本质就是一个。语法::class="对象/数组"→ 键就是类名,值是布尔值。语法 :style = "样式对象"2、通过style行内样式进行控制。1、通过class类名进行控制。适用于某个具体属性的动态设置。,适合于批量添加或删除类。原创 2024-01-10 09:51:39 · 409 阅读 · 0 评论 -
VUE指令(二)
若不需要下标,可使用 v-for = "item in 数组",key是给列表添加的唯一标识,只能是唯一的字符串或数字。v-for = "(item--每一项, index--下标) in 数组" key = "唯一标识"指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。给表单元素使用, 实现双向数据绑定,可以快速获取或设置表单元素内容,:基于数据循环,多次渲染整个元素(数组、对象、数字等),vue会根据不同的指令,针对不同的标签实现不同的功能。原创 2024-01-09 16:45:29 · 584 阅读 · 0 评论 -
VUE指令(一)
基于条件判断,通过创建或移除元素节点来控制元素的显示和隐藏,v-if = "表达式(值 true 显示, false 隐藏)",适合于显示隐藏切换不频繁的场景;动态的设置html的标签属性(src,title,url等),v-bind:属性名="表达式",可简写为:属性名="表达式";动态的设置html的标签属性(src,title,url等),v-bind:属性名="表达式",可简写为:属性名="表达式";进行链式调用,v-else-if="表达式",v-else。- 只在鼠标中键事件触发处理函数;原创 2024-01-09 15:59:31 · 454 阅读 · 0 评论 -
VUE---安装开发者调试工具(Vue.js Devtools)
a、在极简插件页面选择Vue.js.devtools,选择获取。d、点击详细信息,勾选允许访问文件URL。c、在扩展中查看,有如下则表示安装成功。打开一个vue页面,在开发者工具中,有如下tab页签,即代表安装成功。下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件。2、edge浏览器:下载。→添加→插件详情允许访问文件。原创 2024-01-09 11:58:32 · 979 阅读 · 0 评论 -
VUE核心特性---响应式
(后续再更新详细介绍)原创 2024-01-09 11:40:45 · 338 阅读 · 0 评论 -
vue--插值表达式{{}}
表达式:是可以被求值的,JS引擎会将其计算出一个结果,渲染到页面中。c、不能在标签属性中使用{{}}利用表达式进行插值,渲染到页面中。a、使用的变量必须在data中存在。{{}}插值表达式是一种 Vue 的模板语法。b、表达式中不支持写语句。原创 2024-01-09 11:31:42 · 493 阅读 · 0 评论 -
创建vue实例,初始化渲染步骤
① el 指定挂载点,选择器指定在哪个盒子展示数据。4、指定配置项 el data => 渲染数据。html上的内容,可根据data数据的变化而变化。3、创建 Vue 实例 new Vue()② data 提供数据。2、引包 (官网) -原创 2024-01-09 11:19:31 · 455 阅读 · 0 评论