vue
关注
分享
扫一扫
易-水寒
这个作者很懒，什么都没留下…
展开
-
Vue3.0尝鲜
前言4月21日，尤大大在B站分享了Vue.js3.0 Beta的最新进展，从2019年6月份的第一次发布的Vue3.0 Function-based API RFC，再到2019年10月份的Vue.js3.0 pre-alpha，经历一次次的更新，如果你还没有对3.0的更新内容有所了解，那么如何升职加薪，迎娶白富美，走上人生巅峰。对于有理想有追求的小伙伴不要慌，认真读完这篇文章，相信你对于V...原创 2020-04-27 14:14:44 · 1739 阅读 · 0 评论 -
Vue.use和Vue.prototype
import Vuex from 'vuex'Vue.use(Vuex) // vuex本质上也是vue的一个插件import utils from '../src/utils' // 工具函数Vue.prototype.$utils = utils 首先看一下概念化的区别1.不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式2.非vue官方库不支持new ...原创 2019-10-14 15:12:16 · 500 阅读 · 0 评论 -
Vue之虚拟DOM
虚拟DOM的概念是随着react的出现，以其卓越的性能被人所接受。到vue2.0也引入了虚拟DOM真实DOM了解虚拟dom之前，先回顾一下真实dom和它的解析流程先看下webkit渲染引擎流程图所有的浏览器渲染引擎工作流程大致分为5步：创建DOM树 —> 创建Style Rules-> 构建Render树 —> 布局Layout-—> 绘...原创 2019-09-06 16:05:40 · 874 阅读 · 0 评论 -
vue项目性能优化总结
vue作为目前主流的前端框架，在github上拥有147kstar，作为vue开发大军的一员这篇文章分享一下自己使用过程中的主要针对vue项目的一些优化经验，欢迎大家一起交流(持续更新中......)一.代码优化1.v-if和v-show使用场景v-if 是条件渲染，条件为false时，不会在dom上渲染元素，条件判断的是否渲染该元素v-show 是显示与否，只是css层面上...原创 2018-07-05 20:01:41 · 3599 阅读 · 1 评论 -
vue3.0为何弃用Object.defineProperty而选择Proxy
说到vue 双向绑定原理是少不了的知识点，对于vue新版本有关注的小伙伴应该知道尤大大已经宣称在3.0中 双向绑定将会使用Proxy来代替2.x版本的Object.defineProperty，那么我们来看一下Proxy对比defineProperty优势在哪首先这两种都是基于数据劫持实现的双向绑定什么是数据劫持当访问或者设置对象的属性的时候，触发相应的函数，并且返回或者设置属性的值。...原创 2019-08-27 19:56:09 · 4459 阅读 · 0 评论 -
Vue项目接入钉钉扫码登录
官方开发文档https://open-doc.dingtalk.com/microapp/serverapi2/kymkv61.注册相关账号获取所需信息,进入钉钉开发平台，登录企业管理员账号，进入https://open-dev.dingtalk.com/#/loginMan2.点击创建扫码登录应用授权3.创建成功以后拿到appId和appSecret4.在index.htm...原创 2019-07-24 18:07:47 · 10633 阅读 · 9 评论 -
Vue动态绑定Class 与 Style
Class 可以通过对象语法和数组语法进行动态绑定<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>data: { isActive: true, hasError: false}<div v-bind:class="[isActive ? act...原创 2018-06-27 14:35:00 · 998 阅读 · 1 评论 -
vue computed和watch详解
1.概念computed(计算属性)和watch(监听器)都是以vue的依赖追踪机制为基础的，当依赖数据发生变化时，依赖此数据的相关数据会自动变化2.应用场景computed处理场景：一个数据受多个数据的影响；watch处理场景：一个数据影响多个数据 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的值有缓存的特性，避免每...原创 2018-07-26 20:31:05 · 2307 阅读 · 0 评论 -
Vue scoped
scoped：样式私有化在vue文件的style标签上添加scoped属性，样式属性只作用于当前组件，不受其他组件样式影响，实现了样式的模块化组件样式<template> <div class="button-warp"> <button class="button">text</button> </div>...原创 2018-08-29 20:26:55 · 1066 阅读 · 0 评论 -
Vue封装axios 并注册为全局函数
npm install axios(或在index.html引入axios文件)在src目录下新建api文件夹，将http请求相关文件统一管理1.axios.jsimport axios from 'axios'class httpRequest { constructor (baseUrl) { this.baseUrl = baseUrl } getI...原创 2018-08-30 19:40:10 · 2569 阅读 · 1 评论 -
Vue注册全局组件-弹窗组件
在src目录下新建components文件夹1.新建module文件夹，然后新建v-alert.vue<template> <transition name="fade"> <div class="v-alert g-center" :style="{zIndex}"> <div ...原创 2018-08-30 20:00:02 · 7246 阅读 · 0 评论 -
Vue封装滚动条组件(可自定义滚动滚动条速率、颜色等)
<!--滚动条--><template> <div class="v-scroll-bar" @wheel.prevent="wheelEventHandle" :style="{height:height+'px'}" ref="jScroll"> <!--滚动内容--> <div cl...原创 2018-09-12 20:33:50 · 3122 阅读 · 1 评论 -
Vue全局自定义指令-输入指定位数数字
在vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，除了默认的内置指令，比如v-model、v-show等等，但有时候需求并不限于这些，所以需要开发人员自定义指令。此文就来实现一个只能输入指定位数数字的自定义指令在src目录下新建directive文件夹1.新建module文件夹，然后新建number-only.jslet ...原创 2018-11-30 20:06:06 · 4646 阅读 · 9 评论 -
详解vue-cli3的安装配置使用以及和vue-cli2的区别
首先纠正一下好多人的一个误点 尤大大在Medium上宣布正式发布了vue-cli 3.0 这是vue的脚手架工具总的来说这次两个3.0版本都经历了很大的重构改版，在性能和使用上都有了很大的改变反正作为开发，尤其是对于技术迭代飞速的前端开发来说，不管什么时候都要保持对前沿技术的敏感，那就来具体分析一下vue-cli 3.0这次版本的更新对比之前的版本到底有了哪些变化vue-cli更新对比...原创 2019-06-20 14:16:25 · 6292 阅读 · 2 评论