![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
曾皙
加油
展开
-
MVC 与 MVVM的
MV-C 与 MV-VM的区别1.MVVM对视图层(v)与模型层(m)的分离MVC流程图MVVM流程图好处就是Controller(控制器)的消失,减少对DOM的操作,从而降低了耦合性比如一个js有通过一个class去找一个DOM,当这个class改变就要去改JS文件,这个就是高耦合性Model(模型)代表数据内容的访问层View(视图)视图就是用户屏幕上看的到的解构,布局和外观(UI)Controller (控制器)业务逻辑:对DOM的绑定,对数据的修改ViewMod原创 2021-01-04 18:51:23 · 223 阅读 · 0 评论 -
剖析Vue数据劫持的实现原理
原文:https://github.com/DMQ/mvvm几种实现双向绑定的做法发布者-订阅者模式(backbone.js) 脏值检查(angular.js) 数据劫持(vue.js)发布者-订阅者模式:一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是vm.set('property', value),脏值检查:angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过setInterval()定时轮...原创 2020-07-09 12:46:09 · 1656 阅读 · 0 评论 -
Vue $nextTick
使用场景1.当改变了DOM中的数据后,立马去获取字段DOM中的值2.当我们在watch侦听器中改变了数据,立马用这一些数据去做一些操作,这里为什么不可以呢?因为watch其实应该也算是会被推到队列中去执行,而nextTick就是等当前DOM更新,也就是队列全部完成后执行3.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因...原创 2020-03-06 20:49:28 · 828 阅读 · 0 评论 -
在vue-cli中使用vue-property-decorator装饰器
安装npm i -s vue-property-decorator如果你的项目是安装了TS那么就可以直接使用,如果没有安装TS但是还是想用vue-property-decorator装饰器那么就还需要去配置一下了使用vue-property-decorator要用babel转义,因为我们的项目中是没安装TS的是直接使用在babel.config.js文件中module.ex...原创 2019-10-15 15:49:17 · 4106 阅读 · 0 评论 -
vue中 methods computed watch filters区别
在vue中事件,计算属性,帧听器,过滤器的区别其实共同点:修改数据事件methods和计算属性computed作用:对数据进行逻辑运算区别:计算属性是基于它们的响应式依赖进行缓存的,是依赖于data中的值改变而响应改变过滤器filters作用:对数据进行修饰注意:这个和事件和计算属性的区别一个是进行逻辑运算一个是修饰,是不一样的帧听器watch和计算属性compu...原创 2019-07-29 21:06:04 · 680 阅读 · 2 评论 -
sync修饰符的使用
为什么使用sync再vue中官网的介绍:我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源目的:再子组件去改变父组件的值的时候会有明显的代码样式,方便维护,为什么要这样为什么不用v-molder,因为v-model中已经说明了不要直接去改变v-model中的值,可以去拷贝在改变,在传值...原创 2019-10-10 16:10:43 · 314 阅读 · 0 评论 -
vue总结系列 --- 插槽slot
前因这个是我这个系列的第二篇,这一篇文章我也修改过三次(2019-9-10)我是想以vue官方文档为基础,来进行理解,有人说有官方文档,还要写自己的文章干嘛,我的用意其实是我确实想把官网文档中的案例全部写一遍,来加深自己对这个知识点的理解,因为看还是不如写吧,我在吧我遇到的问题,和我的理解,写出来,以便我以后的忘记,和与我有类似经历的人不用再浪费时间插槽其实就是在组件的innerHTM...原创 2019-04-02 17:34:25 · 297 阅读 · 0 评论 -
在vue-cli中使用vue-router的学习笔记
以前不会vue-cli的时候学过router,当时的写法和在vue-cli中的写法还是有一些不一样的,但是我以后应该还是会用vue的单文件写小程序啊什么的所以我就吧我学习的过程全部记录下来router创建那么问题来了main.js是如何接收,接收的是什么,和怎么书写?下面我们来一一解答首先我们在src的文件下新建一个router文件,下的index.js我们在js中引入vue组件,...原创 2019-05-30 10:40:31 · 896 阅读 · 0 评论 -
多个元素和列表的过渡
多个元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多个元素的组件的过渡动画</title> <script src="./node_modules/vue/dist/vue.js"></sc...原创 2018-11-19 21:14:45 · 216 阅读 · 0 评论 -
vue.js中添加动画
通过触发事件,改变data中的值,或者改变点击标签元素上的属性值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./node_modules/vue...原创 2018-11-19 20:30:29 · 991 阅读 · 0 评论 -
Vue.js使用animate.css框架
1.如何使用animate框架<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue中css动画的原理</title> <script src="script/vue.js"></script> <li...原创 2018-11-18 21:46:27 · 676 阅读 · 0 评论 -
Vue.js使用keyframes动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue中css动画的原理</title> <script src="./node_modules/vue/dist/vue.js"></script> <st...原创 2018-11-18 21:46:42 · 5967 阅读 · 0 评论 -
Vue.js动画和过渡
vue中的过渡与动画过滤把需要添加动画效果的DIV放到transition标签之后就会发生以下3个步骤 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名(等下要写的6个类名)。 如果过渡组件提供了JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。 如果没有找到 JavaScript 钩子并且也没有检...原创 2019-06-24 18:48:40 · 442 阅读 · 0 评论