Vue
关注
分享
扫一扫
文章平均质量分 82
若年封尘
这个作者很懒，什么都没留下…
展开
-
「手把手教学」Vue3 defineEmits：从父子通信到组件封装的实战全流程
在 Vue 3 中，defineEmits 是一个用于定义组件触发自定义事件的宏。它主要用于在单文件组件（SFC）的语法糖中声明组件可以通过 emit 触发的自定义事件，帮助我们更好地管理组件间的通信。替代了 Vue 2 的 emits 选项，更符合 Composition API 风格。原创 2025-02-15 22:35:45 · 596 阅读 · 0 评论 -
2023大厂高频面试题之Vue篇(2)
虚拟DOM的理解vue 和 react 里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样?为何Vue采用异步渲染Vue.nextTick()组件中的 data为什么是一个函数为什么new Vue这个里面的data可以放一个对象？vue如何检测数组变化ajax请求放在哪个生命周期中Vue父子组件生命周期调用顺序Vue组件为什么只能有一个根元素？vue 的keep-alive的作用是什么？怎么实现的？如何刷新的?何时需要使用beforeDestroy原创 2023-04-25 09:55:44 · 583 阅读 · 0 评论 -
Vue报错解决[Vue warn]: Error in render: “TypeError: Cannot read property ‘state‘ of undefined“
这个错误提示通常出现在 Vue 组件中，它尝试读取 Vuex store 的 state 对象，但是该对象没有被定义。这假设 store.js 文件位于 src/store 目录中。如果store.js 文件位于其他目录中，请相应地更改导入路径。如果 Vuex store 中没有定义尝试使用的状态，则会出现这个错误。反复确认代码后，发现并没有上述问题。这里的 myState 是Vuex store 中定义的状态名称。如果组件中使用其他名称，请相应地更改代码。3.Vuex store 中没有定义所需的状态。原创 2023-04-24 19:31:12 · 3902 阅读 · 0 评论 -
2023大厂高频面试题之Vue篇
Vue的优点及缺点react框架是mvvm框架还是mvc框架谈谈对MVVM原理的理解Vue响应式数据的原理Vue 双向数据绑定原理computed、watch和methodsVue的生命周期Vue父子组件生命周期Vue的created中如何获取到dom元素v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？Vue中的diff算法为什么引入diffVue能不能在编译时构建而不是运行时使用虚原创 2022-06-24 20:34:14 · 941 阅读 · 1 评论 -
万字长文详解Vue3的常用新特性
文章目录1.Vue3简介2.Vue3带来了什么1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性一、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建二、常用 Composition API1.拉开序幕的setup2.ref函数3.reactive函数4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式5.reactive对比ref6.setup的两个注意点7.计算属性与监视1.computed函数2.watch函数3.watchEffect函数8原创 2021-09-20 12:57:55 · 383 阅读 · 0 评论 -
长文详解Vue路由的使用
文章目录路由1.基本使用2.几个注意点3.多级路由（多级路由）4.路由的query参数5.命名路由6.路由的params参数7.路由的props配置8.``````的replace属性9.编程式路由导航10.缓存路由组件11.两个新的生命周期钩子12.路由守卫13.路由器的两种工作模式路由理解： 一个路由（route）就是一组映射关系（key - value），key 为路径, value 可能是 function 或 component；多个路由需要路由器（router）进行管理。路由分类：后端原创 2021-09-07 22:57:42 · 1384 阅读 · 3 评论 -
Vue插槽如何使用？
文章目录插槽默认插槽：插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽默认插槽：父组件中： <Zujianming> <div>html结构1</div> </Zujianming>子组件中： <template> <原创 2021-09-05 15:58:08 · 196 阅读 · 0 评论 -
长文详解Vuex的使用
vuexvuex：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。什么时候用？多个组件需要共享数据时。1.多个组件依赖于同一状态2.来自不同组件的行为需要变更同一状态...原创 2021-09-05 15:48:31 · 389 阅读 · 0 评论 -
Vue组件间的通信(全局事件总线和消息订阅与发布)
全局事件总线（GlobalEventBus）一种组件间通信的方式，适用于任意组件间通信。安装全局事件总线：(main.js)new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事件总线：接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。methods(){ demo(d原创 2021-09-02 16:05:08 · 495 阅读 · 0 评论 -
props配置项和自定义事件实现父子组件间的数据传递
文章目录组件的自定义事件props配置项组件间传递数据父给子传(简单)子给父传(复杂)方式1：通过父组件给子组件传递函数类型的props实现子给父传递数据方式2：自定义事件组件的自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件：第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:at原创 2021-08-31 16:42:43 · 674 阅读 · 0 评论 -
Vue进阶总结，前端小白必知必会
关于不同版本的Vue：1.vue.js与vue.runtime.xxx.js的区别：(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。...原创 2021-08-31 16:40:31 · 290 阅读 · 0 评论 -
初学者一定要了解的Vue组件，小白必看！
模块：向外提供特定功能的js程序,一般就是一个js文件为什么:js文件很多很复杂作用:复用js,简化js的编写,提高js运行效率组件：用来实现局部(特定)功能效果的代码集合(html/css/js/image…)为什么:一个界面的功能很复杂作用:复用编码,简化项目编码,提高运行效率模块化：当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。组件化：当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用。...原创 2021-08-22 16:32:19 · 700 阅读 · 4 评论 -
Vue的过滤器和生命周期
过滤器对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”备注：1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据, 是产生新的对应的数据...原创 2021-08-20 12:49:34 · 640 阅读 · 1 评论 -
Vue监视数据的原理
列表过滤列表过滤用watch或computed实现在输入框中输入关键字，从而使得下方列表留下包含关键字的几项，如下图：实现代码：<div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key="index"> {原创 2021-08-17 16:59:04 · 247 阅读 · 0 评论 -
Vue条件渲染和列表渲染
文章目录条件渲染v-if，v-show列表渲染v-forkey的内部原理条件渲染v-if，v-show1.v-if写法：(1).v-if=“表达式”(2).v-else-if=“表达式”(3).v-else=“表达式”适用于：切换频率较低的场景；不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”，即中间不能插入其它东西。2.v-show写法：v-show=“表达式”适用于：切换频率较高的场景；不展示的DOM元素未被移除原创 2021-08-16 20:07:02 · 327 阅读 · 1 评论 -
一文解决Vue中的计算属性和监听属性
计算属性计算属性：要用的属性不存在，要通过已有属性计算得来。原理：底层借助了Objcet.defineproperty方法提供的getter和setter。1.插值语法实现<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model=原创 2021-08-14 22:29:44 · 1243 阅读 · 1 评论 -
Vue基础总结，初学者必知必会
模板语法数据绑定原创 2021-08-12 19:08:33 · 254 阅读 · 0 评论 -
彻底整明白Vue属性和指令
Vue实例的作用范围：el选项命中的元素及其内部的后代元素。可以选择其他的选择器，但建议使用ID选择器。原创 2021-04-19 12:27:17 · 1964 阅读 · 3 评论 -
vue实现轮播图(每隔两秒自动翻页、翻到末页自动返回首页、点击按钮左右翻页)
很久之前写过一篇用js按钮实现切换图片效果，现在用vue实现一个轮播图，可以实现点击按钮左右翻页、每隔两秒自动翻页、翻到最后一页自动返回第一页。实现结果如下：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>图片切换</title> <link rel="stylesheet" href="./css/inde原创 2021-04-19 01:05:13 · 7307 阅读 · 5 评论