随笔分类 -  vue

vue3.0系列一：升级、语法
摘要：1, 使用脚手架升级命令： vue add vue-next。自动更新vuex，vue-router依赖包到最新的版本。被弃用语法错误提示。部分内容被自动修改。 若使用webpack，需手动升级各个依赖包，更改语法。 新增 ：@vue/compiler-sfc 弃用：vue-template-com 阅读全文
posted @ 2020-12-24 20:22 毛栗的demo 阅读(377) 评论(0) 推荐(0)
vue原理二：vdom、diff，模板编译，渲染过程，前端路由 及总结。
摘要：1，Virtual DOM 虚拟算法 DOM操作消耗性能，js 执行非常快，所以， 虚拟DOM就是 用js 模拟DOM结构：（tag，childrens，className...）以最小的更新范围更新DOM 核心概念：h（返回js DOM对象）、patch（对比），diff，key 2，diff算法 阅读全文
posted @ 2020-12-24 20:20 毛栗的demo 阅读(166) 评论(0) 推荐(0)
vue原理一：组件，响应式。
摘要：1，组件化：MVVM：Model - viewModel - view。 model：即data的数据 view：视图 viewModel：vue的作用，连接model及view 2，Vue响应式：组件data的数据变化，立刻触发视图的更新 const object1 = {}; Object.de 阅读全文
posted @ 2020-11-05 11:10 毛栗的demo 阅读(297) 评论(0) 推荐(0)
vue高级知识：自定义v-model 、nextTick, slot插槽
摘要：1 , v-model //parent <hello-world v-model="msgPar"></hello-world> //child<input type="text" :value="price" @input="price=$event.target.value"> 2，slot插 阅读全文
posted @ 2020-11-03 19:55 毛栗的demo 阅读(188) 评论(0) 推荐(0)
vue基础（一）：自定义全局组件、计算属性、侦听器、v-if与v-show、$event
摘要：1，自定义全局组件：use，组件提供install方法。 // template.js import Temp from 'temp.vue' export default { install: function(Vue){ Vue.component('template-name', Temp) 阅读全文
posted @ 2020-10-27 11:03 毛栗的demo 阅读(674) 评论(0) 推荐(0)
vue高级知识：mixin、自定义指令
摘要：一，混入mixin 当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 // 定义一个混入对象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { con 阅读全文
posted @ 2020-10-15 11:04 毛栗的demo 阅读(258) 评论(0) 推荐(0)
vue - 异步组件 、动态组件
摘要：动态组件：（缓存组件） //重新创建组件 <component :is="componentName"></component> //缓存动态组件的状态，不用重新创建组件 <keep-alive> <component :is="componentName"></component> </keep- 阅读全文
posted @ 2020-10-13 16:33 毛栗的demo 阅读(411) 评论(0) 推荐(0)
vue - 组件间的通信方式
摘要：方式一：prop数据传递 // parent <child :data="parentData"></child> // child props:[ 'data' ] 方式二：自定义事件$emit 。 * v-bind:title.sync : 在V3已被启用。使用v-model传入组件值。 一：v 阅读全文
posted @ 2020-10-12 17:15 毛栗的demo 阅读(157) 评论(0) 推荐(0)
vue2.0-处理边界情况
摘要：一，访问根实例 （new Vue） this.$root.dataVal 二，访问父组件。维护扩展性低 this.$parent || this.$parent.$parent 三，访问子组件 this.$ref.refAttribute 四，依赖注入（处理组件层层嵌套的关系） //父组件：提供给后 阅读全文
posted @ 2020-09-03 15:24 毛栗的demo 阅读(72) 评论(0) 推荐(0)