在Vue中提供了use方法来安装插件，那么Vue插件的原理是什么呢？一、Vue.useuse方法官方描述如下图：也就是说Vue.use()方法接收一个函数或者提供install方法的对象作为参数（必须提供install方法），如果传入的参数是函数，这个函数会被当做install方法。文档：https://cn.vuejs.org/v2/api/#Vue-useVue2.6.11版本use源码如下：
为什么使用Vue-Simple-Uploader说说为什么选用这个组件，对比vue-ant-design和element-ui的上传组件，它能做到更多的事情，比如：可暂停、继续上传上传队列管理，支持最大并发上传分块上传支持进度、预估剩余时间、出错自动重试、重传等操作支持“快传”，通过文件判断服务端是否已存在从而实现“快传”断点分块续传（与下方的操作示例无关）先说一下分块断点续传的大概原理，我们在组
先看个例子：var vm = new Vue({
props: {
rootProp: Boolean
},
data {
a: '',
b: ''
},
computed: {
rootCompute () {
return ''
}
},
watch: {
rootWatcher (newVal
需求背景上传一个封面图，在上传之前需要对图片进行裁剪，上传裁剪之后的图片，类似微信的上传头像。技术方案上传肯定是用element的 el-upload 组件实现上传，非常方便，各种钩子函数。裁剪一开始找的 cropper 看着功能到是非常齐全，api也比较丰富，基本是符合预期的需求的。但是此库是基于jq 的，在vue项目中有点难用。于是就找到了 vue-cropper 支持组件
因为项目需求是网盘上传文件，但是普通上传文件如果文件太大，会造成反应过慢或者请求超时的问题，后面思考很久，和后台商量改成断点续传去实现，后面直接使用vue-simple-uploader插件实现。安装npm install vue-simple-uploader --save在main.js初始化import uploader from 'vue-simple-uploader'
Vue.use(
项目文件结构在Vue项目中，所有核心的代码都是在src目录下完成，为了更好的了解Vue的底层实现，我们首先来了解一下src目录下代码的组织情况，从全局入手，在脑海里留下简单的印象，方便后续的学习。（注意：当前使用Vue的版本为2.6.12，不同版本的内容可能会有所差异）.
├── compiler // 编译模块：将 template 编译成为可以生成 vnode 的 render 函数
│
在学习Vue源码之前，首先要做的一件事情，就是去GitHub上将Vue源码clone下来，目前我这里分析的Vue版本是V2.5.21，下面开始分析：一、源码的目录结构： Vue的源码都在src目录下，分为6个不同功能的文件src
├── compiler # 编译相关：包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。
├── core #
转载
2024-05-18 03:06:22
147阅读
搭建环境工欲善其事必先利其器，我们的学习计划从学会搭建Vue所需要的环境开始，node和npm的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和npm了，那我们就只需要执行以下命令：$ npm install -g vue-cli构建完了之后，随便进入一个我们事先准备好
vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。使用vuex好处：1、数据的存取一步到位，不需要层层传递
2、数据的流动非常清晰
3、存储在Vuex中的数据都是响应式的vue官方提供的独立于组件体系之外的，管理公共数据的工具： vuex五大块： 1.state：统一定义公共数据(类似于data（）re
转载
2024-10-14 18:17:23
60阅读
目标环境搭建掌握源码学习方法vue初始化过程剖析深入理解数据响应式资源 vue源码地址：https://github.com/vuejs/vue知识点获取vue 项目地址：https://github.com/vuejs/vue 迁出项目： git clone https://github.com/vuejs/vue.git 当前版本号：2.6.11文件结构源码目录：调试环境搭建安装依赖： npm
vue禁止页面翻转(flipbook-vue)flipbook-vue is a Vue component that displays images in 3D page flip effect. flipbook-vue是Vue组件，可在3D页面翻转效果中显示图像。
View Demo
查看演示
View Github
查看Github
(Installa
1. 文档介绍的全局自定义指令在Vue的模板语法中我们除了使用：v-show、v-for、v-model等，Vue其实 也允许我们来自定义自己的指令。1）注意，在 Vue 中，代码复用和抽象的主要形式是组件。 2）然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。先看一下vue3官方文档介绍使用的自定义全局指令：自定义全局指令：app的 directive 方
目录一、准备工作二、简单使用Vue2.1 初步使用Vue绑定2.2 Vue中数据绑定（用于表单元素，即有value属性的元素）2.2.1 单向数据绑定2.2.2 双向双向数据绑定2.2.3 数据绑定的简写2.3 Vue中el与data的两种书写方式2.3.1 el的写法——方式一2.3.2 el的写法——方式二2.3.3 data的写法——方式一2.3.4 data的写法——方式二 一、准备工作
写在前面Virtual DOM的概念相信大家都不会陌生，Vritual DOM是相对与DOM(文档对象模型)来说的，MDN上关于DOM的定义：“DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容”。相对于频繁地去操作DOM引
2、检查node.js版本查看版本的两种方式1|node -v2|node -version出现版本号则说明安装成功（最新的以官网为准） 3、为了提高效率，可以使用淘宝的镜像源输入：npm install -g cnpm --registry=https://registry.npm.taobao.org以后再用到npm的地方直接用cnpm来代替就好了，因为没有镜
转载
2024-09-20 20:21:29
564阅读
如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下过渡+动画如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性步骤1、添加过渡类名+动画名，这里为了方便查看效果，我将动画改为swing抖动
2、设置transition过渡属性值一般为了效果执行
深入理解以下全局 API 的实现原理：
Vue.use、Vue.mixin、Vue.component、Vue.filter、Vue.directive、Vue.extend、Vue.set、Vue.delete、Vue.nextTick
目标深入理解以下全局 API 的实现原理。Vue.useVue.mixinVue.componentVue.filter
转载
2024-06-14 22:05:50
430阅读
笔者工作也有一些时间，需要用vue写项目时也总是项目组长已经把项目搭建好了，偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建，但是前提是必须要已经安装好了node和npm如果你还没安装这些东西，就先去安装再来学习搭建vue项目吧一、安装vue-cli1. 开启命令行，输入指令（Windows的命令行开启方法为 键盘上的 开始键 +
转载
2024-07-17 23:09:49
113阅读
一, 初始化自己的项目(1). 初始化npmnpm init
<!--一路回车，会生成package.json文件-->
复制代码(2). 在根目录下新建src， build 文件夹，新建index.html作为html模版<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
目录前言一、重新安装vue/cli二、创建项目1.创建空白项目2.选择vue版本3.启动项目三、总结前言提示：vue已经进入了3.0的时代，具体的优点大家可以自行百度搜索，相关UI框架也已经升级了其3.0的版本。官网文档地址：安装 | Vue.js一、重新安装vue/cli打开控制台，先执行清理缓存命令，防止发生异常错误，命令如下:npm cache clean --force若不执行缓存清理命令
