Vue杂谈2

置顶 yi742891270

已于 2023-12-25 10:22:22 修改

阅读量527

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2021-12-10 16:53:35 首次发布

本文链接：https://blog.csdn.net/yi742891270/article/details/121860249

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

上一个杂谈太多字再添加进去浏览器崩掉了,新开一个

85、idea/WebStorm 通过ctrl+左键跳转到源文件

现在总有这种问题

然后ctrl+左键点进去，又显示没有

这不扯蛋嘛，要真没有我项目都跑不起来了，所以肯定不是代码的问题，是编译器的问题。然后翻转了好久，终于找到一个靠谱的了

设置进去，setting–>Languages&Frameworks–>javaScript–>Webpack，选择manually手动，然后我自己做的项目都又webpack的，就在项目\node_modules\@vue\cli-service\webpack.config.js下，选择确定就可

然后右下角弹出说是否信任和执行，当然信任啦

没有波浪线了！！！而且也能用了，能跳转了

而且智能施法也有@的提示了

86、axios读取本地文件 + 单独将某个文件抽出来不打包

一般来说读取本地文件是import xxxfrom "xxx"，然后在data里面渲染就可以了。
但是目前有个需求，就是代码不变，但是某一个文件（比如json）需要以后动态变化，方便运维的。就要单独将他抽取出来，以后发生变化就改某文件就行不用重新打包那么浪费时间。

第一个问题是，怎么将某个文件单独抽离出来不打包。

我对webpack打包的水平也只有npm run serve和npm run build的水平，完全没有了解过
众所周知

这么一个项目，打包后就变成了

可以看到js，css全打包了，就只剩下public的代码完全没有改过，那么就可以得知public下的文件是安全区不会被打包，那么我们将静态的文件放进去

第二个问题、nginx的缓存机制

一开始我就直接读json文件，就OK了，以后换就换allSite.json。但是nginx或者其他因素，读过一遍json后，就算json被换了也不会再读了而是读缓存。这个时候我去查，就可以用axios读取本地json文件加时间戳就可以读取文件

    getSiteByQuery() {
      const {businessTypeEn, town, searchValue, cardType,} = this.$route.query
      // const allSite = this.allSite
		//时间戳
      const timestamp = new Date().getTime()
      //axios请求，这个很重要
      axios.get(process.env.BASE_URL+ 'site/allSite.json?timestamp=' + timestamp).then(res => {
        const data = res.data
        let siteList = []
        const allSite = data
        for (const site of allSite) {
          if ((town === "" ? true : site.town === town) && (cardType === "" ? true : site.cardType.includes(cardType)) && (businessTypeEn === "" ? true : site[businessTypeEn] === "支持") && (searchValue === "" ? true : site.siteName.includes(searchValue))) {
            siteList.push(site)
          }
        }
        this.siteList = siteList
      })
    },

axios.get(process.env.BASE_URL+ ‘site/allSite.json?timestamp=’ + timestamp)

来看这个，这个很重要，记得加process.env.BASE_URL就行。
接下来就是public里面的json文件，路径要对上

最后就是时间戳，防止读缓存

87、防抖节流

害，之前还百度怎么防抖节流，都不用百度了，官方人家都有详细介绍怎么做了，还隔着百度用settimeout来做着，都有插件完成了
https://v3.cn.vuejs.org/guide/data-methods.html#%E6%96%B9%E6%B3%95

用https://lodash.com/来做，一下子的事情
在这里插入图片描述

// 下lodash，安装好后
app.component('save-button', {
  created() {
    // 使用 Lodash 实现防抖
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 响应点击 ...
    }
})

//防抖
_.debounce(func, [wait=0], [options={}])
//节流
_.throttle(func, [wait=0], [options={}])

lodash在opitons参数中定义了一些选项，主要是以下三个：

leading，函数在每个等待时延的开始被调用，默认值为false
trailing，函数在每个等待时延的结束被调用，默认值是true
maxwait，最大的等待时间，因为如果debounce的函数调用时间不满足条件，可能永远都无法触发，因此增加了这个配置，保证大于一段时间后一定能执行一次函数

