（2024）vue2+vue3学习笔记（持续更新）

业务技术点总结:
1.渲染功能:v-if/v-else v-for :class
2.删除功能:点击传参 filter过滤覆盖原数组
3.修改个数:点击传参 find找对象
4.全选反选:计算属性computed 完整写法 get/set
5.统计选中的总价和总数量:计算属性computed reduce条件求和
6.持久化到本地:watch监视，localStorage，JSON.stringify,JSON.parse

1.判断属性是否为空

if(this.todoName.trim()=== "'){alert('请输入任务名称')return
}

2.unshift 添加到数组最前面

this.list.unshift({id: +new Date()name: this.todoName
})

3.v-model修饰符 .trim .number

 3.1trim去除收尾空格

<h3>v-model修饰符 .trim .number</h3>
姓名:<input v-model.trim="username" type="text"><br>
年纪:<input v-model.number="age" type="text"><br>

4.@事件名.stop阻止冒泡

<h3>@事件名.stop阻止冒泡</h3>
<div @click="fatherFn" class="father"><div @click.stop="sonFn" class="son">儿子</div>
</div>

5.防抖

watch:
//该方法会在数据变化时调用执行obj.words"(newValue){// console.1og('变化了',newValue)// 防抖:延迟执行 → 干啥事先等一等，延迟一会，一段时间!// 延时器的id：timerclearTimeout(this.timer)this.timer =setTimeout(async()=>{const res = await axios({url:'this.url'this.result = res.data.dataconsole.log(res.data.data)},300)
}
}

6.全选

computed:{isA11:(get()return this.fruitList.every(item => item.ischecked)set(value){// 基于拿到的布尔值，要让所有的小选框 同步状态this.fruitList,forEach(item =>item.ischecked = value)}
}，

7.让输入框获取焦点

//1核心思路:
//1.等输入框渲染出来
//2.让输入框获取焦点
mounted(){// console.log(document.queryselector('#inp'))document.querySelector('#inp').focus()
}

8.累加求和

computed:{talPrice(){return this.list.reduce(sum,item)=>sum+item.price}
}

9.创建项目，使用步骤:

1.全局安装(一次):yarn global add @vue/cli 或 npm i @vue/cli -c
2.查看 Vue 版本:vue --version
3.创建项目架子:vue create project-name(项目名-不能用中文)4.启动项目:yarn serve 或 npm run serve(找package.json)

10.自定义指令(自定义自动获取焦点指定)

// 写在main.js中// 全局注册指令
Vue.directive('focus',{// inserted 会在 指令所在的元inserted(el){// el 就是指令所绑定的元素// console.log(el);el.focus()}
})

自定义指令使用方法

<input v-focus ref="inp />

自定义指定局部使用

<template><div><h1>自定义指令</h1><input v-focus ref="inp /></div>
</template>
<script>
export default {// 局部注册指令directives:{// 指令名:指令的配置项focus:{inserted(el){el.focus()}}}
}
</script