Vue
Vue各种干货
zjLOVEcyj
composing code was a kind of art
展开
-
手写简易版vuex
代码】手写简易版vuex。原创 2022-08-06 00:15:22 · 104 阅读 · 0 评论 -
Vue-Router手写实现
代码】Vue-Router手写实现。原创 2022-07-21 10:20:13 · 136 阅读 · 0 评论 -
Vuex手写实现
代码】Vuex手写实现。原创 2022-07-20 17:11:18 · 132 阅读 · 0 评论 -
vue响应式原理模拟实现
vue响应式原理原创 2022-07-01 16:02:22 · 132 阅读 · 0 评论 -
vue组件中某些时候无法使用this获取props数据时的解决方法
场景:子组件接收来自父组件的props属性immediate,这个属性值要用作watch中一个监听项的immediate的属性值,但是在当前作用域内this并不指向组件实例如下此时可以在全局定义一个变量保存改值,在mounted生命周期钩子中将父组件传递过来的属性值赋值给这个全局变量,之后在watch时使用如下...原创 2022-04-06 16:13:56 · 1634 阅读 · 0 评论 -
Vue中使用swiper实现轮播图
首先使用npm安装swiper 这里使用的是版本5npm i swiper@5 -S接着在组件模板中添加轮播的html结构<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> .原创 2022-04-06 12:33:46 · 6748 阅读 · 0 评论 -
Vue中使用mockjs模拟数据
首先使用npm安装mockjsnpm i mockjs -S安装好mockjs后在src目录下创建mock目录在mock目录下准备JSON格式的数据把mock数据需要的图片数据放在publicu目录下(将来打包时会把相应的资源原封不动的放到dist文件夹里)开始mock。通过mockjs实现在mock目录下创建mockServe.js通过mockjs实现模拟数据// 先引入mockjsimport Mock from 'mockjs'// webpack默认对外暴露的类型有图片.原创 2022-04-06 10:28:01 · 644 阅读 · 0 评论 -
vue编程式导航跳转到当前路由多次执行抛出NavigationDuplicated: Avoided redundant navigation to current location:
为什么?push方法会返回一个Promise对象,内部会进行跳转成功或失败的回调解决方法只需在push方法末尾传递两个成功和失败的回调函数,可以捕获到当前的错误,可以解决。但是此种方法治标不治本,可以解决警告错误将来在其他组件中使用push或replace时还会报错我们知道push方法是VueRouter类的一个原型方法,而$router是VueRouter类的实例,类的实例可以直接调用类的原型方法,所以治本的方法在于直接重写原型方法push,修改结果就会作用于以后使用push。所以问题的究.原创 2022-04-04 09:19:36 · 570 阅读 · 0 评论 -
vue事件修饰符
stop阻止事件冒泡给事件名称添加.stop事件修饰符后可以阻止事件冒泡,即仅会触发当前元素的事件,不会触发其父元素的相同事件prevent阻止默认事件<!-- 阻止默认事件 --><a href="https://www.baidu.com" @click.prevent="aClick()">跳转到百度</a>capture添加事件时使用捕获模式,即由外到内进行事件触发应用场景较少self当事件在该元素本身触发使才触发回掉once只.原创 2022-02-15 22:17:44 · 275 阅读 · 0 评论 -
vue组件通信
父组件向子组件传值先在父组件中绑定自定义属性,通过该属性向子组件传值在子组件使用props接受父组件传递的数据子组件向父组件传值在父组件绑定自定义事件在子组件使用$emit(事件名, data)触发事件向父组件传递data...原创 2022-02-11 14:27:59 · 363 阅读 · 0 评论 -
Vue3.0新特性
ref封装响应式数据(原始类型)vue3中setup()中创建的数据不再是响应式的,必须将其由ref调用后返回才是响应式数据对象,使用ref需要导入,在script中获取或修改值需要使用.value,在模板中使用时需要returnimport {ref} from 'vue'export default ({ setup () { const count = ref(0) return {count} }})computed计算属性import {computed} fro.原创 2022-01-29 17:02:06 · 740 阅读 · 0 评论 -
使用vue cli配置vue开发环境
安装npm i -g @vue/cli创建项目vue create projectESlint插件安装该插件可以检查代码规范,并在保存时自动修正代码如果 eslint 安装后不生效,可以在根目录创建 .vscode 文件夹,然后在文件夹中创建 settings.json 然后输入{ "eslint.validate": [ "typescript" ]}Vetur插件该插件提供Vue代码提示...原创 2022-01-29 11:07:11 · 1017 阅读 · 0 评论