根据leading和trailing的组合，可以实现不同的调用效果：

leading-false，trailing-true：默认情况，即在延时结束后才会调用函数
leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用
leading-true, trailing-false：只在延时开始时调用
deboucne还有cancel方法，用于取消防抖动调用

88、js中的foreach

忘了弱语言的foreach怎么写了

dataArrayList.forEach(function (key){
  console.log(key)
})

89、Object.prototype.hasOwnProperty() 对象是否有指定的属性

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// expected output: true

console.log(object1.hasOwnProperty('toString'));
// expected output: false

90、FormData

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去

在这里插入图片描述

91、自定义属性

和data，created同级的这些，比如

	data() {
	    return {
	        number: 1
	    }
	},
	methods: {
	    handleClick() {
	        console.log("handleClick");
	    }
	},
	//学vue的过程没有这个属性吧
	number:1,

但是我们可以直接用this.$options.number来读取到这个自定义属性

92、动画与过渡

以前没看过动画与过渡，起码看一下吧，不然啥都不会

动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        @keyframes TightToLeft {
            0% {
                transform: translateX(100px);
            }

            50% {
                transform: translateX(50px);
            }

            0% {
                transform: translateX(0px);
            }
        }

        .animation {
            animation: TightToLeft 3s;
        }
    </style>
</head>

<body>
    <div id="root"></div>

</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                animate: {
                    animation: false
                }
            }
        },
        methods: {
            handleClick() {
                this.animate.animation = !this.animate.animation
            }
        },
        template: `
            <div :class="animate">123</div>
            <button @click="handleClick">切换</button>
        `
    });
    const vm = app.mount('#root')
</script>

</html>

过渡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .transition {
            transition: 3s background-color ease;
        }

        .blue {
            background: blue;
        }

        .green {
            background: green;
        }
    </style>
</head>

<body>
    <div id="root"></div>

</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                animate: {
                    transition: true,
                    blue: true,
                    green: false,
                }
            }
        },
        methods: {
            handleClick() {
                this.animate.blue = !this.animate.blue
                this.animate.green = !this.animate.green
            }
        },
        template: `
            <div :class="animate">123</div>
            <button @click="handleClick">切换</button>
        `
    });
    const vm = app.mount('#root')
</script>

</html>

93、mixin

普通用法

现在才知道有mixin这个东西，罪过罪过
用封装或者组件化非常好用，就传一个对象过来，对象包含data、方法之类的。然后在组件中mixins: [myMixin],就能把对象中的data、方法加进去了。这不就是spring boot的那个约定规矩啥的？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>

</body>
<script>
    // 组件中的data、methods会优先与mixin中的data和methods
    // 生命周期函数先执行mixin再执行组件中的
    const myMixin = {
        // 组件也有number，被会组件中的覆盖
        // 组件没有count，则会添加进组件中
        data() {
            return {
                number: 2,
                count: 666
            }
        },
        // 组件业有created，则两个一起执行，先执行mixin中的
        created() {
            console.log("mixin create");
        },
        // 会被组件中的覆盖
        methods: {
            handleClick() {
                console.log("mixin handleClick");
            }
        }
    }

    const app = Vue.createApp({
        //导入mixin
        mixins: [myMixin],
        data() {
            return {
                number: 1
            }
        },
        methods: {
            handleClick() {
                console.log("handleClick");
            }
        },
        created() {
            console.log("create");

        },
        template: `
            <div>{{number}}</div>
            <div>{{count}}</div>
            <button @click="handleClick">切换</button>
        `
    });
    const vm = app.mount('#root')
</script>

</html>

在这里插入图片描述

当我们打开网页，点击按钮时

mixin create
create
handleClick

生命周期函数会一起执行，点击按钮时，组件中的方法覆盖mixin中的方法

更改优先级策略

顺便说一句啊，自定义属性，是组件的优先级高于mixin的。

目前的优先级是这样的

组件方法 > mixin方法
组件自定义属性 > mixin自定义属性
组件data > mixin的data
mixin生命周期先执行，后执行组件生命周期

可以改变优先级的

