vue
qq_33712668
这个作者很懒,什么都没留下…
展开
-
vue实例的生命周期详解
Vue实例的生命周期简介此篇文章说的是最简单的单个VUE组件的生命周期。官网中的长图诠释了Vue实例从创建,运行到销毁的整个过程。从vue实例的创建,运行,销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期为了便于理解,再代码中创建vue实例,并在每个钩子函数中console出每个生命周期的el,data和message。此段代码可以直接复制。<!DOCTYPE html...原创 2019-05-20 14:47:37 · 2973 阅读 · 4 评论 -
自定义组件实现v-model
在项目中需要做一个标题展开框,点击展开才会显示下面的内容。因为多个地方都需要这样的可展开标题,所以做了一个自定义组件。组件需要一个双向绑定的值,控制展开/缩放。于是就思考,父向子可以用props传值,子传父用事件触发,也这样实现了。后来了解到v-model其实就是数据绑定和事件触发的语法糖,和我之前实现的类似,只不过我自己的实现是自己定义个事件名,而v-model的事件是input事件。于是改写...原创 2019-08-30 14:13:03 · 1869 阅读 · 2 评论 -
vue响应式原理 源码解析
引言从状态生成dom再输出到用户界面显示的流程叫做渲染,应用在运行时会不断进行重新渲染。而响应式系统赋予框架重新渲染的能力。变化侦测的作用就是侦测到数据的变化,当数据变化时,会通知视图进行相应的更新。追踪变化Vue.js的响应式原理依赖于Object.defineProperty,这个方法就是用来追踪变化的,该方法的更详细的MDN说明文档在Object.defineProperty。Obj...原创 2020-03-20 14:07:06 · 187 阅读 · 0 评论 -
vue 全局事件(eventBus)设置
引言做项目的时候需要,选择日期后触发各个页面去获取数据,但日期和页面之间无父子关系,无法使用父子组件之前事件的事件的触发,所以就用到了全局事件的绑定与触发使用main.js中的设置 new Vue({ router, store, render: h => h(App), data: { eventHub: new...原创 2019-07-23 15:44:27 · 1315 阅读 · 0 评论 -
vuex的学习与使用
vuexvue中有父子组件之间的通信,但某些变量需要在全局使用,那就用到了vuex,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。在vue3中的使用创建一个vue3项目,具体如下vue-cli3的创建记得在选配置的时候选上vuex项目创建成功后,得到的项目目录如下其中的store.js就是用来设置vuex的,查看store.jsimport Vue from 'v...原创 2019-07-23 17:25:23 · 134 阅读 · 0 评论 -
vue-cli3搭建项目及报错
步骤(在已安装node的基础上)因为npm比较慢,所以用淘宝镜像,命令行如下sudo npm install -g cnpm --registry=https://registry.npm.taobao.org全局安装vue-clisudo cnpm install -g @vue/cli查看vue版本vue -V再到想要创建项目的目录创建vue create test...原创 2019-06-28 11:18:27 · 726 阅读 · 0 评论 -
vue-router路由懒加载
定义也叫延迟加载,即在需要的时候进行加载,随用随载为什么需要像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时,进入首页不用一次加载过多资源...原创 2019-06-04 16:01:00 · 1742 阅读 · 0 评论 -
vue-router组件内的导航守卫
【示例】:用户进入user组件之前取路由值执行alert用户改变query参数,触发alert(等价于watch $route)<script> export default { name: "User", mounted:function(){ console.log('mounted') }, ...原创 2019-06-04 14:17:52 · 1415 阅读 · 0 评论 -
vue-router进阶
引言除了从头学vue-router补充下剩下的vue-router内容过渡动效vue的动画【目的】:实现一个按钮,点击后文字消失/出现,呈过渡效果,如下List.vue:<template> <div> <!--show取反--> <button @click="show =!show">show/hid...原创 2019-06-04 10:11:46 · 110 阅读 · 0 评论 -
从头学vue-router
引言首先用vue-cli脚手架创建一个干净的vue项目,具体如何创建看官网。然后vue的单组件与路由中我分析了项目的结构,并在该文中进行进一步修改实现如下页面。现在把’welcome‘给删了,得到如下。点击’列表页‘多页应用和单页应用每一次页面跳转的时候,服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用。打开vue.js官网,查看network,发现...原创 2019-06-02 21:55:14 · 316 阅读 · 0 评论 -
vue带路由的生命周期详解
引言之前我有写过vue生命周期详解,但这个是最简单的不用vue-cli直接script引入vue.js的生命周期分析。其实也就是单个vue实例的生命周期。为了想清楚带路由的vue项目中生命周期,我就根据官网搭建了一个基于webpack模板的vue项目,具体见vue的单组件与路由,这里面描述了我怎么对初始项目的修改,实现了下面这个页面。(一个简单的很丑的页面)。如果不是想自己实现,只是看看生命周...原创 2019-05-23 16:29:43 · 2484 阅读 · 1 评论 -
vue实例和组件的区别
引言上次写vue单组件项和路由的时候,想到一个问题。new Vue({…})是一个Vue实例,那么组件是Vue实例吗?分析之前说了,有两种开发方式。一个是基于浏览器的(即直接在script中引入main.js),还有一个是vue-cli搭建出来的基于命令行的开发方式(一个vue项目),具体见vue单组件与路由因为实际项目大部分都用命令行开发方式,所以还是说命令行开发方式里的组件。在项目的...原创 2019-05-23 15:50:43 · 4587 阅读 · 0 评论 -
vue单组件与路由
引入Vue的两种方法1.script直接引用把vue.js下载到本地文件中,直接script引用。vue.js中定义了function Vue (options){…},所以在引入了vue.js的html文件中的script可以new一个Vue的实例。<!DOCTYPE html><html lang="zh-vn"><head> <me...原创 2019-05-23 00:18:12 · 609 阅读 · 1 评论 -
Vue原理分析
引言vue最独特的特性之一就是响应式系统,赋予框架重新渲染的能力,其重要组成部分就是变化侦测,当数据变化时会通知视图进行相应的更新。本文主要是分析变化侦测的原理。主要分为两个阶段,一个是初始化,一个是更新视图初始化阶段【分析】:首先创建一个最外层的实例,new一个MVVM它的内部,有两个方向一个是创建Observer,劫持/监视data中的所有层次的属性。同时为每个属性创建了另外的对...原创 2019-05-22 10:04:06 · 173 阅读 · 0 评论 -
vue计算属性computed
主要通过代码实现data里面是放数据computed里是对data里的数据处理,返回一个处理后的值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><bo...原创 2019-05-20 17:44:53 · 182 阅读 · 0 评论 -
v-model及其修饰符的使用
v-model预期:随表单控件类型不同而不同限制: 在input textarea select中使用修饰符:.lazy .number .trim基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title...原创 2019-05-20 16:56:32 · 2259 阅读 · 0 评论 -
vue虚拟dom解读
文章目录1. 浏览器渲染页面的过程2. 重绘和回流3. vue的优点3.1 操作真实dom的代价3.2 虚拟dom的好处3.4 虚拟dom的创建及最终转化为真实dom3.3 diff算法1. 浏览器渲染页面的过程输入url地址–>访问dns域名解析服务器解析url地址为ip地址–>找到该ip地址下的服务器的web站点管理工具->根据端口号访问对应的project文件夹–>...原创 2019-08-30 18:08:11 · 364 阅读 · 0 评论