2021-10-08

学习

学习目标：

vue3相关知识

---

学习内容：

vue3相关知识

---

# 学习产出：

提示：这里统计学习计划的总量

引用赋值

1.对象->引用赋值->同一指针
(1)浅拷贝(如Object.assign)
const Obj = Object.assign({}，oldObj);
拷贝原对象第一层数据，可拷贝原对象内非引用类型元素
(2)深拷贝
1.JSON
const Obj = JSON.parse(JSON.stringfy(oldObj));
注意问题：对象包含undefined、函数、正则表达式等时无法拷贝
https://blog.csdn.net/guozhangqiang/article/details/87632404
2.Lodash(函数库)

v-model（v-bind、v-on语法糖）

v-model原理

1.input

//复选框(true、false)
<input type="checkbox" v-model="msg">{{msg}}
//多选框加value
<input type="checkbox" v-model="msg1" value="1">
<input type="checkbox" v-model="msg1"  value="2">
<input type="checkbox" v-model="msg1"  value="3">
{{msg1}}
// 单选框
<input type="radio" v-model="msg2" value="1">
<input type="radio" v-model="msg2" value="2">
{{msg2}}

@Component{
components:{}
}
export default class Example extends Vue{
msg='';
msg1='';
msg2='';
}

2.v-model小知识
小知识：v-model 双向绑定时 number -> string，通过v-model.number转换string中
的开始的一段数字
条件判断时隐式转换 String -> number

组件化开发

1.注册组件
a组件(exam.vue)

@Component{
components:{
}
}
export default class Exam extends Vue{
}

b组件

<Exam></Exam>

import Exam from "../exam.vue"
@Component{
components:{
 Exam
}
}
export default class Example extends Vue{
}

Webpack

1.webpack打包
cd到目标路径，使用命令webpack

2.创建package.json(npm init)

3.webpack指定人口（
方法一：webpack --entry 入口文件路径 （默认入口文件./src/index.js）
方法二：webpack.config.js中配置
）

4.webpack 打包css
（1)安装css-loader

(2)使用方案
1.内联方式
2.配置方式

（3）配置生效
loader加载时从后向前加载

2.less文件处理

注意事项：打包less文件时注意less-loader的版本

（4）postcss使用
1.安装postcss

2.postcss 的使用
配置postcss.config.js

(5)file-loader


（6）url-loader （将小图片进行base64编码，减少并发请求）

Babel

。。。