app.config.optionMergeStrategies.xxxx = (mixinVal,appVal) =>{
	return mixinVal || appVal
}

94、provide / inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
but，这个数改变不了，就像 props一样，不能直接改变数，这个以后再说吧emmm

	//父组件
     data() {
         return {
             number: 1
         }
     },
     //获取data里面的数据，可以在所有子孙组件中能读的到
     provide() {
         return {
             number: this.number
         }
     },

	//子孙组件
	  inject: ['foo'],
	  created () {
	    console.log(this.foo) // => "bar"
	  }

95、Vue自定义指令

1）基本使用

比如我们常用的v-show、v-focus等v-xxxx指令，除了官方写的，我们还可以自定义来写，下面进行源码解析

    const app = Vue.createApp({
        // 使用了v-focus指令
        template: `
            <input v-focus/>
        `
    });
    // 全局注册自定义指令
    app.directive('focus', {
    	//初始化的时候，使input聚焦
        mounted(el) {
            el.focus();
        }
    })
    const vm = app.mount('#root')

简单地完成了一个input初始化页面聚焦的功能，就是注册一个组件，参数1是名字，参数2是对象，里面一样有生命周期函数，对应着该页面用这个指令在哪个生命周期函数中使用。el是对应的dom组件，我们可以对该组件进行一定的操作

官网观看更好https://cn.vuejs.org/v2/guide/custom-directive.html

2）局部使用

参考官方文档

3）传参数

v-自定义名字:arg中的参数="value中的参数"
比如v-pos:right="number"，其中right和number都是我们自定义的

    const app = Vue.createApp({
        data() {
            return {
                number: 1
            }
        },
        // 自定义指令传参
        template: `
            <input v-pos:right="number"/>
        `
    });
    app.directive('pos', {
    	// 第一个参数为dom，第二个为自定义指令传过来的参数
        mounted(el, binding) {
            console.log(binding);
        },
        //要updated是因为如果更新了，要用到这个函数
        updated(el, binding) {
            console.log(binding)
        }
    })
    const vm = app.mount('#root')

在这里插入图片描述

96、查看npm的注册地址

npm config get registry

在这里插入图片描述

修改注册地址可以

npm config set registry https://registry.npm.taobao.org

but！！！淘宝镜像改了
变成 https://registry.npmmirror.com/各位小伙伴记得改

97、公司的jenkins变成内网了

以前都是外网的，现在变成内网了，然后现在有个问题，就是我的命令是这样的

npm i && npm run test-build && chmod 777 dist -R  && sshpass -p "密码不告诉你" scp -r dist/. root@IP不告诉你:路径不告诉你

那目前每次都是会npm install从外网下一次。这就尴尬了，自己还没做过内网npm。
但目前就是找到这个了嘛

[root@localhost bizsceneplatformWeb]# pwd
/root/.jenkins/workspace/bizsceneplatformWeb
[root@localhost bizsceneplatformWeb]# ll
总用量 85944
-rw-r-----   1 root root      221 1月   6 10:35 babel.config.js
drwxrwxrwx   5 root root       72 4月  13 09:56 dist
drwxr-x--- 946 root root    28672 4月  13 09:55 node_modules
-rw-r-----   1 root root 86824477 1月   6 10:35 node_modules.zip
-rw-r-----   1 root root     1486 1月   6 10:35 package.json
-rw-r-----   1 root root   700528 4月  13 09:55 package-lock.json
-rw-r-----   1 root root       59 1月   6 10:35 postcss.config.js
drwxr-x---   2 root root       41 1月   6 10:35 public
-rw-r-----   1 root root      331 1月   6 10:35 README.md
drwxr-x---  18 root root     4096 1月   6 10:35 src
-rw-r-----   1 root root     4787 3月  23 14:50 vue.config.js
-rw-r-----   1 root root   399299 1月   6 10:35 yarn.lock

命令其实就是把这个scp命令通过ssh将dist复制到测试环境嘛，那么只要不改依赖包，我们就不用npm install一次了，把npm i 去掉就行

98、有关router和keep alive的一些经验

