vue
文章平均质量分 93
大吕十六 不见长安
春风得意马蹄疾,一日看尽长安花。
展开
-
研究vue2.0源码(1)initMixin——core
研究vue2.0源码(1)initMixin——core为什么研究源码事情是这样…本来只是一个前端菜鸡(虽然现在也是一个前端大菜鸡(可以菜但是必须得大对不对:))),然后有幸去年参加了一个大项目,就是那种全国性大大项目啊哈哈哈哈,也不用点名点姓说是哪个项目了,就是很大的全国性的,然后触发了程序员的被动技能——工作半年,实际工作时间一年。。。(天天加班)然后吧,每天晚上也没有啥事,就闲来无事的时候脑子一抽(也是恋爱不好谈了,王者荣耀不好玩了)想看vue2.0的源码,(这时候内心就一个想法,你在凝视原创 2021-04-26 17:54:40 · 362 阅读 · 0 评论 -
vue使用slot插槽
vue使用slot插槽前言在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。一、默认插槽// 父组件import defaultslot from "@/study/slot/defaultslot.vue";<template><div><defaultslot>原创 2020-12-29 11:15:42 · 278 阅读 · 0 评论 -
VUE内置 HOOKS钩子函数,HOOKS API的Vue实现
VUE内置 HOOKS钩子函数,HOOKS API的Vue实现一、HOOKS二、使用步骤1.withHooks2.useState2.useEffect总结一、HOOKSHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。后来看到尤大在 Vue 3.0 最近进展 的视频中也提到了 Hooks API,并写了一个在 Vue 中使用 Hooks 的 POC。可以把hooks当作更强、更实用的mixins。二、使用步骤原创 2020-09-29 16:08:00 · 2616 阅读 · 0 评论 -
VUE3模板,JSX,JSV
JSXJSX1. 变量作用域比较1.1 .vue 中无法使用当前作用域变量,必须return后才能使用1.2 .jsx 中可以直接使用当前作用域的变量2. 灵活性比较2.1 .vue 中一个文件只能写一个组件2.2. .jsx 中可以写多个组件3. 指令比较3.1. .vue 原生支持优雅的指令写法3.2. .jsx 本身不支持指令 社区有多种指令的书写方式,各种千奇百怪,为此还开了issue讨论,至今仍然没有友好的解决方式。因此可以暂时认为 .jsx 不支持指令或支持的不好.4. 运行时性能比较4.1.原创 2020-09-29 11:02:29 · 1434 阅读 · 1 评论 -
VUE源码解析——全局 API 篇,学习Vue中所有全局API的实现原理
VUE源码解析——全局 API 篇,学习Vue中所有全局API的实现原理学习Vue中所有全局API的实现原理总结学习Vue中所有全局API的实现原理总结good night原创 2020-09-25 22:09:21 · 352 阅读 · 0 评论 -
VUE源码解析——内置组件篇,学习Vue中内置组件的实现原理
VUE源码解析——内置组件篇,学习Vue中内置组件的实现原理学习Vue中内置组件的实现原理总结学习Vue中内置组件的实现原理总结good night原创 2020-09-19 17:35:15 · 436 阅读 · 0 评论 -
VUE源码解析——Object、Array变化侦测原理解析,学习Vue中如何实现数据的响应式系统,从而达到数据驱动视图。
VUE源码解析——Object变化侦测原理解析一、什么是变化侦测?二、Object变化侦测1.Object.defineProperty方法2.依赖收集什么是依赖收集何时收集依赖?何时通知依赖更新?依赖管理器Dep类Watcher类不足之处Object变化侦测流程总结├─dist # 项目构建后的文件├─scripts # 与项目构建相关的脚本和配置文件├─flow # flow的类型声明文件├─s原创 2020-09-18 11:41:22 · 330 阅读 · 0 评论 -
VUE源码解析——模板编译底层原理,学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM
VUE源码解析——模板编译底层原理一、什么是模板编译?二、整体渲染过程三、模板编译内部流程抽象语法树AST总结一、什么是模板编译?把写在<template></template>标签中的类似于原生HTML的内容称之为模板。在<template></template>标签中除了写一些原生HTML的标签,我们还会写一些变量插值,或者写一些Vue指令,这些东西都是在原生HTML语法中不存在的,不被接受的。render函数会将模板内容生成对应的VNode,VNo原创 2020-09-17 19:57:44 · 1378 阅读 · 0 评论 -
以凡人之躯,用js事件监听自定义——写一个绝对定位card组件
以凡人之躯,用js事件监听自定义——写一个绝对定位card组件一、组件是什么?二、使用步骤1.创建组件三、效果总结一、组件是什么?所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的,所以组件在系统内部可复用,组件和组件之间可以嵌套,如果项目比较复杂,可以极大简化代码量,并且对后期的需求变更和维护也更加友好。二、使用步骤1.创建组件html<div class="floatCard" ref="floatCard"原创 2020-09-13 11:32:49 · 292 阅读 · 0 评论 -
Object原生监听对象变化,类似ES6的proxy代理
Object原生监听对象变化,类似ES6的proxy代理一、监听对象变化二、使用步骤总结一、监听对象变化数据驱动视图的关键点则在于我们如何知道数据发生了变化JS的Object.defineProperty方法二、使用步骤// defineProperty第一个参数是对象,第二个参数是访问对象属性名,第三个参数是get和set操作let car = {}let val = 3000Object.defineProperty(car, 'price', { enumerable: true,原创 2020-09-12 16:24:37 · 325 阅读 · 0 评论 -
webpack深入配置详解
webpack深入配置详解一、webpack是什么?二、使用步骤1.创建文件vue.config.js2.配置webpack总结一、webpack是什么?WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。a:模块化,让我们可以把复杂的程序细化为小的文件;b:类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能原创 2020-09-08 20:57:59 · 162 阅读 · 0 评论 -
vue项目中使用数据可视化工具ECharts
vue项目中使用数据可视化工具ECharts一、ECharts是什么?二、使用步骤1.引入库2.使用总结一、ECharts是什么?ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。二、使用步骤1.引入库代码如下(示例):npm install echart原创 2020-09-08 16:51:43 · 1046 阅读 · 0 评论 -
vue项目webpack配置代理,报错代理失败,Proxy error: Could not proxy request xxx from xxx
vue项目webpack配置代理,报错代理失败,Proxy error: Could not proxy request xxx from xxx解决思路1.原因总结解决思路1.原因1.是因为代理对象没有开启服务,不能访问到对象服务器2.代理规则写错总结good morning...原创 2020-09-07 10:37:42 · 42707 阅读 · 15 评论 -
VUE框架深入——自定义指令directive
VUE框架深入——自定义指令directive一、自定义指令directive总结一、自定义指令directive注册一个全局自定义指令 v-focusVue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})如果想注册局部指令,组件中也接受一个 directives 的选项directives: { focus: { /原创 2020-09-06 19:43:18 · 273 阅读 · 0 评论 -
VUE框架深入——计算属性computed和侦听器watch(深度监听对象属性的变化)
VUE框架深入——计算属性和侦听器一、计算属性computed二、侦听属性watch总结一、计算属性computed对于任何复杂逻辑,你都应当使用计算属性computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }计算属性默认只有 getter,不过原创 2020-09-05 20:55:42 · 1928 阅读 · 0 评论 -
VUE框架深入——掌握keep-alive缓存加载慢,请求多的页面
VUE框架深入——掌握keep-alive缓存加载慢,请求多的页面一、keep-alive是什么?二、使用步骤1.在动态组件中的应用2.在vue-router中的应用3.刷新keep-alive缓存的页面总结一、keep-alive是什么?keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,简单一点来说就是从页面链接到其他页面后回退到页面不用在重新执行页面的代码,只会从缓存中加载之前已经缓存的页面,这样可以减少加载时间及性能消耗,提高用户体验性。二、使用步骤1.在动态组件中的应原创 2020-09-02 19:42:17 · 1653 阅读 · 0 评论 -
VUE框架深入——掌握mixins混入
VUE框架深入——掌握mixins混入一、mixins是什么?二、使用步骤1.创建mixins模板2.在需要的页面引用3.调用mixins中的方法4.使用注意事项总结一、mixins是什么?mixins(混入)是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。二、使用步骤1.创建mixins模板创建一个js文件,命名为initCos.js代码如下(示例):export default init原创 2020-09-02 14:42:47 · 409 阅读 · 0 评论 -
companyManagement项目nav导航栏公共组件
companyManagement项目nav导航栏公共组件一、nav是什么?二、代码1.引入库总结一、nav是什么?是一个用来帮助浏览web的工具二、代码1.引入库代码如下(示例):<template> <div id="headerNav"> <div class="frame"> <div class="frame_img-div"> <img src="../assets/svg/wohensh原创 2020-08-27 18:06:28 · 407 阅读 · 0 评论 -
vue3.0+的webpack配置,配置简单实用的vue.config.js
vue3.0+的webpack配置,配置简单实用的vue.config.js一、webpack是什么?二、使用步骤1.创建文件vue.config.js2.配置webpack总结一、webpack是什么?WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。a:模块化,让我们可以把复杂的程序细化为小的文件;b:类似于TypeScript这种在原创 2020-08-26 20:43:07 · 5682 阅读 · 3 评论 -
在boss直聘找到前端开发工程师工作的技能树,500万开发工程师
学习目标:入行p4学习内容:1.熟悉网站开发的整体流程,能够与产品和ui配合高效完成任务2.熟悉W3C标准,熟练掌握ES6新特性。3.熟练掌握vue及vue-router、vuex、 vue-cli 、element-ui等全家桶技术。4.熟悉微信小程序的开发技术及开发流程。5.熟悉webpack的使用,能够自行进行一-定的配置或修改。6.基本能够使用git来完成版本控制与多人合作开发。7.熟悉three.js技术。8.熟悉echarts绘图。9.有后台管理系统,e原创 2020-08-25 09:25:47 · 913 阅读 · 1 评论 -
简单易懂vue组件的生命周期,附带面试题中的vue周期相关题目(百分之八十的几率要问)
简单易懂vue组件的生命周期,附带面试题中的vue周期相关题目(百分之八十的几率要问)一、vue生命周期是什么?二、使用步骤1.整体2.beforeCreate这个阶段几乎没有操作,获取不到data数据,没有$el,已经有了this3.created实例已经被创建,有了data,也可以对data进行计算和监听,这个阶段可以去请求数据,但是没有$el,实例还没有被挂载4.beforeMount这个阶段几乎和created阶段没有差别5.mounted这个阶段已经挂在了$el,dom树,可以获取dom,页面也有原创 2020-08-24 20:03:21 · 608 阅读 · 1 评论 -
vue项目中vue-router报错,但是可以正常使用,报错:Avoided redundant navigation to current location
vue项目中vue-router报错,但是可以正常使用二、解决步骤1.报错信息2.解决方法总结# 一、Vue Router是什么?Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式,在 IE9 中原创 2020-08-23 16:50:48 · 431 阅读 · 1 评论 -
vue源码解析——vue的MVVM响应式原理介绍
vue的MVVM响应式原理介绍——vue源码解析一、vue的MVVM是什么?二、使用步骤1.引入库2.读入数据总结一、vue的MVVM是什么?MVVM是Model-View-ViewModel的简写。它模式是MVC—>MVP—>MVVM的进化版。Model负责用JavaScript对象表示,View负责UI界面显示,两者做到了最大限度的分离。而把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View原创 2020-08-23 16:35:03 · 216 阅读 · 1 评论 -
在style标签中,vue项目引入style文件,外部css文件
在style标签中,vue项目引入style文件,外部css文件一、css是什么?二、使用步骤1.使用style标签引入2.在style标签内使用@import导入总结一、css是什么?CSS (层叠样式表)层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的原创 2020-08-20 22:45:11 · 10878 阅读 · 2 评论 -
如何在vue项目中引入element组件框架,帮助vue项目搭建,更美观简洁强大的组件框架
如何在vue项目中引入element组件框架,帮助vue项目搭建,更美观简洁强大的组件框架一、element-UI是什么?二、使用步骤1.引入库2.main.js文件中引用3.在项目中使用总结一、element-UI是什么?Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。二、使用步骤1.引入库代码如下(示例):npm install element-ui -S2.main.js文件中引用代码如下(示例):i原创 2020-08-20 09:59:02 · 559 阅读 · 1 评论