![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
CHunQIu12
这个作者很懒,什么都没留下…
展开
-
Vue源码分析(MVVM)
代码如下:function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; this.$options.beforeCreate && this.$options.beforeCreate(); //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data;原创 2021-05-06 08:22:05 · 94 阅读 · 0 评论 -
Vue源码分析(Compiler)
解析每个元素中的指令/插值表达式,并替换成相应的数据可以编译模板,解析指令、小胡子表达式还可以页面首次渲染,以及修改数据变化后的重新渲染视图代码如下:function Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是 则根据选择器 去查找对应的元原创 2021-05-06 02:01:21 · 126 阅读 · 0 评论 -
仿小米商城(下)
这里就是总结了一些在写项目时遇到感觉比较难的一些技术点购物车结算的商品数据,传送到vuex中,确认订单获取vuex中state数据渲染页面原创 2021-05-06 01:48:42 · 104 阅读 · 0 评论 -
仿小米商城(上)
技术栈Element-UIAxiosVueVue-routerVuexVuex-persist项目模块梳理原创 2021-05-06 01:41:56 · 80 阅读 · 0 评论 -
梦学谷会员管理系统(下)
这个项目是我们项目小组分工合作完成的,就写一下我写的员工管理模块的技术点编辑、修改功能使用同一个对话框点击编辑的表单回填新增或者修改数据原创 2021-05-06 01:32:45 · 149 阅读 · 0 评论 -
梦学谷会员管理系统(上)
技术栈Element-UIAxiosVueVue-router项目模块以及功能点梳理原创 2021-05-06 01:14:48 · 101 阅读 · 0 评论 -
电商后台管理系统(下)
这里就是总结了一些在写项目时遇到感觉比较难的一些技术点项目各个模块的技术难点登录注册Element-UI自带的表单验证设置axios请求拦截器,在请求头挂载Authorization属性发送登录axios请求用户管理编辑用户数据功能权限管理分配权限商品管理动态参数、静态属性在计算属性里面计算当前选择的是否三级分类、当前选择的是动态还是静态的添加数据判断选择的是否是三级分类添加动态、静态的数据...原创 2021-05-06 01:02:21 · 120 阅读 · 0 评论 -
电商后台管理系统(上)
技术栈Element-UIAxiosEchartsVueVue-routerVuexVuex-persist项目模块梳理原创 2021-05-06 00:26:06 · 175 阅读 · 0 评论 -
axios的封装
首先,在项目src中创建一个http文件夹,文件夹中创建一个index.js文件,在这个文件中配置一个网络请求的默认配置和拦截器的配置,然后将配置好的axios抛出去然后我们再创建一个API文件夹,这里放置项目各个模块封装好的接口将抛出去的数据写成对象形式,方便我们在vue中调用...原创 2021-05-05 21:48:48 · 72 阅读 · 0 评论 -
vuex的核心概念和运行机制
Vuex是什么呢?Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储和管理程序的所有组件的数据核心概念:state 所有的数据都存储在state中 state是一个对象mutations 可以直接操作state中的数据actions只能调用mutations的方法 ,包含异步操作,使用dispatch调用getters类似计算属性实现对state中的数据做一些逻辑性的操作modules 将仓库分模块存储运行机制:在组件中通过dispatch来调用actio原创 2021-05-05 21:40:22 · 85 阅读 · 0 评论 -
vue-router钩子函数
路由导航守卫分为全局路由守卫、路由独享守卫、组件路由守卫全局路由守卫router.beforeEach() 全局前置守卫router.afterEach() 全局后置守卫路由独享守卫beforeEnter()组件路由守卫beforeRouteEnter 进入这个组建路由之前调用beforeRouteUpdate 同一页面,刷新不同数据时调用beforeRouteLeave 离开当前路由页面时调用都有三个参数:to 即将要进入页面的路由信息from 离开路原创 2021-05-05 21:31:31 · 64 阅读 · 0 评论 -
$nextTick()
官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。我们可以理解成,Vue 在更新 DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新,所以nextTick本质是一种优化策略简单理解:因为Vue的异步更新队列,$nextTick是用来知道什么时候DOM更新完成的使用场景:如果想要在修改数据后立刻得到更新后的DOM结构,可以使用$nextTick第一个参数为:回调函数(.原创 2021-05-05 21:16:13 · 191 阅读 · 0 评论 -
修改数据页面不更新的原因和解决方案
我们使用vue会碰到数据更新,但是视图并未改变的情况。造成的原因是:因为对象是引用类型,直接改变对象的某属性但是指向地址没变,vue不一定能监控到,所以当我们新建一个对象,就直接改变了它的指向地址。解决方案:$forceUpdate() vue自带的强制更新this.$forceUpdate() 强制视图更新Vue.set()Vue.set( target, propertyName/index, value )参数:target:要修改的对象或数组propert.原创 2021-05-05 20:30:39 · 320 阅读 · 0 评论 -
v-for中的key值的作用
key的作用是什么呢?key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点在使用vue列表渲染v-for时,我们最好在后面加上: key,它的作用是当v-for所绑定的数据发声变化时只重新渲染变化的项,而不是重新渲染整个列表...原创 2021-05-05 20:10:06 · 96 阅读 · 0 评论 -
v-if和v-for的优先级
注意:不推荐v-if和v-for同时使用在同一个元素上v-if和v-for同时使用,在Vue 处理指令时,v-for 比 v-if 具有更高的优先级<ul v-if="isFalse"> <li v-for="item in users" :key="item.id" > {{ item.name }} </li></ul>如果两者同时存在,可在v-for的外层包裹元素这里来进行v-if判断,如果放在一起,每原创 2021-05-05 19:54:53 · 178 阅读 · 0 评论 -
v-if与v-show的区别
相同点 都可以动态控制着dom元素的显示与隐藏区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的性能对比v-if有更高的切换消耗v-show有更高的初始渲染消耗使用场景v-if适合运营条件不大可能改变的场景下v-show适合频繁切换...原创 2021-05-05 19:43:46 · 54 阅读 · 0 评论 -
Vue双向数据绑定原理
是结合订阅发布模式,通过object.defineProperty来实现数据双向绑定。observer会对data里面所有的属性进行数据劫持和数据代理,给数据对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。watcher是监听data里面所有的属性,当属性被改变之后才会被触发,自身必须有一个update()方法。compile对模版进行解析,将模板中的变量替换成数据,然后初始化渲染页面视图,添加监听数据的订阅者,一旦数据有变动,收到通知,就会去更新视图。v-model只是双向原创 2021-05-05 19:39:55 · 83 阅读 · 0 评论 -
史上最全组件传参方式
1.父传子 prop在父组件的子组件标签绑定一个属性,来进行传输参数<template> <div> <h1>父组件</h1> <!-- 子组件标签用绑定属性来传输数据 --> <Son :arr="list" /> </div></template>import Son from '子组件文件路径'<script scope>原创 2021-04-25 02:16:30 · 826 阅读 · 0 评论 -
Vue的常用指令
v-model : 多用于表单元素实现双向数据绑定v-for :循环数组或者jsonv-show :显示内容,通过display=block/none来控制元素隐藏显示v-hide : 隐藏内容,通过display=block/none来控制元素隐藏显示v-if: 显示与隐藏,通过dom元素的删除添加来控制元素隐藏显示v-bind:动态绑定,作用:及时对页面的数据进行更改v-text : 解析文本v-html: 解析html标签v-cloak:防止闪烁,该属性需配合样式使用v-pre: .原创 2021-04-12 23:26:03 · 78 阅读 · 0 评论