看了几篇文章写的router和keep alive的文章，有比较深的启发
https://blog.csdn.net/qq_38143787/article/details/107728859
https://juejin.cn/post/6844903512678088712
https://segmentfault.com/q/1010000022120934/

99、当请求返回的结果是html文本

之前都是返回json格式然后我慢慢写的，这居然返回个html脚本？还有这种事？第一次遇到

{
  "data": {
    "report": "<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\xxxxxx"
  },
  "result_code": "0000",
  "message": "操作成功"
}

repost就不给看全啦，涉及公司机密，反正跟返回就是一个html文本，就尼玛离谱
然后我们接到后，就这样写吧

		//上面的object是res
      let newWin = window.open('', '_self')
      newWin.document.write(res.data.report)
      newWin.document.close()

然后就可以正常打开那个html文本了
其实理解就是
https://www.cnblogs.com/dh616854836/articles/2140349.html
或者这样也一样

	document.write(res.data.report)
      document.close()

100、深拷贝

垃圾js的拷贝贼垃圾了
比如

var a = [1,2,3,4];
var b = a;
b[0] = 6;
console.log(a);    // [6, 2, 3, 4]

？？老子只修改b，都能影响a？
可见而知，这是浅拷贝，所以我们要做深拷贝

// 深拷贝
export function deepCopy(value){
  return JSON.parse(JSON.stringify(value))
}

101、刷新页面，或者某些组件刷新有问题 $nextTick

经常遇到的，奇奇怪怪的bug，就异步或者同步，又或者组件库没有做好，导致值变了UI里的值还是旧的之类

可以用

      this.$nextTick(()=>{
      //要执行的代码
      })

就把所有代码都放在那里面，就行了
其原理就是，当dom元素更新后，执行里面的代码

又或者
在最后面刷新页面

      this.$forceUpdate()

102、跳到其他H5页面完成后，清除历史记录

就是，比如我支付调用招行的H5，支付完成后返回我的页面，但是，用户点返回键，是可以退回去招行H5的，因为招行那边做的是push而不是replace。我们并不能要求招行定制化工作，只能自己做了。

思路1就是，调用招行H5支付完成后，返回订单列表，带一个参数，这个是我们可以自己写的，那就是http://xx/dingdan?history=myOrder，然后在该页面，判断url是否有带参数

	//判断是否有东西，就的话就跳到最初页面
    if (this.$route.query.history === 'myOrder') {
    	//有的话，vuex、session、cookie、localstrong、VUE的bus公共组件，哪个缓存都可以
    	//就知识缓存下来，让首页知道这个是跳转过来的
      this.$store.dispatch("app/setHistory", this.$route.query.history)
      //这个就是回到首页，回到最初的页面，一般就是首页，如果安卓跳H5的话，肯定就是那个H5的首页了
      history.go(-(history.length - 1))
    }

接下来就是在首页判断，读缓存，如果读到缓存的话，就跳到固定页面，然后销毁缓存

	//首页这里保存
    if (this.history === 'myOrder'){
    	//销毁缓存
      this.$store.dispatch("app/setHistory",null)
      removeHistory()
      //跳到指定页面，缺点是，用户返回后返回到首页（有总比没有好）
      this.$router.push({
        name:'MyOrder'
      })
    }

103、前端group by

因为后端偷懒了，居然将group by丢给前端写，太可怕了，直接百度抄一个

//data： 数组
//key： group by key的 key
export  const group_signal = (data, key) => {
  return data.reduce(function(prev, cur) {
    (prev[cur[key]] = prev[cur[key]] || []).push(cur);
    return prev;
  }, {});
};

104、删除数组的某个字段

array.splice(下标,删除几个)
比如删除第一个，就是array.splice(0,1)

如果是根据某个值删除，就是

this.list.splice(

  this.list.findIndex((item) => 
  	//item就是每次循环的那个值，当item中某个值和自己想要的某个值一致的时候，返回该下标
  	item.meal_date === meat.meal_date),
  
)

105、 Teleport 传送门功能

就是一个div1里面，还有个div2，比如点div2的时候，想让div2进行body或者其他dom元素的操作，可以让div2挂载到其他dom元素的

