![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
(σ゚∀゚)σ..:*☆哎哟不错哦
前端
展开
-
vue3 setup 怎么获取vue实例上的全局变量
在vue2中,我们定义在vue实例上的 vue.property.变量 ,在组件中都可以通过 this.变量名得到,那么到了vue3中,在setup中要获取全局变量就需要通过vue提供的方法了挂载全局变量const app=createApp()app.config.globalProperties.变量名组件 setup 获取变量getCurrentInstance().appContext.config.globalProperties.变量名打印getCurrentInstance如原创 2022-03-23 22:11:27 · 3393 阅读 · 0 评论 -
vue3 渲染函数
能解决的问题有时候使用模板编写某些组件的时候会特别麻烦,使用渲染函数反而可以很简单的解决什么是渲染函数就是使用vue内置的一些API写一些JS代码,就这么简单渲染函数编写方式及封装成组件(个人还是觉得封装成组件好用)import { defineComponent, h } from 'vue';export default defineComponent({ name: 'Demo', props: { name: { type: Str原创 2022-03-21 22:41:03 · 4130 阅读 · 0 评论 -
vue3 自定义指令 directive
目的:在vue项目中编写一些符合自己业务的指令分类:全局指令,全部组件都能使用在main.js中挂载到app上app.directive(‘focus’, { mounted(el) { el.focus() }})局部指令在组件内部使用directives:{}指令的生命周期created在绑定元素的父组件挂载之前beforeMounted在绑定元素的父组件挂载之后mounted在绑定元素的父组件vnode更新之前beforeUpdate在包原创 2022-03-20 22:12:51 · 2032 阅读 · 0 评论 -
vue3中在使用setup的情况下适合不适合使用mixin
答案:不推荐使用原因:mixin这个函数是非常霸道的,局部使用还好,如果是全局使用,在项目比较大的时候,个人觉得不是很好,在vue2的时候,因为没有组合式API这一说法,所以mixin对开发人员来说能解决好多事情,但是到了vue3,这种方式已经不推荐使用了,因为我们在vue3中,JS都是在setup里面执行的,这个时候如果我们在外面写一些公共的JS文件,然后暴露出来,在需要使用到的组件里面按需引入,这种比mixin觉得更好仅记录平常学习...原创 2022-03-20 20:55:21 · 4156 阅读 · 0 评论 -
vue3 中setup的执行时机及在生命周期中的位置
结果:1 setup是在props解析之后,beforeCreate执行之前进行调用2 如果在setup中和外部同时调用一个生命周期函数,setup的生命周期函数 在外部的生命周期函数之前执行<template> <div>setup的执行时机</div></template><script>import { onMounted } from "@vue/runtime-core";export default {原创 2022-03-20 20:47:52 · 4446 阅读 · 0 评论 -
vue3 在组件上使用v-model
首先要明白的是 v-model在input 、checked 、 radio 、select等标签上表示的意思v-model 在input中表示 value 和input事件 ,如果我们把他么拆分开 ,那么就能实现组件的v-model很简单 ,总共算分为三步吧第一步,在组件内部的input的标签上 使用:value绑定props中的值,这一点要明白 绑定的是父组件传过来的值HTML<input type="text" :value="toValue" @input="i原创 2022-03-17 22:12:54 · 4485 阅读 · 0 评论 -
vue3 slot 插槽
作用:用于组件之中,用于父组件在调用子组件分发在子组件中插入的内容,可以是字符串、HTML模板甚至是组件规则:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的在子组件的编写方式如下<slot></slot>v-slot 缩写 #具名插槽:就想我们坐火车拿着车票对号入座一样,在子组件中首先给slot的一个名字,就像提前给火车上的作为编好号,父组件在进行内容分发时,把内容对号入座就行<slot name="1"><原创 2022-03-16 22:13:20 · 516 阅读 · 0 评论 -
vue3 class与style的绑定
calss使用v-bind:calss进行元素类的绑定,简写为:calss,其中类的绑定方式有两种:第一 以对象的形式进行绑定第二 以数组的形式进行绑定<template> <div :class="{active:isActive}">对象形式绑定class</div> <div :class="[error]">数组形式绑定class</div></template><script>原创 2022-03-15 21:28:08 · 812 阅读 · 0 评论 -
vue3组件之间数据传递
1. 父传子遵循vue的单向数据流,就是父组件能往子组件传递数据,但是子组件不能回传,父组件传递子组件数据的方式 就是在组件标签上使用属性绑定的方式进行传递,子组件中定义props对象,定义需要接受的数据,在setup中的props定义父传子类型父组件<template> <div>parent</div> <Child></Child></template><script>import Chi原创 2022-03-14 22:34:51 · 8424 阅读 · 0 评论 -
Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity
报错内容翻译为 从’ setup() ‘的根范围的’ props '中获取一个值将导致该值失去反应性这样翻译下来应该就能明白什么意思了,就是我们从props中获取父组件传递数据的时候,不管父组件传递的是不是响应式的数据,在接收的时候要把数据转换为响应式的,具体原因不知道啊,可能这就是规范吧那么如果我们要把props中的数据转换成响应式的数据有两种方法第一种 toRef 转换单个属性第二种 toRefs 转换所有属性...原创 2022-03-14 21:47:28 · 18228 阅读 · 0 评论 -
vue3 setup computed 计算属性
简介:computed 计算属性 可以对当前实例上的数据进行计算,并缓存下来,只有当依赖的响应式数据改变时,才重进计算,否则每次取到的计算属性数据都是从缓存中取到的(>1)计算属性还是和vue2一样,没啥特别大的改变个人理解:计算属性,说白了也是实例数据的一种,只是这个属性依赖于当前实例的其他数据,并且居右缓存功能,就想我们在data中定义一个name并且初始化的时候给一个值,相对于data中的初始化数据,只是一个依赖于其他的响应式数据进行改变的data数据重点:计算属性不能对依赖数据进行赋值原创 2022-03-13 22:38:42 · 5563 阅读 · 0 评论 -
Unexpected side effect in computed function vue/no-side-effects-in-computed-properties
vue3计算属性明确规定 只能依赖某个值得到某个值,不能对依赖的值进行赋值,修改,不能在计算属性中操作DOM,如果出现标题中的错误,看一下是否出现上述情况原创 2022-03-13 22:14:43 · 3764 阅读 · 0 评论 -
vue3中的ref toRef toRefs unRef 等等
refvue官方文档 接受一个内部值并返回一个响应式且可变的ref对象,该对象仅有一个.value property,指向该内部值理解:ref把一个JS基本类型数据变为一个响应式的对象,并且如果我们访问该值,只能通过.value形式,比如可以看出使用ref定义的对象已经变成响应式的对象unref把ref定义的响应式对象转变为基本类型的数据toRefvue官方文档 可以用来为源响应式对象上的某个property新创建一个ref,然后,ref可以被传递,他会保持对源property的响应式链接原创 2022-03-11 14:27:31 · 2742 阅读 · 0 评论 -
vue3中的watch和watchEffect
watch结论1:watch需要侦听特定的数据源,可以是一个也可以是多个,在页面第一次加载时不运行函数,只有当监听的数据源改变时,才会运行此函数结论2watch监听一个对象的属性,首先监听的值要以函数返回值的形式进行传递监听,不同于vue2形式的监听,如下为对象属性5秒后改变,监听函数打印watchEffect结论1vue官方文档 为了根据响应式状态自动应用和重新应用副作用,我们可以使用 watchEffect 函数。它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该原创 2022-03-09 23:14:37 · 5342 阅读 · 0 评论 -
vue+element table 为每个单元格增加点击事件
在e-table上增加@cell-click事件@cell-click="handle"handle(row,column,event,cell){ //row:该行的信息 //column:当前点击列的信息 //event:获取当前元素 //cell}原创 2021-04-01 09:34:22 · 1252 阅读 · 0 评论 -
vue跳转相同路由时,刷新当前路由
场景:重复点击某一个导航,跳转同一个路由,只会跳转一次,不会实现路由刷新解决办法:在路由跳转的时候加上一个时间戳this.$route.push({ name:"/login", query:{ t:Date.now();}})然后再router-view中加上:key="$router.query.t"<router-view :key="$router.query.t" />这样根据key值可实现重复跳转一个路由实现路由刷新的效果。...原创 2021-03-31 22:59:35 · 1014 阅读 · 0 评论 -
vue路由重写push方法解决路由跳转错误问题
场景:当在vue项目中,路由跳转需要跳转到相同的路由,如果是使用this.$route.push方法,项目会报错,这时我们就要重写路由的push方法解决问题:相同路由跳转时,项目报错添加:相同路由跳转时,触发watch (仅限string方式传参,形如"view?id=5")const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { if(typeof(location)==原创 2021-03-31 22:52:28 · 713 阅读 · 0 评论 -
vue自定义组件__vueClickOutside__的理解
可以点开看看这个,个人感觉不错添加链接描述export default { //绑定 bind (el, binding, vnode) { function documentHandler (e) { if (el.contains(e.target)) { return false; } if (binding.expression) {原创 2021-03-30 23:19:58 · 498 阅读 · 0 评论 -
VUE路由那点事
什么是vue路由vue路由无非就是原创 2021-03-30 22:59:16 · 61 阅读 · 0 评论 -
VUE 学习笔记
vue基础vue简介:vue是一种渐进式的前端框架vue安装:可以通过npm安装和直接引入JS文件原创 2021-03-30 22:57:52 · 118 阅读 · 0 评论 -
对vue中自定义指令directive的理解
directive指令是为了满足vue中内置指令不能满足需求的情况下,开发者需要自定义一些指令来满足业务需要。自定义指令分为全局自定义指令和局部自定义指令。全局自定义指令如下:Vue.directive("myDirective",{ bind:functiion(el,binding,vnode){ /** el:自定义指令绑定的元素 binding:使用自定义指令绑定的属性和值,binding时一个对象,属性如下: name:指令名,不包括v-前缀,例如:v-demo原创 2021-03-30 22:55:10 · 1205 阅读 · 0 评论 -
对vue中keep-alive的理解
keepAlive作用:对组件进行缓存,避免每次使用组件时都执行init方法,对组件进行持久化,使组件状态维护不变,在下次展示时,也不用再次init。实例:<keep-alive> <component/></keep-alive>上面提交keep-alive是使组件保持持久化,也就是说,再次使用组件时,组件不再重新走生命周期函数,但是在平时的开发中,经常用到组件的生命周期函数进行一些业务逻辑的处理和数据的渲染,所以vue在这里给提供了两个hook,1.ac原创 2021-03-29 23:09:42 · 266 阅读 · 0 评论