Vue杂谈
Vue常用解析
陈十一i
言念君子,温其如玉
展开
-
解决VScode没有代码提示问题
今天在使用vscode的时候,代码提示突然不管用了,试了好多网上的方法,都不行,最后发现是插件的问题。我卸载此插件后,问题得到解决,希望能帮助到你。原创 2023-02-21 08:50:09 · 2887 阅读 · 3 评论 -
如何去掉VUE路由地址中的#号
如何去掉VUE路由地址中的#号原创 2022-06-15 08:42:39 · 2388 阅读 · 0 评论 -
VUE项目中如何封装axios请求
首先下载 axios npm i axios在根目录下 创建 utils 目录// 导入axiosimport axios from 'axios'const request = axios.create({ baseURL: 'http:xxxxxxxxxxxxxxxxxxxxxxxxx', // 协议地址 timeout: 5000})// 添加请求拦截器request.interceptors.request.use(function...原创 2022-05-18 16:11:54 · 465 阅读 · 0 评论 -
如何在vue和element-ui中的table表格实现编辑
效果图如下注意我是用的 dialog 弹窗 写的,大家C过去 记得写控制显示隐藏的visible 属性<template> <el-dialog title="发送邮件" :visible="transmitshow" width="60%" :before-close="handleClose"> <el-button icon="el-icon-plus" circle type="primary"></el-button>.原创 2022-05-09 19:11:39 · 1336 阅读 · 0 评论 -
vue中页面跳转白屏的解决方式,同一路由地址,参数不同跳转白屏的解决方式
路由地址的变化例如下面:http://localhost:8080/#/category/1013001-->地址相同,只有参数发生变化http://localhost:8080/#/category/1013304同一个地址携带不同的参数跳转内容并没有更新原因:地址的变化了,其实本路由对应的path并没有变化(还是#/category),是参数变化了。此时当前路径匹配的组件会被直接复用,这个组件在地址切换的过程中,并没有重新销毁生成,或导致页面白屏的情况出现,也就说,set原创 2022-04-05 11:45:53 · 5495 阅读 · 2 评论 -
Vue中如何实现Excle表的批量导入
首先下载 npm ixlsx创建一个excle的vue文件注册为全局组件<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick" /> <div cla...原创 2022-04-04 18:52:48 · 1757 阅读 · 1 评论 -
vue中v-if和v-show的相同点和不同点
相同点:都能够实现控制元素的隐藏与显示不同点:1.实现的本质方法不同v-show是通过设置css中的display属性来实现的v-if是通过动态的删除或添加DOM书中的及节点来实现的2.编译的区别v-show就是在控制cssv-if有一个局部编译/卸载的过程3.性能比较v-show只编译一次,然后就是在控制display的属性了, v-if是在不停的销毁在创建,相比较之下...原创 2022-04-01 00:06:37 · 273 阅读 · 2 评论 -
vue中data数据为什么定义成函数形式
1,data组件都是vue的实例2,组件共享data属性,当data的值是用一个引用类型的时候,改变其中的值会影响到其他的3,组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件,都会返回一份新的data,类似于给没个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。如果单纯的写成对象形式,就会使所有组件实例共用了一份data数据,会造成一个改变全部跟着改变的结果...原创 2022-03-31 23:57:19 · 2361 阅读 · 0 评论 -
vue中数据双向绑定的实现原理是什么
首先vue是一个mvvm模型框架概念:双向绑定是vue的一个核心功能,所谓双向绑定就是当试图发生改变的时候传递给VM(ViewModel ),让数据得到更新,当数据发生改变的时候传给VM(ViewModel ),使得视图发生变化vue怎么做到的呢?observer(观察者),劫持监听所有属性,什么意思呢?vue是通过这种模式进行数据劫持的,这种模式是发布者-订阅者模式 订阅者:就像我们生活中在淘宝京东买东西一样,我们是消费者就相当这种模式中的订阅者一样 发布者:你想买的书没货原创 2022-03-31 21:37:53 · 3666 阅读 · 0 评论 -
vue中的data数据为什么要写成函数
对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题举例说明: // 1.对象方式(所有重用的实例中的data均为同一个对象) var data = { num: 1 } var vm1 = { data: data } var vm2 = { data: data原创 2022-03-31 21:28:35 · 303 阅读 · 0 评论 -
$nextTick()函数
概念:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,dom渲染完毕后,自动执行该函数应用场景:showimg(row) { this.url = row.staffPhoto this.dialogVisible = true this.$nextTick(() => { ...原创 2022-03-31 00:25:58 · 1765 阅读 · 0 评论 -
vuex配置项 持久化数据保存插件
下载 : npm i vuex-persistedstate配置在store/index.js中,使用插件来做持久化。import createPersistedstate from 'vuex-persistedstate'export default createStore({ modules: { user, cart, category },plugins: [createPersistedstate({key: 'client-pc-store', ...原创 2022-03-28 10:50:22 · 125 阅读 · 0 评论 -
Vue2中的生命周期函数超详细图文解析(易懂)
首先上图:Vue的生命周期函数分为三个阶段分别是:创建阶段创建阶段对应的四个生命周期函数分别为:beforeCreate( 创建前 )在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。created ( 创建后 )实例已经创建完成之后被调用,在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完.原创 2022-03-28 10:27:20 · 3665 阅读 · 0 评论 -
Vue中定义一个时间格式过滤器
在 main.js 中// // 时间戳过滤器Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr) function timeAdd0(str) { if (str < 10) { str = '0' + str } return str } var y = time.getFullYear() var m = time.getMonth() + 1...原创 2022-03-27 16:57:47 · 209 阅读 · 0 评论 -
Vue3中如何声明 toRefs()结构响应式数据,解构数据后还是响应式数据
再 setup 中let str = reactive({ names: '张三', salary: 26000, id: 9 }) //解构数据// let { salary } = str // 这种解构赋值会使数据变成不能响应的数据需要导入import { toRefs} from 'vue' // 使用toRefs(响应式数据)方式来解构数据,在解构响应式数据时,还保持它的响应式特征。 let { salary } = to...原创 2022-03-23 23:48:39 · 2551 阅读 · 0 评论 -
Vue3中如何通过ref获取DOM元素
<template> <div> <!-- 第三步设置ref --> <div ref="mybox"></div></template><script>// 第一步首先导入refimport { ref} from 'vue'export default { setup() { // 第二步定义ref const mybox = ref('')...原创 2022-03-23 23:43:27 · 1039 阅读 · 0 评论 -
Vue3中的v-modul语法糖超详细解析,和用法
父组件中<template> <div> <Son v-model="city" v-model:age="age" v-model:sss="names"></Son> <!-- 等价于下面的代码 --> <!-- 添加了一个自定义属性 :modelValue(v-model默认添加的绑定属性为modelValue) 一个自定义事件函数,通过传参给自定义属性绑定的值赋值 (默认的自定义事件为up.原创 2022-03-23 23:38:41 · 768 阅读 · 0 评论 -
Vue3中创建定义图片懒加载自定义指令,超详细教程,
// 首先下载 vuevueuse/core 包// npm i @vueuse/core// 第一步:// 再src目录下创建directive文件// directive文件中// 定义全局指令import { useIntersectionObserver } from '@vueuse/core'// 导入默认占位图import defaltImg from '@/assets/images/200.png'export default { install(app) {.原创 2022-03-23 23:26:54 · 737 阅读 · 1 评论