<div id="hello"></div>
<div id="div1">
	//加载，表面是div2，实际是对hello的dom进行操作
	<teleport to="#hello">
		<div id="div2">
	</teleport>
</div>

106、render

在此之前，先说下虚拟dom
实体dom就是这样的

<div>123</div>

这是一个真实的实体的dom，而vue是可以用JS的方式，创建一个虚拟dom，再将虚拟dom转化为真实dom映射到页面上
虚拟dom大概长这样

{
	tagName: 'div', //标签元素，div、a、h2这些
	attributes:{},
	text: 'hello dell', //里面的内容值，这些还可以写这3要素嵌套下去，就像写普通的html一直嵌套下去
}

而render可以这样用（和data同级）

const app = Vue.createApp({
	template:`
	<myTitle :level="2">
		hello
	</myTitle>
	`
})

app.component('myTitle',{
	props: ['level'],
	render(){
		//h是一个函数，要传三要素
		const { h } = Vue;
		//相当于转成
		// {
		// 		tagName: 'h2', //标签元素，div、a、h2这些
		// 		attributes:{},
		// 		text: 'hello', 
		// 	}
		return h('h' + this.level, {} , this.$slots.default())
	}
	
})

于是乎，在页面就生成了

<h2>hello</h2>

107、动态组件

<script>
    const app = Vue.createApp({
        data() {
            return {
            //初始化是item
                currentItem: 'input-item'
            }
        },
        methods: {
        	//点击就切换
            handle() {
                if (this.currentItem === 'input-item') {
                    this.currentItem = 'div-item'
                } else {
                    this.currentItem = 'input-item'
                }
            }
        },
        template: `
        //component的is元素，里面是什么，就选定的是什么，不用每一个组件都写if之类的这么累了
         <component :is="currentItem"/>
         <button @click="handle"> 切换</button>
         `
    })

    app.component('input-item', {
        template: '<input/>'
    })

    app.component('div-item', {
        template: '<div>div</div>'
    })
    const vm = app.mount('#root')
</script>

108、异步组件

<script>
    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {
        },
        template: `
        <async-item/>
         `
    })
    //等待4秒后再加载异步组件
    app.component('async-item', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    template: `<div>this is an async component</div>`
                })
            }, 4000)
        })
    }))
    const vm = app.mount('#root')
</script>

109、对某一个请求进行固定的IP请求

都要跨域的嘛，于是在vue.config.js中设置好了

比如请求地址是：http://192.168.22.199:8080/paytest/dgtBizPayServ/cmbPay/v1/orderPay,中间的paytest就是针对这个请求加的后缀嘛

but,我想转发到 http://192.168.22.156:8068/dgtBizPayServ/cmbPay/v1/orderPay
就可以这样做拉

  proxy: {
  //这里写前缀
       '/paytest':{
       //转发的地址
       target: 'http://192.168.22.156:8068', //肖
       changeOrigin: true,
       pathRewrite: {
       //这个意思就是说，将paytest 的，变成 ’‘就是空，实际请求就不要paytest
         ['^/paytest' ]: '' //重定向到http://192.168.22.156:8068
       }

    },
 }

110、脱敏

/**
 * 脱敏
 * @param str 字符串
 * @param start 开始脱敏的位数
 * @param desNumber 脱敏几个
 * @returns {string}
 */
export function desensitization(str, start, desNumber) {
  const length = str.length
  let des = ''
  for (let i = 0; i < desNumber; i++) {
    des += '*'
  }
  console.log(str.substring(0, start))
  console.log(str.substring(length - start))
  return str.substring(0, start - 1) + des + str.substring(start + desNumber - 1)
}

111、nginx的一次小操作

#查nginx再哪里
[root@localhost ~]# nginx -t
nginx: [warn] the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/conf.d/app-https.conf:4
nginx: [warn] the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/conf.d/app-https.conf:30
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
#通过得知，我们看到再这里
nginx: configuration file /etc/nginx/nginx.conf test is successful

点进去后，编辑


	location ^~ /openapi/ {
             proxy_pass  http://xxxxx.220:8094/openapi/;
        }

可以看到，这里转发，那么我们就改nginx就行

