Vue学习笔记
文章平均质量分 75
学习Vue的过程中的笔记
JohnKeatinghhh
埋まる、埋まる
展开
-
antd-vue树形控件实现默认展开全部节点
antd-vue树形控件实现默认展开全部节点背景分析解决方案树形控件官方文档版本信息: "vue":"2.6.11" "ant-design-vue": "1.7.0" "vuex": "3.1.1"背景在做项目的时候遇到需要默认选中和展开所有节点的需求。自动选中所有节点a-tree的v-model默认就是checkedKeys,因此默认选中所有节点(父节点和子节点),只要在created周期钩子里将checkedKeys初始化成所有子节点就好了。自动展开所有节点:defaultE原创 2021-03-19 15:07:53 · 11696 阅读 · 0 评论 -
vue watch 里的 deep 和 immediate
vue watch 里的 deep 和 immediate原创 2021-02-05 11:08:03 · 588 阅读 · 1 评论 -
手动实现拥有两个单向关联的checkbox的树形组件
手动实现拥有两个单向关联的checkbox的树形组件数据基础架构最近在做项目的时候,遇到了一个需求:如图所示,这是一个树形组件(n叉树),父节点嵌套子节点。每个节点都有查看和编辑两个权限,分别对应两个checkbox。业务逻辑如下:如果后代节点中有一个被选中,那么祖先节点一定会被选中;而选中分为全选和半选,例如:2. 页面顶部有两个checkbox,用来控制全部的节点:3. 如果查看权限被关闭,那么编辑权限也会被置为空选且禁用。第一点都可以通过antv的树形组件几行代码轻松实现:原创 2021-01-11 16:15:54 · 871 阅读 · 0 评论 -
关于vue的属性不会做自动类型转换
关于vue的属性不会做自动类型转换今天做项目的时候,遇到一个问题: <a-select v-model="value" :open="value.length" >本意是当value里没有东西的时候(length === 0) 不显示下拉菜单,但是却报了这样的错误:[Vue warn]: Invalid prop: type check failed for prop “visible”. Expected Boolean, got Number原创 2021-01-08 14:27:42 · 634 阅读 · 0 评论 -
理解vue中less的scoped和/deep/工作原理
理解vue中less的scoped和/deep/工作原理scoped/deep/实战总结scopedvue项目一般是单页面、多组件,整个项目共用一个css样式表,有时候我们在写组件的过程中并不希望组件的样式污染全局作用域(毕竟不同组件之间重名的class很正常),因此我们会在组件的样式标签上加上scoped,例如下面这个最基本vue组件框架:<template>...</template><script>import ...export defualt原创 2020-12-11 23:18:52 · 9035 阅读 · 5 评论 -
【转载】vue项目main.js文件下import router from ‘./router‘默认导入router文件夹下index.js的原因
【转载】vue项目main.js文件下import router from './router'默认导入router文件夹下index.js的原因在vue项目文件夹下的src目录的main.js文件中,是这么引入router的:import router from './router'等效于import router from './router/index.js'这个不是vue的规定而是node加载模块的方式,当require(’./router’)(import会被转为require),n转载 2020-12-02 23:51:03 · 3792 阅读 · 0 评论 -
记一次简单的防止页面加载过程中的抖动
记一次简单的页面防抖今天在做项目的时候遇到一个问题:一个很简单的页面,但是有一个问题:如果网速比较慢,比如说我在Chrome里模拟3G网:那么在图片加载的过程中,用户会感觉到明显的抖动,为了解决这个问题,可以在图片的外层加一个wrapper来占位:<div class="wrapper"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide> <img原创 2020-11-21 22:56:28 · 674 阅读 · 2 评论 -
vue动画特效-渐变动画和@keyframes
vue动画特效-渐变动画和@keyframes过渡原理实现@keyframes动画使用animated.css同时使用过渡和@keyframes动画今天学习vue的动画的时候,感觉机制有点繁琐,总结一下。过渡Vue里使用动画需要用到一个封装好的组件<transition>,Vue官方文档是这么介绍的:Vue 提供了 <transition>的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态原创 2020-11-14 17:08:33 · 2589 阅读 · 0 评论 -
【小白读vue官方文档】vue给自定义组件设置v-model
vue给自定义组件设置v-model众所周知v-model是一个语法糖,通过v-bind实现父组件向子组件传指,通过$emit实现子组件向父组件传指,这样就完成了双向数据绑定。一个组件上的 v-model默认会利用名为 value的 prop 和名为 input的事件,但是像单选框、复选框等类型的输入控件可能会将 valueattribute 用于不同的目的。model选项可以用来避免这样的冲突:如果是原生的html元素,实例对象上有默认的value和input属性,v-model很自然地就把va原创 2020-11-02 19:51:14 · 653 阅读 · 2 评论 -
【小白读vue官方文档】vue-model给复选框绑定值
vue-model给复选框绑定值个人理解今天看vue官方文档的时候,有句话不理解:复选框<input type="checkbox" v-model="toggle" true-value="小猫" false-value="小狗">// 当选中时vm.toggle === '小猫'// 当没有选中时vm.toggle === '小狗'这里的 true-value和 false-valueattribute 并不会影响输入控件的 valueattribute,原创 2020-11-02 16:58:47 · 977 阅读 · 0 评论 -
【小白读vue官方文档】vue中非props属性、$attrs和禁用 Attribute 继承
vue中非props属性一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。举个例子:自定义一个test组件,并接受父组件传来的test1 test2 class style 属性,其中 test1 属性在props里被接收,并在模板中显示用$attrs显示。关于$attrs,vue的官方文档这么描述:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和 style除外)。 &原创 2020-11-02 11:10:07 · 2002 阅读 · 5 评论 -
vue中报错: Component template should contain exactly one root element
vue中报错 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.今天写练习的时候遇到一个问题:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-11-01 20:17:55 · 1178 阅读 · 0 评论 -
vue中通过bus实现非父子组件通信
vue中通过bus实现非父子组件通信需求实现众所周知,vue中父可以通过子的props属性传值,子组件则可以通过$emit()向父组件传递数据,但如果是非父子组件,则可以通过bus来进行传值,这种设计模式叫做发布-订阅模式。需求假设这样一个应用场景,页面上有两个元素,我想在单击一个元素的时候使得另一个元素的内容变成和这个元素一样的。点击内容1之后,变成下面这样的效果:实现页面的结构很简陋,如下:其中test是我们将用vue注册的自定义组件。<!DOCTYPE html>&l原创 2020-10-31 19:44:46 · 272 阅读 · 0 评论 -
function和箭头函数不同的情况下,vue中this的指向
function和箭头函数不同的情况下,vue中this的指向vue实例methods属性中的回调函数的this都会指向vue实例。举个例子: const vm = new Vue({ el:'#app-3', data:{ inputValue:'', list:[] }, methods:{ h原创 2020-10-27 21:52:17 · 756 阅读 · 0 评论