vue
挥别了青春
这个作者很懒,什么都没留下…
展开
-
vue 2.x内部运行机制系列文章
最近一直在用vue.js作为前端技术栈,闲暇之余,也简单研究了下vue.js的源码和各位前端大牛的文章,为了加深自己对vue.js的理解和完成公司的硬性要求(内部分享),于是就有了这篇系列文章。同时也趁3.0正式版发布前做2.0的最后一波总结。vue是什么套用官网的话,vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,它拥有优雅的API,并且易于上手,还便于与第三方库或既...原创 2019-10-20 17:25:14 · 288 阅读 · 0 评论 -
简析vue 3 的数据响应系统
在10月5日尤大大Vue3的源代码正式发布了,闲暇之余也简单研究了下源码。vue3 目前的版本是Pre-Alpha,源码仓库地址vue-next,有需要的朋友可以自行下载Vue 的核心之一就是响应式系统,通过监听数据的变化,来驱动更新视图。因此,一拿到源码,就先研究了下它的数据监听机制。当然,在介绍数据监听知识之前,还需要了解一些其他东西第一个就是实现数据监听的核心Proxy,第二个就是W...原创 2019-10-15 22:11:33 · 855 阅读 · 0 评论 -
vue项目遇到的坑
1.mounted钩子函数中请求数据导致页面闪屏问题其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了2.npm run build 后,部署网页到服务器,出现404错误vue项目默认配置是打包后放在服务器根目录下,所以如果要部署在子目录下则会报404错误。这种情况就需要做如下修改// vue.config.js 中,修...原创 2019-09-24 23:51:56 · 1537 阅读 · 0 评论 -
一文弄懂vuex的使用方式
Vuex 是什么?vuex是一种状态管理模式,它保存着组件的公用的状态,并且以相应的规则保证状态变化。vuex的核心就是一个store,它相当于是一个容器,里面包含有state,action,mutation,getter,modules。state:用于数据的存储,是store中的唯一数据源getters:如vue中的计算属性一样,基于state数据的二次包装,常用于数据的筛选和多个数...原创 2019-09-21 12:30:30 · 697 阅读 · 0 评论 -
vue中组件通信的几种方式
我们知道,vue中的一个大页面是由多个子组件组成,组件之间的关系往往错综复杂,因此我们了解组件的通信方式成为vue中的重中之重。这篇文章就来总结一下vue项目中的几种通信方式。一. 父子组件通信1.props/$emit父组件通过props向子组件传递数据,子组件通过$emit触发父组件的方法,从而实现子到父的通信<!--父组件--><temp...原创 2019-09-15 11:46:48 · 281 阅读 · 0 评论 -
关于vue项目的性能优化
1. 合理使用v-if和v-show v-if是真正的条件渲染,他的渲染机制是,直到第一次满足条件才会被渲染,条件不满足后又进行销毁。 v-show 则不管满不满足条件,都会被渲染,显示与否只是切换dom的display属性。 所以,一般v-if用于切换频率较少的场景,而v-show则适用于切换频率较多的场景。 2. co...原创 2019-08-27 22:55:59 · 608 阅读 · 0 评论 -
vue底层-响应式原理
先简单了解下object.defineProperty方法// Object.defineProperty方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。// get 方法 使用该属性的时候会调用get方法// set 方法 修改或者赋值该属性时调用该方法Object.defineProperty(obj, key, { enumerable: ...原创 2019-08-17 11:39:17 · 417 阅读 · 0 评论 -
vue底层-template模板编译
vue底层-template模板编译vue的渲染过程Vue的模板编译在$mount之后,通过compile方法,经过parse、optimize、generate方法,最后生成render function来生成虚拟DOM,虚拟DOM通过diff算法,来更新DOM。具体功能如下:parse 函数解析 templateoptimize 函数优化静态内容generate 函数创建 re...原创 2019-06-05 21:34:17 · 6102 阅读 · 2 评论 -
vue中的自定义指令
出了vue中默认的v-model、v-if、v-show等,未来满足我们日常需要,我们也可以使用自定义等一些指令怎么添加自定义指令全局指令:指可以在全局使用的指令import Vue from 'vue'// 注册全局指令 v-lowerVue.directive('lower',{ bind:function(el,binding){ el.innerH...原创 2019-05-10 14:02:06 · 208 阅读 · 0 评论 -
vue中过滤器的使用
vue过滤器的作用:在不改变原数据的前提下,对数据进行一定程度的处理,在返回并显示在页面上过滤器的定义和使用// 全局注册Vue.filter('toRMB', function (value) { return `¥${value}`})new Vue({ el: '#app', data: { money: 223.1233, }, // ...原创 2019-04-22 22:54:24 · 437 阅读 · 0 评论 -
解决vue首屏加载慢,白屏的问题
1.路由懒加载// 需要ES6支持const HelloWorld = () => import('@/components/HelloWorld.vue')export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, ]})...原创 2018-09-27 23:28:59 · 17850 阅读 · 0 评论 -
vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template><script> e...原创 2018-07-12 16:53:53 · 30545 阅读 · 1 评论 -
vue项目或react项目用node搭建静态文件服务器
//npm install express --save-dev 下载express包//npm install http-proxy-middleware --save-dev 下载代理中间件const fs = require('fs');const path = require('path');const express = require('express');const ...原创 2018-07-12 15:08:21 · 1325 阅读 · 0 评论 -
vue项目中关于axios的二次封装
vue项目开发时,为了对请求的数据做统一处理,如加loading,以及请求消息提示提示等,需要对vue配套的axios进行二次封装//引入axiosimport axios from 'axios'// 使用element-ui Message做消息提醒import { Message } from 'element-ui';// 设置baseURL//axios.defaults.ba...原创 2018-07-12 14:56:11 · 2969 阅读 · 0 评论 -
vue使用v-if时的注意点
v-if和v-else或v-else-if之间不能添加其他元素。 以下是错误事例<span v-if="type==1">错误示范</span><span>哈哈哈</span><p v-else>嘿嘿嘿</p>以下是正确实例<span v-if="type==1">正原创 2018-07-12 14:28:38 · 57407 阅读 · 9 评论 -
关于vue中的slot和slot-scope
slot简言之就是插槽的意思,一般规定了一个显示的模板(规定html+css),这个模板写在父组件里(父组件里没有模板则不显示),至于显示位置等则是由子组件决定也就是说怎么显示是由父组件决定,在哪显示则由子组件决定在父组件中,各插槽的内容模板要写在子组件标签内部。默认插槽/匿名插槽/单个插槽默认插槽只能有一个,即在父组件里不定义slot的那个模板,默认插槽渲染在子组件内部不定义name的slot标...原创 2018-06-22 16:32:42 · 5729 阅读 · 0 评论