随笔分类 - vue
vue插件开发
摘要：1.项目架构目录： 这里采用的是vue-cli 脚手架，版本是2.**，vue-cli 3.0 已经出来有一段了。今天暂不用3.0 的，回头会详细说上3.0的打包使用。项目目录如下： 这个项目结构直接用 vue init webapck vue-upload ,脚手架生的模版，大架构我基本没动，添加
阅读全文
VuePress搭建博客
摘要：一、为什么你需要一个博客？ 优秀的程序员都在写博客，写博客有很多好处： 帮助自己梳理、总结、理解知识点（个人提升） 帮助别人理解知识点（好人一生平安） 简历更好看，更多面试机会（升职加薪） 二、什么是 VuePress，为什么要使用 VuePress ？ VuePress 是尤雨溪（vue.js 框
阅读全文
骨架屏
摘要：// skeleton.entry.js import Vue from 'vue' import Skeleton from './skeleton.vue' export default new Vue({ // 根实例简单的渲染应用程序组件 render: h => h(Skeleton) }
阅读全文
从vue的$nextTick看宏任务、微任务
摘要：1、nextTick调用方法 首先看nextTick的调用方法： https://cn.vuejs.org/v2/api/#Vue-nextTick // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了
阅读全文
Tree-Shaking原理
摘要：一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目
阅读全文
父组件的mounted先执行还是子组件的mounted先执行
摘要：父组件和子组件之间的生命周期执行顺序 初次渲染就会触发的生命周期 beforeCreate() , created() beforeMount() , mounted() 组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。 组件的销毁操作是先父后子，销毁完成的顺序是先子后父。 加载渲染过程 子组
阅读全文
vue/react: 父组件中请求数据好？还是子组件中请求数据好？
摘要：1、如果现在有一个父组件，3个子组件。 每个组件展示的数据不同，现在有2种数据获取方式。第一种，在父组件中获取所有的数据，然后使用props传递给每个子组件。第二种：各个子组件中获取各自的数据。 、你觉得哪种好？为什么？ 答： 根据实际业务来 如果数据其他组件用不到,那么可以由子组件自己获取如果数据
阅读全文
Vue@某人，At某人，仿新浪微博@某人，@user，艾特，艾特某人
摘要：vue-atuser Vue@某人，At某人，仿新浪微博@某人，@user vue-edit Vue实现渲染数据后控制滚动条位置 📜 Element.scrollIntoView() Element.scrollIntoView() // 如果为false，元素的底端将和其所在滚动区的可视区域的底
阅读全文
Vue的事件修饰符
摘要：这里要提的是dom事件分为俩种响应一种是捕获，一种是冒泡，具体百度 . stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递） . prevent：阻止默认事件的发生 ，默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，使用".prevent"修饰符可以阻止这
阅读全文
Vue 开发必须知道的36个技巧(
摘要：1.require.context() 1.场景:如页面需要导入多个组件,原始写法: 1 2 3 4 import titleCom from '@/components/home/titleCom' import bannerCom from '@/components/home/bannerCo
阅读全文
vue函数式组件
摘要：解释:函数式组件就是函数是组件 函数式组件与普通组件的区别 1.函数式组件需要在声明组件是指定 functional 2.不需要实例化，所以没有this,this通过render函数的第二个参数来代替 3.没有生命周期钩子函数，不能使用计算属性，watch 4.不能通过$emit 对外暴露事件，调用
阅读全文
父组件与子组件生命周期钩子顺序是什么
摘要：一、渲染过程 父组件挂载完成一定是子组件挂载完成之后，才算是父组件挂载完成，所以父组件的mounted在组件间的mounted之后。 父beforeCreate-->父created-->父beforeMounte-->子beforeCreate-->子created-->子beforeMounte
阅读全文
vue&react组件通信原理：发布-订阅模式的实现原理
摘要：//发布-订阅模式 //订阅：给自定义事件绑定函数。调用代码：on(ele,'myClick',fn) function on(ele, type, fn) { if (/^self/.test(type)) {//1、给所有浏览器的某个自定义事件绑定多个函数 if (!ele['selfEvent
阅读全文
vue开发技巧总结
摘要：1.require.context() 1.场景:如页面需要导入多个组件,原始写法: import titleCom from '@/components/home/titleCom' import bannerCom from '@/components/home/bannerCom' impor
阅读全文
前端嵌入视频直播和聊天支持.m3u8格式
摘要：1、安装vue-video-player npm install vue-video-player --save 2、在main.js中引入vue-video-player import VideoPlayer from 'vue-video-player' require('video.js/di
阅读全文
vue内置组件有哪些？
摘要：1.component：用于动态组件，查看博文vue学习之组件。 <component :is="componentId"></component> 2.transition：过渡和动画，查看官网文档进入/离开&列表过渡。 <!-- 简单元素 --> <transition> <div v-if="
阅读全文
vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件通信
摘要：vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。 例如
阅读全文
解决VueRoter/element-ui路由报错Error: Avoided redundant navigation to current location的问题
摘要：Vue.use(VueRouter); // 处理el-menu-item 路由重复跳转出错情况 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location: any)
阅读全文
说说 Vue.js 中的 v-cloak 指令
摘要：可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。 html： <div id=
阅读全文
