06 2021 档案

vue动画move的实现
摘要：<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move class，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name attribute 来自定义前缀，也可以通过 move-class a 阅读全文
posted @ 2021-06-30 12:31 当当和瓶瓶 阅读(872) 评论(0) 推荐(0)
vue自带的动画效果
摘要：https://cn.vuejs.org/v2/guide/transitions.html vue的动画范围是： 进入离开动画：<transition name='xx'>: v-if / v-show、动态组件 列表动画：<transition-group>: li渲染 几个主要的类名： xx- 阅读全文
posted @ 2021-06-30 07:25 当当和瓶瓶 阅读(634) 评论(0) 推荐(0)
v-model的理解
摘要：v-model不仅可以用在input表单上，还可以用到其他表单元素上，还可以用在自定义组件上。 v-model 在内部为不同的表单输入元素使用不同的 property ，并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbo 阅读全文
posted @ 2021-06-19 16:43 当当和瓶瓶 阅读(985) 评论(0) 推荐(0)
vue中对虚拟dom的理解
摘要：本质是一个普通的js对象，用于描述视图界面结构的， 在mouted的回调中，可以输出_vnode， 通过图可以知道，_vnode中有以下几个主要的属性： tag：组件的标签名， data: 组件的属性， children: 组件的子标签 parent: 父级元素 render函数： 作用：创建虚拟d 阅读全文
posted @ 2021-06-19 14:43 当当和瓶瓶 阅读(1041) 评论(0) 推荐(0)
vue常用的通信方式
摘要：父子组件通信： props，$event attribut, $listeners $parent, $children,$refs 跨组件通信 provide和inject 监听router和改变router：地址栏；比如pager组件中改变地址栏，passageList组件监听地址栏，改变了会重 阅读全文
posted @ 2021-06-18 17:36 当当和瓶瓶 阅读(51) 评论(0) 推荐(0)
vue-cli项目打包结果优化
摘要：分析工具：webpack-bundle-analyzer 使用范围：对于打包结果进行分析； 使用方法： 下载： npm install --save-dev webpack-bundle-analyzer; 引入：在vue.config.js文件中， 调整 webpack 配置最简单的方式就是在 v 阅读全文
posted @ 2021-06-18 16:25 当当和瓶瓶 阅读(579) 评论(0) 推荐(0)
vue-cli项目打包结果优化
摘要：分析工具：webpack-bundle-analyzer 使用范围：对于打包结果进行分析； 使用方法： 下载： npm install --save-dev webpack-bundle-analyzer; 引入：在vue.config.js文件中， 调整 webpack 配置最简单的方式就是在 v 阅读全文
posted @ 2021-06-16 07:21 当当和瓶瓶 阅读(759) 评论(0) 推荐(0)
vue-cli动态设置favicon和title
摘要：favicon是网站的小图标，title分为主副两个标题； 由于favicon和title都是全局的设置，且一次性设置后，除了副标题，其他的都是不需要变动的，所以，在vuex的action获取了一次以后，就不需要重复设置。 设置favicon actions:{ async getData({com 阅读全文
posted @ 2021-06-12 14:11 当当和瓶瓶 阅读(1064) 评论(0) 推荐(0)
vue-router中需要注意用的几个知识点
摘要：1.meta作为route对象的属性，可以自定义值。 如在routes.js中，常把是meta的authorRequired的值否需要登录验证的标志；在router对象的beforeEach中验证 import Vue from 'vue'; import Router from 'vue-rout 阅读全文
posted @ 2021-06-10 10:18 当当和瓶瓶 阅读(97) 评论(0) 推荐(0)
vuex中用法值得注意的地方
摘要：什么地方用vuex： 1.全局的数据，不如用户信息，很多组件都可能用到,为了方便交互，所以用vuex 2. 变化的频率低的数据，比如网站的icon图标，轮播图，而不是消息评论等。 mutation：突变，变异。 为什么要由mutation，是因为要对state，也就是状态的变化，进行监控。 在组件中 阅读全文
posted @ 2021-06-10 09:55 当当和瓶瓶 阅读(138) 评论(0) 推荐(0)
vue-router和vuex的安装
摘要：在vue-cli中两个的安装都是一样的 下载：npm i vuex vue-router 安装： 1.注册: 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-rout 阅读全文
posted @ 2021-06-06 12:09 当当和瓶瓶 阅读(356) 评论(0) 推荐(0)
图片懒加载
摘要：在scroll事件的回调中， 一 图片判断距离窗口的位置： document.body.clientHeight,窗口高度 scrollElement.scrollTop: 滚动条滚动距离（注意是定高的父元素，不是内容高度被撑开的子元素。scrolld css样式也在父元素上设置） 当前img.ge 阅读全文
posted @ 2021-06-03 18:33 当当和瓶瓶 阅读(52) 评论(0) 推荐(0)
bus传值
摘要：bus上可以定义一个事件， bus上可以触发事件 不论是组件还是js模块，都可以用引入bus bus的意义就是，在多个组件存在复杂情况下，比如：a组件上点击一个按钮，要在毫不相关的y组件上弹出一个弹窗。如果用父子事件传递，$emit触发，会非常不方便。 此时，可以如下操作： a组件： <button 阅读全文
posted @ 2021-06-03 16:40 当当和瓶瓶 阅读(563) 评论(0) 推荐(0)