Vue
wdapp
May the force be with you !
展开
-
Vue.js异步更新DOM策略及nextTick
本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析,需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。引入:DOM的异步更新<template> <div> <div ref="test">{{test}}</div> <button @click="handle...转载 2020-02-24 23:50:06 · 447 阅读 · 0 评论 -
Vue v-model语法糖
v-model语法糖我们可以使用v-model对input进行双向绑定 <input v-model="message"></input>v-model 语法糖本质是 :value="message" @input="onInput"<input :value="message" @input="onInput"></input>...原创 2020-02-17 18:17:00 · 1240 阅读 · 0 评论 -
Vue 自定义指令
Vue自定义指令定义通过directive方法,配合钩子函数及参数定义指令定义全局自定义指令// js Vue.directive('focus', { inserted (el, binding, vnode, oldVnode) { el.focus() console.log('inserted', el, binding, vnode,...原创 2020-02-17 18:13:45 · 177 阅读 · 0 评论 -
vue 渲染函数 & JSX
渲染函数 render通过渲染函数渲染组件Vue.component('myComponent', { render (h) { // createElement return h( 'div', // HTML tag、自定义组件、异步组件 { // 属性对象 attrs: { // 标签属性 id: 'wrap'...原创 2020-02-16 21:40:36 · 308 阅读 · 0 评论 -
Vue 异步组件&路由懒加载
异步组件异步组件介绍在开发大型项目的时候,我们会把大型项目根据组件分割为小块代码,然后异步加载代码块,这样可以让首屏部分代码块优先加载,加快首屏渲染速度,其他代码块在需要的时候再加载,加载过的代码块会被缓存起来,以便复用重新渲染。异步组件声明异步组件声明有两种方式,通过工厂函数Vue.component('async-example', function (resolve, ...原创 2020-02-14 21:12:46 · 735 阅读 · 0 评论 -
Vue 插件及Vue.use源码分析
### 插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:1. 添加全局方法或者属性。如: vue-custom-element2. 添加全局资源:指令/过滤器/过渡等。如 vue-touch3. 通过全局混入来添加一些组件选项。如 vue-router4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。...原创 2020-02-13 20:21:37 · 198 阅读 · 0 评论 -
vue之virtual-dom篇
首先理解VNode对象一个VNode的实例对象包含了以下属性,参见源码src/vdom/vnode.jsconstructor ( tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Comp...转载 2020-02-12 10:13:49 · 264 阅读 · 0 评论 -
vue-router实现原理及两种模式分析
之前用Vue开发单页应用,发现不管路由怎么变化,浏览器地址栏总是会有一个'#'号。当时检查自己的代码,没有发现请求的地址带'#',当时也很纳闷,但是由于没有影响页面的渲染以及向后台发送请求,当时也没有在意。最近看了一下vue-router的实现原理,才逐渐揭开了这个谜题。vue-router 的两种方式(浏览器环境下)1. Hash (对应HashHistory)hash(“#...转载 2020-02-11 12:12:03 · 1280 阅读 · 0 评论 -
Vue 双向绑定
Vue 双向绑定MVC模式以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新MVVM模式MVVM模式就是Model–View–ViewModel模式。它实现了View的变动,自动反映在 ViewModel,反之亦然。 我对于双向绑定的理解,就是用户更新了View,Model的数据也自动被更新了,这种情况...转载 2020-02-10 22:20:23 · 180 阅读 · 0 评论 -
Vue-cli 2.0 config配置
Vue-cli 2.0 config/index.js 配置'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = { /** ...原创 2020-02-09 16:41:01 · 1859 阅读 · 0 评论 -
Vue CSS动画原理
v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-...原创 2020-02-08 18:26:56 · 86 阅读 · 0 评论 -
Vue 插槽 新语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 插槽 新语法</title> <style> * { margin: 0; padding: 0; } .header {...原创 2020-02-08 00:51:31 · 323 阅读 · 0 评论 -
Vue 插槽 废弃语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 插槽 废弃语法</title> <style> * { margin: 0; padding: 0; } .header {...原创 2020-02-08 00:50:08 · 447 阅读 · 0 评论 -
Vue组件通信方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue组件通信方式</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...原创 2020-02-07 17:33:42 · 103 阅读 · 0 评论 -
Vue生命周期钩子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue生命周期钩子</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...原创 2020-02-07 17:31:57 · 115 阅读 · 0 评论