vue笔记

1、组件传值 counter="9" 传的是字符串9 , :counter="9"传的是数字9

2、父组件样式 scope，如果想样式应用到子组件中，在样式前加/deep/ 例如 /deep/ h5 vue3推荐用:deep(.title) 替换 /deep/ .title

　　不加相当于 h5[data-v-xxx]，加上相当于data-v-xxx h5，所以能应用到子组件

3、兄弟传共享 (EventBus)  vue3中使用mitt(https://blog.csdn.net/fuweipeng2012/article/details/113812794)

　　https://zhuanlan.zhihu.com/p/72777951

4、this.$nextTick

　　场景，控制文本框显示，获取焦点，刚显示时候，dom还没有渲染完成，不存在文本框

　　this.$nextTick(()=> {

　　　　this.$refs.xxx.focus()

　　 })

5、ES6循环

　　forEach 循环不能在中间停止

 

　　//在数组找一项，找到即终止循环

　　arr.some((item,index)=>{

　　　　if(item.name=='xxx') {

　　　　　　item.status=status

　　　　　　return true

　　　　}

　　})

 

　　//比foreach返回新数组

　　let arrNew = arr.map(n=>{

　　　　return n+1

　　})

　　

　　let dataNew = arr.map(item=>{

　　　　return {

　　　　　　...item,

　　　　　　name:item.name.replace('-','替换')

　　　　}

　　})

　　

　　//在数组判断每一项，一项不满足返回false

　　arr.every((item,index)=>{

　　　　item.checked //或者item.checked==true

　　})

　　

　　//累加金额

　　var sum = arr.filter(item=>{item.checked}).reduce((amt,item)=>{return amt+=item.count * item.price},0)

　　简写方式

　　var sum = arr.filter(item=>{item.checked}).reduce((amt,item)=>amt+=item.count * item.price,0)

6、vue中如何判断checkbox是否选中

　　console.log(event.target.checked)

7、Number数字.toFixed(2) 保留2位小数

8、嵌套路由　　

　　子路由规则加{path:'sub/:id',component:Sub,props:true}，子页面 propss:["id"] 也能拿到id值

9、ES模块化(以下两种方式可以一起使用 import aaa,{a} from './导出.js')

　　①默认导出导入

　　let a=1

　　export default { a }

　　import aaa from './导出.js'     console.log(aaa.a)

　　②按需导出导入

　　export let a=1

　　import {a as 重命名} from './导出.js'

10、ES6 Promise的catch

　　.then().then().catch() 失败了就捕获

　　.catch().then().then() 捕获了，不影响下面的执行

11、package.json加上 "type":"module" 表示模块化

12、首字母大写

　　capitalize(str)  //把首字母转为大写的过滤器

　　　　return str.chaxAt(0).toUpperCase() + str.slice(1)

　　}

 

　　str.slice(0,10) 截取从1，截取10个

13、vite

　　vite init vite-app 项目名称 //创建

14、插槽

　　组件定义了插槽，并指定后备内容，如<slot>这是后备内容</slot>，如果调用插槽不提供内容，则显示这是后备内容，如果调用插槽提供内容，则显示调用替换的内容

15、字符串转数字

　　var a="10"   +a 就是10 -a就是10