![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
console.log('D')
hello world
展开
-
vue-cli脚手架和npm init vue@latest 区别
npm init vue@latest项目是基于vite打包的。脚手架创建的vue3项目是基于webpack打包的。原创 2022-11-15 10:27:05 · 5974 阅读 · 4 评论 -
vue直接添加属性是否响应式
【代码】vue直接添加属性是否响应式。原创 2022-10-27 17:02:38 · 236 阅读 · 1 评论 -
echars图片保存图片到本地操作
注意:canvas.toDataURl()该方法是将canvas转成图片,如果html中有跨域请求的图片资源,那么canvas就会报错不支持跨域。需求:将echars的图片添加到保存至本地操作。echars本质是canvas。原创 2022-09-13 10:54:49 · 515 阅读 · 0 评论 -
vuex在组件内派发action
我们可以用this.$store.dispatch()去派发action,也可以通过如下辅助函数的方式派发action。原创 2022-07-23 17:47:47 · 471 阅读 · 0 评论 -
Vue中将组件转换为插件
2.改用全局组件虽然不用引入但是需要的方式使用,并且调用其方法麻烦。1.高频组件(频繁复用组件)在每个组件中都import引入太麻烦。3.改为插件挂在Vue的原型上,直接调用原型上的方法即可。Vue中将组件转换为插件。......原创 2022-07-23 15:28:05 · 456 阅读 · 0 评论 -
Provide/Inject
当我们以如上的形式书写代码的时候,其实相当于对this.foo和this.baz做了一层浅拷贝,固当子组件inject的时候已经丢失了响应式功能了。但由于仅仅是浅拷贝,所以响应式对象的属性仍旧是响应式的。然而,如果你传入了一个可监听的对象,那么其对象的property还是可响应的。而且这样做有一个好处,即无法直接修改computedProperty的值,因为他是一个计算属性。此时整条数据的响应式的状态并不会丢失。可能之所以这样设计,是为了避免数据的混乱。依照这个思路,如果我们希望整个数据都是响应式的。...转载 2022-07-15 14:03:48 · 49 阅读 · 0 评论 -
uniapp小程序实现标签展开和收起
效果: html:js:原创 2022-07-13 13:11:24 · 1619 阅读 · 1 评论 -
props对象写法
props的用法原创 2022-06-30 12:07:12 · 799 阅读 · 0 评论 -
.sync修饰及props对象方式传参
父组件子组件原创 2022-06-30 11:20:29 · 162 阅读 · 0 评论 -
js的事件循环机制及理解vue中的$nextTick
js的事件循环机制 event loop vue $nextTick原创 2022-06-25 20:37:16 · 322 阅读 · 0 评论 -
Vue的响应式数据与非响应式数据及原理
1.直接在vm实例对象上添加属性2.列表渲染通过下标更改列表中的值需求:点击按钮更改列表中的第0号元素这种情况数据其实已经改变了,但是视图没变 解决方法: Vue.set || this.$set 那么Vue数据响应式是如何实现的呢?实现数据的双向绑定有几个重要的部分:数据代理原理: 2.数据劫持 => 实现数据双向绑定3.模板解析 三.扩展v-model实现数据双向绑定的本质...原创 2022-06-17 13:30:22 · 3644 阅读 · 0 评论 -
关于Promise和router的坑
首先明确this.$route.push() =>本身返回的也是Promise对象问题:执行函数后只输出444和666 但是不执行push跳转解决:1.dispatch和router联合使用的bug dispatch加await可解决加判断原创 2022-06-03 13:10:52 · 234 阅读 · 0 评论 -
vue-router路由配置
//第一步:引入插件、安装插件import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);// 引入相应的路由组件import routes from './routes.js';// 暴露VueRouter类的实例const router = new VueRouter({ // 配置路由 routes, // 设置滚动条的位置 scrollBehavior() .原创 2022-06-02 18:28:19 · 279 阅读 · 0 评论 -
插槽(具名插槽和作用域插槽)
具名插槽://子组件<template> <div> <div> //留出父组件插入进来的坑 <slot name="header"></slot> </div> </div></template><script>export default { name: 'Child',}</script><styl原创 2022-05-26 23:06:50 · 93 阅读 · 0 评论 -
二次封装axios
首先确保下载axiosnpm i axios一个简单的axios二次封装//引入axiosimport axios from 'axios'//创建一个axios实例const service = axios.create({ baseURL: '127.0.0.1',//基本路径地址 timeout: 5000 // 响应超时时间})//请求拦截器service.interceptors.request.use( config => { //在发.原创 2022-05-21 22:39:43 · 91 阅读 · 0 评论 -
简单的数据代理
数据代理:A对象包含B对象,B对象包含C未使用数据代理:A访问C A->B->C使用数据代理后:A访问C A->C // 被代理的数据 const myData = { name: 'orign', age: 1 } //代理商 const proxyData = { } for (const item in myData) { Object.definePrope...原创 2022-05-20 17:48:40 · 59 阅读 · 0 评论 -
关于路由守卫next()
动态注册的路由,对当次路由跳转不可见,后面的路由跳转都可见next():放行当前路由跳转 => 看不见刚才动态注册的权限路由(vue-element-admin潘家陈后台项目模板做路由权限,动态店家路由会出现页面留白bug)next(to.path) : 强制重新跳转到目标路由(中断当前路由跳转,进行新的一次跳转)//路由全局前置守卫router.beforeEach(async(to, from, next) => { NProgress.start() do.原创 2022-05-19 20:26:12 · 2571 阅读 · 0 评论