![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
aminsky0
坚持记录开发过程中的疑难点
展开
-
vue实现星级评分
1、vue实现星级评分实现效果实现代码<template> <div> <ul class="ulcss"> <li v-for="(item, index) in starList" :key="index"> <img v-if="item.isShowStar" src="../assets/star.svg" alt=""> <img原创 2021-10-15 17:34:17 · 2501 阅读 · 2 评论 -
vue实现马赛克功能
vue实现马赛克功能今天小猪实现了一个有趣的马赛克功能,感兴趣的可以看看。。。。一、安装image-mosaicnpm install image-mosaic小猪也就不墨迹了直接上代码二、实现马赛克代码<template> <div id="box"> <canvas id="canvas"></canvas> <button id='drawAll'>一键加码</button>原创 2021-07-14 16:36:50 · 2059 阅读 · 0 评论 -
深度选择器deep使用总结
深度选择器deep使用总结1、深度选择器有三种写法/deep/、>>>、::v-deep2、vue3使用 ::v-deep3、vue2使用 /deep/、>>>原创 2021-05-08 17:41:27 · 942 阅读 · 0 评论 -
vue中有哪些修饰符和事件修饰符
vue中有哪些修饰符和事件装饰符1、常见修饰符有.sync,.lazy,.passive(1).sync因为vue是单向数据流,从父组件传到子组件的数据,子组件如果修改数据会报错,加上.sync后子组件内部改变props属性值并更新到父组件中(2).lazyv-model双向数据绑定,输入框输入内容时视图就更新了,如果想要输入完所有数据再更新视图,可以通过添加.lazy实现光标离开后再更新视图<input type="text" v-model.lazy="value">(3).原创 2021-04-27 15:19:45 · 1019 阅读 · 0 评论 -
swiper移动端横向滑动问题处理
swiper移动端横向滑动问题处理一、swiper初始化问题数据加载的过程中使用v-if进行判断会导致一开始dom没有渲染,等数据加载完成才会渲染dom若是使用v-if会导致swiper初始化不成功new Swiper('.swiper-container', { mode: 'horizontal', freeMode : true, slidesPerView: 2, slidesPerGroup: 2, touchRatio: 1,原创 2021-04-25 15:57:01 · 1715 阅读 · 0 评论 -
vuex中mutation和action的区别
vuex中mutation和action的区别mutation 同步操作storeaction 异步操作mutation 然后修改store原创 2021-04-02 15:58:18 · 197 阅读 · 0 评论 -
computed和watch的区别
computed是计算属性1、 支持缓存,只有依赖数据发生改变,才会重新进行计算2、 不支持异步操作,当computed内有异步操作时无效,无法监听数据的变化3、. computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值4、 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed5、 如果computed属性属性值是函数,那么默认会走get方法;函转载 2020-11-24 14:29:03 · 210 阅读 · 0 评论 -
v-if和v-show的区别
v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;v-if有更高的切换消转载 2020-11-19 17:43:49 · 78 阅读 · 0 评论 -
vue+js实现视频的淡入淡出
vue+js实现视频的淡入淡出一个简单的视频淡入淡出效果如图小编直接上代码了有兴趣可以拷贝运行一下,谢谢<template> <div class="video-css"> <div class="videocss" ref="videodom" style="background-color:black;"> <video width="100%" ref="play" style="opacity: 1" :src="videoS原创 2020-06-17 13:16:36 · 530 阅读 · 0 评论 -
vue+canvas绘制时间轴
vue+canvas绘制时间轴最近在研究canvas绘制时间轴,直接上代码,希望分享能给大家带来帮助,效果如下:代码如下,可以拷贝到vue项目中直接预览<template> <div> <canvas id="time_line" width="1200" height="27"></canvas> </div></template><script>export default { nam原创 2020-06-08 19:15:51 · 1950 阅读 · 2 评论 -
vue created和mouted的区别
vue created和mouted的区别created在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图mouted在模板渲染成html后调用,通常初始化页面后,再对html的dom节点进行一些需要的操作原创 2020-06-04 15:08:33 · 485 阅读 · 0 评论 -
vue解析模板的解释
vue解析模板的解释通过查看vue源码,我们知道了虚拟dom,虚拟dom的构建需要将template解析成AST语法树,在转化成render函数,最后返回一个vnode虚拟dom节点。什么是AST?在VUE的mount过程中,template会被编译成AST语法树,AST是指抽象语法树,或者语法树,是指源代码中的抽象语法结构的树状表现形式解析实例实现将模板解析成AST<div> <p>{{name}}</p></div>将上面模板解析之后原创 2020-06-04 00:07:30 · 340 阅读 · 0 评论 -
vue虚拟dom的解释
vue虚拟dom的解释一、什么是虚拟dom虚拟dom就是用一个JS对象来描述一个DOM节点vdom就是用javascript描述的dom的树形结构,这个树结构包含整个dom结构的信息二、为什么要有虚拟dom1、js和jquery操作dom冗余混乱,耦合性高并且难以维护。2、一遍一遍渲染dom会造成浏览器性能损耗大的问题,通过vdom将dom的对比放到js层,判断不同之处选择新的dom节点进行渲染,大大节省了浏览器损耗三、diff算法简单描述,就是vdom新老dom的对比,获取不同之处渲染原创 2020-06-02 23:56:39 · 1091 阅读 · 0 评论 -
vue+element+less引入主题色
vue+element+less引入主题色第一步进入https://element.eleme.cn/#/zh-CN/component/custom-theme选择自定义主题色第二步点击在线主题色编辑第三步点击查看第四步修改主题色第五步下载主题色第六步获取压缩包并解压放到项目目录下第七步main.js中引入轻松搞定,因为这边用的是less所以我记录下,scss更方便动态修改,可以直接参考官方,谢谢观看...原创 2020-05-28 15:39:04 · 1726 阅读 · 0 评论 -
vue实现多个图片下载功能
vue实现多个图片下载功能<template> <div> <el-button type="primary" @click="downs"></el-button> </div></template><script>export default { data: function() {...原创 2020-03-04 14:10:50 · 1624 阅读 · 0 评论 -
搭建一个vue-cli3+ts+element-ui的project
搭建一个vue+ts+element-ui的project第一步:vue create mutiple-video-demo Enter进入下一步第二步:select Manually select features Enter进入下一步第三步:select Babel Typescript Router Vuex Css Pre-processors Linter/Form...原创 2020-01-11 18:58:46 · 1106 阅读 · 0 评论