vue高级特性
vue高级特性
啵雨的博客
要学习的还有很多!!
展开
-
vue----如何抽离公共逻辑
vue----如何抽离公共逻辑1》使用:混合相关配置信息minix.js:当点击按钮,触发了showName事件,说明minix.js的相关逻辑插入进来了2》缺点:什么叫多个命名冲突呢:比如多个minix的 data里面都有 city,会造成冲突;但是mounted里面的函数可以融合。...原创 2020-07-24 16:45:36 · 1008 阅读 · 0 评论 -
vue---如何缓存组件(keep-alive)
vue—如何缓存组件(keep-alive)1》当我们进行频换切换,不需要重复渲染的时候,比如tab栏切换,就可以利用keep-alive缓存组件,不需要重复加载,也是提高vue性能的一个方式。2》例子:(B,C组件省略)进行点击abc按钮操作,看控制台的输出:①.若把keep-alive组件删除:点击a ---- A mounted点击b ---- A destroyed B mounted点击c ---- B destroyed C mounted再点击a — C destroye原创 2020-07-24 16:07:31 · 2364 阅读 · 0 评论 -
vue---如何异步加载组件
vue—如何异步加载组件1》通常来讲我们在a组件里引入b组件时,这样引入就可以了,属于同步加载组件2》当我们引入一个超大的组件时候就可以用异步加载,什么时候用,什么时候加载,可以提高性能。<abc v-if=’k‘ @click='k=true'></abc>components:{ abc:()=> import(../../abc.vue)}这样当k为true的时候才会异步加载abc组件...原创 2020-07-24 15:41:34 · 1022 阅读 · 0 评论 -
vue--动态组件
vue–动态组件一.用法:下图放在data()里面:is绑定组件名称,即绑定一个data,这个data等于引入的组件名称二.实际应用:新闻详情页1》模拟数据:2》渲染数据:原创 2020-07-17 18:26:01 · 137 阅读 · 0 评论 -
vue--slot插槽
vue–slot插槽vue–slot插槽这个总结的挺好 看这个!转载 2020-07-17 17:37:15 · 82 阅读 · 0 评论 -
vue-$nextTick 和 $ref
vue-$nextTick 和 $ref1》上述代码可以看到<ul ref="ul1"> 给ul绑定了一个ref属性,在下面可以用$refs.ul1直接获取ul这个dom阶段2》按照代码,点击一次‘添加一项’,会添加三个li标签时间戳,加上原来有的abc三个li标签,li的个数应该有六个 但是输出li的个数只有三;点击第二次‘添加一项’,会再添加三个li标签时间戳,加上原来有的abc三个li标签,li的个数应该有九个 但是输出li的个数只有六;这是因为 list(data)改变的原创 2020-07-17 16:31:12 · 248 阅读 · 0 评论 -
v-model的原理与组件自定义v-model
v-model的原理与组件自定义v-model根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" 和 @input="", 就像下面这样// 标准写法<input v-model="name">// 等价于<input :value="name" @input="name = $event.target.value">// 在组件上面时<div :value="name" @input="name = $原创 2020-07-17 14:58:57 · 641 阅读 · 0 评论