![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2.0
文章平均质量分 60
tang丶有年
这个作者很懒,什么都没留下…
展开
-
【ESLint】Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多,需要统一每个项目的代码规范,于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及修改为prettier风格。对比肉眼可见的格式化风格差异,并且以字符串单/双引号,每行结尾有无分号,object对象最后一项有无尾逗号作为判断依据VSC原创 2022-03-04 14:46:59 · 3994 阅读 · 1 评论 -
多个table表格使用v-if切换展示时,会导致table表格渲染内容混淆
问题:多个table表格使用v-if切换展示时,会导致table表格渲染内容出错解决方法:给table加个 key产生原因:vue在渲染组件的时候, 会先按照key判断是否是同一组件,如果没有则按照标签名,这样会导致渲染 el-table组件的时候, 多个被识别成同一个导致渲染内容混淆...原创 2021-09-26 10:51:55 · 630 阅读 · 0 评论 -
vue源码学习(5)小结
1.vue.$mount作用:手动地挂载一个未挂载的实例到元素上返回值:实例自身示列:// 声明一个Vue的实例let MyComponet = Vue.extend({ template:`<div>Hello!<div>`})// 创建实例并挂载到 id 为#app的Html元素上new MyComponet().$mount('#app')// 或者 先渲染再挂载let componet = new MyComponet().$mount()d原创 2020-10-12 09:40:25 · 133 阅读 · 0 评论 -
vue源码学习(4)vm.$mount()
1. vm.$mount的使用vm.$mount的作用:手动地挂载一个未挂载的实例到元素上vm.$mount官网示例vm.$mount的源码//原函数// Vue.prototype.$mount = function (// el,// hydrating// ) {// el = el && inBrowser ? query(el) : undefined;// return mountComponent(this, el, hydrating)原创 2020-10-10 16:34:51 · 1651 阅读 · 0 评论 -
vue源码学习(3)Vue.nextTick()
1. Vue.nextTick的使用Vue.nextTick的使用的作用:Vue.nextTick官网示例Vue.nextTick和平时代码中使用的this.$nextTick原理一样://$nextTick 源码Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this)};...//Vue.nextTick源码部分var callbacks = []var pending = falsevar use原创 2020-09-29 16:05:28 · 324 阅读 · 0 评论 -
vue源码学习(2)Vue.set()
1. Vue.set的使用Vue.set的作用:向响应式对象中添加一个属性,并让其也变成响应式的2. Vue.set的源码 function set (target, key, val) { if (isUndef(target) || isPrimitive(target) ) { warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target))));原创 2020-09-28 11:55:49 · 124 阅读 · 0 评论 -
vue源码学习(1)Vue.extend()
1. Vue.extend的使用Vue.extend的作用:创建一个子类,然后让它继承Vue身上的一些功能。Vue.extend官网示例2. Vue.extend的实现源码export function initExtend (Vue: GlobalAPI) { /** * Each instance constructor, including Vue, has a unique * cid. This enables us to create wrapped "child原创 2020-09-25 17:17:30 · 217 阅读 · 0 评论 -
vue 实现个简易版(4)
上一篇文章实现了v-bind, v-on指令以及methods等,这一篇来实现computed和watch;1. computed在Vue实例中通过this可以直接访问computed中的计算属性,而且它可以实现缓存,并且只有当依赖的数据变化才会更新;1.1 ComputedWatcher需要定义一个ComputedWatcher,它跟Watcher基本相同,只是再设置值的时候,需要跟新缓存的老值class ComputedWatcher { constructor(vm, expr, c原创 2020-09-17 11:10:41 · 114 阅读 · 0 评论 -
vue 实现个简易版(3)
上一篇文章实现了数据的双向绑定,这一篇来实现v-bind, v-on指令以及methods等。1. v-model语法糖指令拆分处理1.1 首先来修改判断是否是指令的函数isDirective(attrName){ return attrName.startsWith('v-on:')||attrName.startsWith('v-')}1.2 再修改使用指令对应工具函数的部分compileElement(node){ let attributes = node.attri原创 2020-09-17 11:05:58 · 121 阅读 · 0 评论 -
vue 实现个简易版(2)
上一篇文章实现了模板数据展示到视图上面,这一篇来实现数据的双向绑定。Watcher实现一个Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。这里的实现需要结合发布订阅者模式。1. Dep类的实现完成对于依赖的收集和触发class Dep{ constructor(){ this.subscribers = new Set() } addSub(sub){ this.subscribers.add(sub) } notify(){ this.subsc原创 2020-09-16 10:15:46 · 100 阅读 · 0 评论 -
vue 实现个简易版(1)
从零开始一步一步实现个简易版vue,包含响应式,computed,watch,methods等原理。MVVM原理Vue2.0 响应式原理最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的;关于Vue响应式机制,Object.defineProperty()之前的文章 vue 响应式机制简述 已经介绍过了而要实现Vue,需要从以下几步开始:实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。实现一个订阅者W原创 2020-09-16 10:15:10 · 120 阅读 · 0 评论 -
vue 响应式机制简述
先思考一个问题?如何让变量b的值是a的10倍:let a = 3let b = a * 10console.log(b) // 30但是如果当a不断变换,b并不会随着a的变换而变化,因为它是命令式的,并不存在同步关系;let a = 3let b = a * 10console.log(b) // 30a = 4b = a * 10console.log(b) // 401.数据劫持那如何让他们俩保持同步呢?这里就关系到Object.defineProperty这个方法。对原创 2020-09-10 16:47:18 · 158 阅读 · 0 评论 -
vue2.0组件传值
vue是基于数据驱动,主要关注数据动态变化的过程即可。先放完整代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, in原创 2019-01-16 17:14:34 · 180 阅读 · 0 评论 -
vue2.x自定义指令
直接复制粘贴代码即可使用:点击表格显示输入框,点击其它空白处消失。<!DOCTYPE html><html> <head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://c原创 2019-01-17 10:42:55 · 213 阅读 · 0 评论