vue
文章平均质量分 51
前端小99
心有猛虎 细嗅蔷薇
展开
-
你真的理解Vue3中Reactive吗?
Vue 3 的 Composition API 带来了强大的reactive函数,它允许你在 Vue 应用程序中创建响应式数据,从而使数据的变化能够自动触发 UI 的更新。虽然reactive提供了强大的功能,但在使用它时,你需要小心一些事项和最佳实践,以确保你的代码高效、可维护和不容易出错。在本文中,我们将深入探讨 Vue 3 的reactive,并提供一些注意事项和解决方案,以帮助你更好地使用它。原创 2024-08-20 16:18:29 · 813 阅读 · 0 评论 -
$nextTick和setTimeout区别(宏任务微任务)
依次循环,直到所有的异步任务完成为止。promise的then方法的函数会被推入到 microtasks(微任务) 队列中(Promise本身代码是同步执行的),而setTimeout函数会被推入到 macrotasks(宏任务) 任务队列中,在每一次事件循环中 macrotasks(宏任务) 只会提取一个执行,而 microtasks(微任务) 会一直提取,直到 microtasks(微任务)队列为空为止。但是异步任务队列又分为: macrotasks(宏任务) 和 microtasks(微任务)。原创 2023-09-08 10:49:42 · 1785 阅读 · 0 评论 -
vue高频面试题
分离视图(View)和模型(Model),降低代码耦合,提⾼视图或者逻辑的重⽤性: ⽐如视图(View)可以独⽴于Model变化和修改,⼀个ViewModel可以绑定不同的"View"上,当View变化的时候Model不可以不变,当Model变化的时候View也可以不变。然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)原创 2023-09-08 10:46:33 · 1319 阅读 · 0 评论 -
在Vue官方文档中指出,$forceUpdate具有强制刷新的作用。
解决数据传递组件数据无法展示,强制刷新处理 会上树成功。原创 2023-02-22 12:55:54 · 303 阅读 · 0 评论 -
vue解决数组对象新增键值队以后修改数据数据丢失的问题
这里新增了两个键值对象 checkInfo: false showLog: false。当我想修改showLog的属性值时出来了数据发生了改变了但页未发生改变的情况。this.$set( target, key, value) 有三个参数。target:要更改的数据源(可以是对象或者数组)使用this.$set 进行捕获 页面数据上树。key:要更改的具体数据。value :重新赋的值。原创 2023-02-15 19:20:14 · 512 阅读 · 0 评论 -
vue登录持久化获取登录状态密码放入cookie,设置过期时间加密
①若勾选了记住密码;则需要设置cookie,将复选框状态与加密后账号密码(安全起见,做了加密)设置cookie过期时间并存入cookie中,页面加载的时候判断一下是否有cookie值存在,若存在则获取对应的cookie赋值给用户名输入框、密码输入框以及记住密码复选框的状态。②若未勾选,则需要清除cookie中存放的账号密码以及复选框状态的数据,并且将cookie过期时间设为当前时间之前的时间;特别要注意的部分就是cookie过期时间以及获取cookie的时候复选框的状态,这两个容易出错。原创 2022-12-01 16:50:33 · 1899 阅读 · 0 评论 -
vue为什么要使用template
但在使用v-show时要注意,不能使用template,因为v-show是设置显示与隐藏,而template是没有实际东西的dom,所以v-show与template联合使用将失效。lse-if与v-else时候,我们可以使用template,来代替div。在使用v-if与v-e。...原创 2022-07-21 11:08:30 · 545 阅读 · 0 评论 -
路由持久化权限校验
app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>router.js 设置权限 //民事立案第一步 { pa...原创 2021-12-22 11:33:37 · 271 阅读 · 0 评论 -
Vue中mixin混入
混入我们先来看看vue官方是怎么介绍的混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。官方文档说的很详细,通俗易懂的话来说一个.vue文件由template,script,style组成,混入的方法可以把mixin这个对象和.vue文件的script里面的内容“混入”(mixin对象的结构和.vue的script里面的结构一样),既此组件既可以调用组件内原创 2021-12-15 10:11:37 · 1899 阅读 · 0 评论 -
遮罩层出现后不能滚动 添加事件@touchmove.prevent 移动端中的坑和 vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
<div class="maskshow" @click="hidden_video" @touchmove.prevent></div>.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改变js默认的事件机制,默认是..原创 2021-05-19 12:19:29 · 7796 阅读 · 1 评论 -
总结vue2.0与vue3.0的区别,让你快速上手
1:vue3.0和2.0的区别2.0数据双向绑定方面Vue2.0使用Object.defineProperty原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发生改变发出通知// 数据let data = { title: '', // 备份数据 _data: {}}// 定义特性Object.defineProperty(data, 'title', { // 定义特性属性或者特性方法 // 取原创 2021-04-21 11:03:09 · 31539 阅读 · 14 评论 -
vue-cli 3中dart-sass替换node-sass
Facebook 重构:抛弃 Sass / Less ,迎接原子化 CSS 时代!使用dart-sass代替node-sass,不管你是否使用dart-sass,建议你使用::v-deep的写法,它不仅兼容了 css 的>>>写法,还兼容了 sass /deep/的写法而且它还是 vue 3.0 中指定的写法。而且原本 /deep/ 的写法也本身就被 Chrome 所废弃使用方法为什么要替换?node-sass仓库在墙外, 且新特性都会先在dart-sass实现怎么替换?原创 2021-03-23 16:21:08 · 2774 阅读 · 0 评论 -
Font-AweSome小图标在Vue中的使用
Font-AweSome在Vue项目中的使用看到网上许多的无法使用了,特地来更新一下,图标代码直接在网站里复制更具体的使用官网和其他文章很详细,这里就不再讲Font AweSome中文网.官网安装项目依赖1. npm npm i font-awesome -S2. yarnyarn add font-awesome -S在main.js中引入import 'font-awesome/css/font-awesome.min.css'Vue中使用..原创 2021-01-29 10:52:18 · 383 阅读 · 0 评论 -
移动端手写tab栏
Demo使用Vue.js实现javascriptnew Vue({el: "#app",data: {//可以手写 可以掉后台接口 二选一eleFileList: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄', '守望先锋'],activeName: '', //选中样式}, //获取接口中的内容mounted() { if (Array.isArray(this.eleFileList) &am.原创 2021-01-05 17:44:12 · 481 阅读 · 0 评论 -
vue项目如何刷新当前页面
1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面,页面是不进行刷新的2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好3.解决方法provide / inject组合作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。App.vue:声明reloa..转载 2020-12-25 10:43:48 · 970 阅读 · 0 评论 -
vuex重置所有state
在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的vuex,让其变为初始状态,那么,就涉及到了多种方法:1、页面刷新:window.location.reload()这个方法通过路由判断优化或是逻辑优化,始终页面时重新加载,就会导致用户体验很差,对浏览器来说也是一种不必要的负担,所以我尝试之后就放弃了。2、写一个重置的方法然后调取actions.resetVuex = function() {store.commit(stat..原创 2020-11-23 11:17:04 · 2621 阅读 · 0 评论 -
vue3.0总结
vue3.0beta 版本已经发布有一阵子了,是时候上手体验一波了~注意,本文所有演示都是基于 vue3.0 beta 版本,不保证后续正式版 api 不改动。等官方文档出来后,以官网为准。环境搭建直接使用脚手架,如果本地没有安装的可以执行脚手架安装命令:npm install -g @vue/cli如果本地安装过的,可以尝试更新一下:npm update -g @vue/cli测试 vue-cli 版本:vue -V@vue/cli 4.4.1接下...原创 2020-10-26 14:13:13 · 611 阅读 · 4 评论 -
vue3.0中setup使用
一、setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的原创 2020-10-26 11:07:39 · 65113 阅读 · 37 评论 -
vue传递路由的三种方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<li v-for="article in articles"@click="getDescribe(article.id)">methods:方案一: getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}.原创 2020-09-23 13:39:39 · 344 阅读 · 0 评论 -
跨域请求代理
解决问题:在本地了开发中,使用线上的数据。url的前三个部分的改变,都会产生跨域的问题,所以webpack-dev-server提供了一些配置,可以解决跨域请求的问题在webpack.config.js中,通过devServer属性来定义webpack-dev-server的配置host 定义域名post 定义端口号open 是否打开浏览器proxy: 定义请求代理,是一个对象key 表示请求地址value 是一个对象,是对该请求的代理配置target 表示目标地址p原创 2020-09-22 23:01:01 · 761 阅读 · 0 评论 -
vue自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name<template> <div class="hello"> <div v-test='name'></div> </div></template><script>export defau原创 2020-09-22 22:28:17 · 100 阅读 · 0 评论 -
vue中v-solt插槽的使用
具名插槽slot与v-solt插槽使用插槽分成两步。第一步 在组件元素内。为其它元素设置插槽名称。通过slot属性设置。第二步 在组件模板中,通过slot组件,使用这些元素。通过name属性指令插槽名称如果没有设置name属性,默认会使用剩余的元素。使用插槽的时候,默认会引入slot属性所在的元素,不想引入该元素,我们可以使用template模板元素。使用template模板元素的时候,在新版本中,建议用v-slot指令代替slot属性此时为插槽定义名称的语法是冒号语原创 2020-09-22 22:18:43 · 1219 阅读 · 0 评论 -
vue组件通信
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结。props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v-model provide和inject $parent和$children vuex1.props和$emit 父组件向子组件传 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的.父组件向子组件通信分成两步第一步 为子组件..原创 2020-09-22 00:21:13 · 136 阅读 · 0 评论 -
使用axios
axios不是专门为vue设计的,可以应用在各个领域中,所以axios不是vue家族的插件,不能用Vue.use方法来安装使用axiosaxios实现了promise规范:将异步变成同步是指将异步操作的写法,变成同步的写法。使用方式跟jquery类似.get(url, config) 发送get请求的方法url 请求地址config 配置对象.post(url, data, config) 发送post请求的方法url 请求地址data 携带的数据con.原创 2020-09-19 11:33:54 · 212 阅读 · 0 评论 -
vuex中计算属性来代理state数据
<div id="app"> <!-- 这种可以绑定,但是破坏了vuex模型,没有通过mutatiuons --> <!-- <input type="text" v-model="$store.state.msg"> --> <!-- 使用代理 --> <input type="text" v-model="dealMsg"> <home></home> </div>.原创 2020-09-17 23:02:09 · 608 阅读 · 0 评论 -
一篇文章理解vuex原理
vuex作用:组件的通信成本很高,所以为了简化组件间通信(共享数据),vue提供了vuex插件。是基于flux思想实现的。flux是由react团队提供的数据通信架构思想。解决网状通信的问题。实现了数据单向流动。由四部分组成action 消息对象dispatcher 用来捕获消息对象,并处理数据store 存储数据view 组件视图flux通信流程一个组件或者用户发布一个action消息消息被dispatcher捕获,并根据消息类型,处理数据并将新的数据传原创 2020-09-17 22:19:59 · 531 阅读 · 0 评论 -
vue方法总结
一:什么是mvvmmvvm特点vue是典型的mvvmm模式框架M:模型层v:视图层vm:视图模型层mvvm特点:数据双向绑定 一个方向是数据由模型进入视图 通过数据绑定实现的一个方向是数据由视图进入模型 通过事件监听实现的vue实例化对象在vue中,实现了MVVM模式,M:数据对象V:视图模板VM:vue实例化对象通过new Vue方式创建vue实例化对象通过el属性绑定视图模板css选择器...原创 2020-09-17 17:03:20 · 2197 阅读 · 0 评论 -
vue组件通信 vue bus方面的总结
vue bus通常使用在兄弟与兄弟组件之间然后在组件中,可以使用emit on, $off分别来分发,监听,取消监听事件 这里的$off可以取消多次使用$bus监听的事件使用用法 1:引入vue import Vue from 'vue' 2:在main.js中引入vue bus import Bus from '***/**...原创 2020-01-13 15:48:53 · 991 阅读 · 0 评论 -
vue中的ref和$refs的使用
ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。ref 有三种用法:1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。3、如何利用 v-for 和 ref 获...原创 2020-01-13 15:30:26 · 746 阅读 · 0 评论 -
slot插槽
<slot>为vue的内置标签:用于给组件定义一个插槽,在这个插槽里传入内容(可以是模板代码或者组件),达到动态改变组件的目的。什么是插槽?插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件控制,<sl...原创 2019-11-05 17:47:59 · 1099 阅读 · 0 评论 -
Vue-cli的安装步骤详细版本
条件:node在4.以上,npm在3以上安装步骤:1、cmd打开命令行窗口2、输入cnpm install vue-cli -g,然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)3、安装结束后输入vue 如果显示版本号继续下一步操作4、运行vue init webpack demo(注:项目名称)回车5、显示Project nanme 目录名 回车 proj...原创 2018-10-10 13:55:29 · 643 阅读 · 1 评论 -
Vue2 轮播图组件 slide组件
https://www.cnblogs.com/gmajip/archive/2018/05/30/9113824.html转载 2018-06-01 10:08:01 · 1509 阅读 · 0 评论