112、导航条返回按钮

113、判断一个元素是否在数组中

数组.indexOf(元素)

如果找到，返回数组下标；如果找不到，返回-1

114、前端导出excel

后端偷懒了，前端来做

npm install --save xlsx file-saver

工具类

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

/**
 * 导出为excel
 * @param name 导出文件名
 * @param tableName 导出为excel的元素id
 * @returns {any}
 */
export function exportExcel (name, tableName) {
  let sel = XLSX.utils.table_to_book(document.querySelector(tableName))
  let selIn = XLSX.write(sel, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, selIn)
  }
  return selIn
}

比如table表是这样的，记得添加id就行

<el-table
          :data="busList"
          style="width: 95%"
          stripe
          id="outExcel">
/......
        </el-table>

然后用的时候直接调用方法就行

115、数组和字符串按照`,`转换

字符串转数组

"1,2,3" ⇒ ["1","2","3"]

str = str.split(",")

数组转字符串

["1","2","3"] ⇒ "1,2,3"

str = str.join(",")

116、npm加速器，淘宝镜像最终解决方案

不用再手动改什么东西了，快来试试好用的
https://github.com/Pana/nrm

# 下载nrm
$ npm install -g nrm
# 查看可用镜像源
$ nrm ls

* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
# 使用其中镜像，use就可
$ nrm use cnpm  //switch registry to cnpm

    Registry has been set to: http://r.cnpmjs.org/

117、normalize.css

normalize.css是一个消除不同浏览器之间css不同的工具

118、scss的基本使用

首先就是下载依赖嘛

1）scss中的常量

比如全局文件golable.scss

//定义一个css常量
$content-fontcolor: #333;

然后在其他文件导入使用

//导入scss
@import './golable.scss'

html{
	//使用
	color:$content-fontcolor
}

2）mixin，但是scss

scss中的mixin呢，萨普赖斯
mixin.scss

//@mixin，然后写名字，里面就是具体的scss样式
@mixin mixinName{
	text-overflow: ellipsis
}

然后文件中使用

@import './mixin.scss'
html{
	@include mixinName
}

119、css的_的简写

注意是2个_，不是一个
比如class为a__name，在scss中可以简写

a{
	&__b{
	
	}
}

120、css中的scoped

<style lang="scss" scoped>

虽然平时写多了，但是不知道scoped是个啥
scoped是表示当前的css样式只作用域当前文件下，就算其他有同名的也不妨碍

121、数组连接，并且去重

        const res = arr1.concat(arr2)

122、监听vuex中的值变化

vuex有自带的监听功能

  watch: {
    '$store.state.app.checkCanteen'(newVal,oldVal){
    	//做点什么
    }
  },

123、callback回调函数的好应用

以前一直没注意这个callback，觉得他是多此一举，但是现在随着生活中的应用，
比如，发一个请求，但是在请求之后调用的方法或者操作，都是一样的，只是发请求调用的函数不一样而已，我们可以利用callback来做

//定义一个通用之后的函数
function callbackFunction(callback){
	//  先在这里做一点别的操作之类的
	//可以拿到callback的返回值，并且对他做点什么
  const res = callback()
  //拿到值后，可以对他做点什么
  console.log('打印出来的是：' + res)
}

//比如直接调用，但是传参过去是一个function
callbackFunction(()=>{
  //假设这个是异步请求，返回res = 123
  const res = 123
  //最后返回一个结果
  return res
})

callbackFunction(()=>{
  //假设这个是异步请求，返回res = 456
  const res = 456
  return res
})

124、Transition动画与过渡

虽然之前写了动画和过渡的笔记，但是这个是官方的

1）基本使用

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

只要用了Transition组件，包括在里面，当v-if或者v-show执行的时候，会自动绑定6个默认的class

v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

在这里插入图片描述

2）改class名

但是如果基本使用，那么他的class是固定的，对于使用了 Animate.css的插件，他们的class都是固定的，我们可以这样做

<!-- 假设你已经在页面中引入了 Animate.css ，这些都是animate.css的class名-->
<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

你也可以向传递以下的 props 来指定自定义的过渡 class：

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

