前言
新入坑了vue，做个学习记录
前期准备
1.VSCode插件准备
vue Language Features：用于为.vue单文件组件提供代码高亮以及语法支持、拆分编辑器等
Vue VSCode Snippets：代码片段
2.浏览器调试准备
3.实时响应
上面这个作者好像不维护了，推荐使用
4.在vscode中内置浏览器显示
下载Vite插件vscode中内置vite热更新浏览器，vue开发和学习的好帮手，节省你很多的浏览器切换时间_哔哩哔哩_bilibili
5.代码片段
入门
1.绑cdn
2.createapp与组件
//创建app并挂载到id app上
const app=Vue.createApp({
//快捷键vdata
data() {
return {
name: '根组件',
id:'123',
num:1,
error:''
}
})
app.component('zj',{
data() {
return {
name: '子组件'
}
},
template:`
<h1>{{name}}</h1>`
})
app.mount('#app')
关于组件标签问题，写在html里会自动转为小写，此时用组件可能就会名称对不上（用构建工具就没有这个问题），写在script里的template就没有这个问题
全局组件与局部组件
1）全局组件慎用，因为打包工具最终不管你用没用都会统一打包到app.js里，太大影响性能，而局部组件直达包用到的
2）局部是被其他组件所调用的
3.computed计算属性
其实是data分离出来，具有缓存的特性，只有使用到响应式数据(放到data里的)才会改变（例如this.data）
返回的是数据
4.watch
是监听数据是否有改变，然后对此做出相关操作的
watch:{
num(newValue,oldValue){
this.error=this.num==10?'不能超过10个':this.num==0?'不能小于0':''
}
},
// computed:{
// error(){
// return this.num==10?'不能超过10个':this.num==0?'不能小于0':''
// },
// },5.构建工具vue-cli or vite 安装以及项目结构
作用：SFC（simple file conponent）把页面样式脚本全放在一个页面了，需要构建工具进行解析
安装：以vite为例：
a.查看npm的版本
b.
c.
目录结构
不需要构建处理的就放到public中
6.使用scss
安装，然后css的扩展名写为scss即可
7.使用组件
组件样式隔离：使用scoped（但会有性能开销）、使用一个父级包裹起来
组件样式传递：
写在main.js里的组件则是全局组件，可以直接拿过来用
8.css样式的多种处理
9.export default
export default命令用于指定模块的默认输出，输出接口。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。
10.项目的加载过程
项目加载的过程是index.tml->main.js->app.vue->index.js->helloworld.vue
11.get() set()
11. 事件
函数---没有参数时默认传了event，有参数时则不传event
事件修饰符
1）stopPropagation---先压d1的div，再压d2的div（补货），先执行d2的事件，再执行d1的事件（冒泡），若加上stopPropagation则执行d2的事件就停止了
可直接简写为.stop
2）如果想要碰到一个就执行一个，加上.capture
3）只想执行一次，加上.once
4）如果想要只有真的点击到它了才会执行，加上.self
5）阻止执行默认行为，加上.prevent，例如点击超链接，不跳转
或者
6）passive
告诉浏览器不用检测默认行为的判断，不用检测是否有prevent，也就是说加上了prevent和passive，prevent就失效了，这样浏览器不用每次都需要检测，以此提高了性能（例如滚动不用每次都检测prevent）
7）v-model在表单中只要一个字符修改了就会发送一次请求，显然有很大开销，加了lazy后，只有在光标移动后才会进行数据绑定
8）转换为数字，.number
9）.trim 去掉两边空格
12.键盘事件 keyup
有个属性是key，存输入的字符
@keyup.k 意思是只有当输入k才会除法key（函数）
.exact限制了必须是所按得键，不能包含其他按键
13.表单
1) 复选框，加上value，绑定v-model，改变数组
加上for
14.props传值
对传值的数据类型进行限制
批量传值：
父组件值改变，子组件也会跟着改变，反之不行（除非是引用对象），所以prop是父向子单向传递数据，不要把它当做是响应式数据，如果要向用data：prop的属性
非prop如class、id写在父组件里，会传到子组件的根上，如果想禁用这一特性可以
（:id）
15.emits自定义事件
在父组件中@自定义事件
在子组件中声明事件
子组件中验证
16.插槽slot
在父组件里使用双标签，内部的内容就会被替换到子组件中写了slot的地方
当slot里写的内容作为默认，如果父组件里不写东西，就展现
具名插槽，写在template里，#等同于v-slot，如果不给slot取名字，则是默认name为default，
子组件slot向父组件以属性的方式传递数据
17.动态组件
可以根据需要加载组件
18.provide与inject完成数据穿透
若想跨越了父级的组件进行数据传递，可使用provide与inject
注意事项：
若想传的是data，则可以用函数的方式来传值，不能用this. 否则会报错
若想整成响应式数据，可以弄成引用类型对象
或者弄成计算属性
19.config
某些页面需要配置，可以写个config.js文件，然后当成数据引入就行了
20.keep-alive缓存数据
21.ref
类似于id，不过是针对组件
22.生命周期
before cre-----data还不能读取
crea----data可clg，但dom元素不可（因为dom还没有被挂载）
beforeMou-----data可clg，但dom元素不可（因为dom还没有被挂载）
mounted----均可
子组件挂载完父组件再进行挂载
当data更新以至于需要重新渲染的时候，就会触发befupadte和update
3 beforeMount与mounted_哔哩哔哩_bilibili
测试json-serve+postman+mock
1.安装配置json-server（全局安装了）
碰到了
解决方法
解决 --- json-server : 无法加载文件xx\npm\json-server.ps1，因为在此系统上禁止运行脚本-CSDN博客
2. 使用json-server
快速安装 json-server ，一分钟教会你如何使用 | 掘金·日新计划 - 掘金 (juejin.cn)
3.结合postman
创建工作区---创建new collection---创建新的请求
为方便将前大长串添加为环境变量简写
获取单条数据
添加数据
更新数据
删除数据
4.结合mock
安装
写js
示例文档
http://mockjs.com/examples.html
以下这两个插件是随机生成指定长度中英文字符的
Scss
1.Sass中连体符（&）
连体符&让你的选择器变得更简单，维护更方便。他可以轻松的让你选择父元素，跟this的意思一样，省略一次，不用再写父级
小点
1.{{}}只能是单个表达式
2.
<a href="https://www.baidu.com" @click.prevent="go($event,'传参')">取消prevent原属性</a>3.scoped----样式只能作用于这个组件
4.$attr,如果不加这里，父组件里定义的样式就不起作用了
指令简写
1.v-on
<!--完整语法-->
<a v-on:click="doSomething">修改</a>
<!--缩写-->
<a @click="doSomething">修改</a>
用于监听 DOM 事件
@用于操作事件，：用于留住数据
2.v-bind
<!--完整语法-->
<a v-bind:href="url">测试</a>
<!--缩写-->
<a :href="url">测试</a>
绑定属性之类的
3.v-model
数据双向绑定之类的
Vue3中v-model的使用 - 掘金 (juejin.cn)
错误总结
1.
Vue提示 Expected Boolean, got String_vue expected boolean_阳村村长的博客-CSDN博客
快捷键
ctrl+` 调出控制台
ctrl+l+o 调出live serve浏览器实时查看/右下角有一个go live
ctrl+←/→ 快速跳转单词
v+xxx+回车可以直接调出代码块（vbase-----vue基础模版）/<vue
VSCode设置---通过ctrl+鼠标滚动改变字体大小_vscode放大字体-CSDN博客
输入标签+按下tab快速生成尖括号
ctrl+D选中相同的
alt+鼠标选中多行
ctrl+f快速格式化对齐
先这样，后面有更深层次的理解再来补充，那么日安。
参考来源：
7688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
