
vue
鱼子酱酱酱
跟快乐撞个满怀
展开
-
uniapp/vue 引入iconfont并动态修改icon颜色
一、引入iconfonticonfont官网:iconfont-阿里巴巴矢量图标库1-选择想要的icon至购物车2-添加至自己的项目3-这里我选择的font,属于个人喜好,觉得更方便,还有其他方式选择,步骤差不多,点击生成代码,下载至本地(当然你也可以选择在线使用)4-将iconfont.css等添加至自己的项目5-在main.js中引入css文件至此就可以使用我们的iconfont使用方法如下在iconfont.css中有我们下载的icon名..原创 2022-05-24 19:07:26 · 11085 阅读 · 6 评论 -
【vue】vue如何使用lottie
一般比较大的动画 gif 图就有很多弊端,首先是太大,其次就是有毛边,观感不太好,所以如果使用的话更推荐使用lottie1-安装npm install lottie-web2- 在需要使用的页面引入 import lottie from 'lottie-web'3-书写Lottie函数// lottie动画渲染 intLottie(domId, path, loop = false) { // 渲染主图按钮动画 let lott原创 2022-01-19 16:58:00 · 2066 阅读 · 0 评论 -
【vue】vue中的computed和watch的区别
很多人对于computed和watch 是混淆的,实际上 这两者的用途是完全完全不一样的,没必要用长篇大论来解释computed 用于计算产生新的数据 这个数据是缓存的watch 是监听现有数据<template> <div> 总共 {{sum}}</div></template><script>export default { data() { return { name:原创 2022-03-10 10:51:31 · 747 阅读 · 0 评论 -
【vue】vue组件通讯的方式(vue2+vue3)
vue组件通讯的方式,并不局限于父子组件一:props和$emit适用于父子组件。- 父组件向子组件传递 props 和事件- 子组件接收 props ,使用 `this.$emit` 调用事件直接代码是最方便的 每一步都有解释--父组件 <HelloWorld msg='传递给子组件的内容' @sayHi="sayHi"/>//当子元素emit'sayHi'的时候会调用父元素中的sayHi方法 methods: { sayHi(msg) {//原创 2022-03-03 18:51:27 · 443 阅读 · 0 评论 -
【vue】watch和watcheffect的区别
两者都可监听data属性变化watch需要明确监听哪个属性watcheffect 会根据其中的属性自动监听其变化,你写了哪个就会监听哪个,没写就不监听watcheffect初始化时,一定会执行一次(收集要监听的数据),watch只有你设置了初始化监听才会监听 watch( // 第一个参数,确定要监听哪个属性 () => state.age, // 第二个参数,回调函数 (newAge原创 2021-09-09 17:55:58 · 1103 阅读 · 0 评论 -
vue3和vue2实现数据绑定的原理
一般自己的学习笔记都放在备忘录里吃灰了,今天有时间就来整理一下vue2和vue3实现数据绑定他原理的不同之处。如果一句话总结那就是 vue2实现的原理是依赖于Object.defineProperty,而vue3依赖的是ProxyObject.defineProperty这个方法能直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。而vue2中正式通过这种方式来实现的响应式数据但是对于这种普通的属性还好,对于数组和对象的监听都需要重新封装,而对于复杂的对象进行深原创 2021-09-09 17:52:56 · 336 阅读 · 0 评论 -
【vue】vue实现搜索内容文字高亮,在结果中文字高亮
先来一个效果图讲真的想实现这个功能的时候疯狂百度但是都不是非常的称心如意,所以自己摸索了一会,先说一下用到的知识点1、replace正则全文匹配(这里主要是因为使用replace默认替换第一个元素,所以使用正则)2、字符串split转换为数组3、v-html好,那么首先看下代码 <div v-html="brightenKeyword(content,keyword)"></div>对于html部分 ,就是这么简单,使用v-html标签,会输出.原创 2020-07-17 16:24:25 · 6868 阅读 · 6 评论