3）js运行动画

虽然没试过，但是见过猪跑

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

如果是纯js运行动画，最好加上 :css="false"

4）将动画组件化

简单地介绍使用，大概可以这样做拉

<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>

<template>
  <!-- 包装内置的 Transition 组件，定义好一些东西 -->
  <Transition  
    name="my-transition"
    @enter="onEnter"
    @leave="onLeave">
    <slot></slot> <!-- 向内传递插槽内容 -->
  </Transition>
</template>

<style>
/*
  必要的 CSS...
  注意：避免在这里使用 <style scoped>
  因为那不会应用到插槽内容上
*/
</style>

<MyTransition>
  <div v-if="show">Hello</div>
</MyTransition>

125、TransitionGroup动画与过渡

没想到吧，动画与过渡还有其他的，上面的只是单独针对于v-if和v-show的，但是比如v-for的，里面的list进行添加或者删除，那也是动画，TransitionGroup就是解决列表的

1）和Transition的区别

<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：

默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。
渡模式在这里不可用，因为我们不再是在互斥的元素之间进行切换。
列表中的每个元素都必须有一个独一无二的 key attribute。
CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。

126、代码格式化

使用了prettier进行代码格式化
官网：https://prettier.io/

安装

npm install --save-dev --save-exact prettier

使用

然后在idea搜索
在这里插入图片描述

设置
在这里插入图片描述

设置

创建.prettierignore 和.prettierrc
前者是忽略哪些文件格式化，后者是格式化的具体配置

# .prettierignore
# prettier忽略格式化的文件与文件夹
dist
dist-zip
vscode
.idea
node_modules
note


index.html

//.prettierrc

{
  "singleQuote": true,
  "semi": false,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "bracketSameLine": false
}

127、检查当前package.json是否有升级的包

https://github.com/raineorshine/npm-check-updates

128、切换国内代理

别再打开文件一个个改了，直接用npm库吧
https://github.com/Pana/nrm

129、Page Visibility API监听页面是否隐藏

比如有些音乐啥的，锁屏或者退出H5想暂停播放音乐

const audioRef = ref<HTMLAudioElement | null>(null)

const handleVisibilityChange = () => {
  if (document.hidden) {
    // 页面隐藏，暂停音乐播放
    cacheStore.isMusicPlay = false
    audioRef.value?.pause()
  } else {
    // 页面重新显示，继续音乐播放
    cacheStore.isMusicPlay = true
    audioRef.value?.play()
  }
}

// 锁屏解锁出来，继续播放音乐
onMounted(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

// 组件销毁，停止播放音乐
onBeforeUnmount(() => {
  cacheStore.isMusicPlay = false
  audioRef.value?.pause()
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})

// 监听值
watch(
  () => cacheStore.isMusicPlay,
  (newVal, oldVal) => {
    if (oldVal) {
      audioRef.value?.pause()
    } else {
      audioRef.value?.play()
    }
  }
)

<template>
  <div>
    <audio ref="audioRef" height="100" width="100" loop>
      <source src="@/assets/music/BGM.mp3" type="audio/mpeg" />
      <source src="@/assets/music/BGM.mp3" type="audio/ogg" />
      <embed height="50" width="100" src="@/assets/music/BGM.mp3" />
    </audio>
    <van-floating-bubble
      :icon="cacheStore.isMusicPlay ? 'pause-circle-o' : 'music-o'"
      v-model:offset="offset"
      axis="xy"
      magnetic="x"
      @click="toggleMusic"
    />
  </div>
</template>

yi742891270

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue杂谈2

上一个杂谈太多字再添加进去浏览器崩掉了,新开一个85、idea/WebStorm 通过ctrl+左键跳转到源文件现在总有这种问题然后ctrl+左键点进去，又显示没有这不扯蛋嘛，要真没有我项目都跑不起来了，所以肯定不是代码的问题，是编译器的问题。然后翻转了好久，终于找到一个靠谱的了设置进去，setting–>Languages&Frameworks–>javaScript–>Webpack，选择manually手动，然后我自己做的项目都又webpack的，就在项目\n
复制链接

扫一扫