记录一次Vue知识点的讲解笔记以及一些前端小知识
基础
ES5 数组
map：遍历，得到新数组
[1, 2, 3].map(i => i*2) // [2, 4, 6]find：查找一个元素，返回元素
[1, 2, 3].find(i => i===2) // 2filter：过滤，查找多个
[1, 2, 3].filter(i => i%2!=0) // [1, 3]reduce：汇总数据
[1, 2, 3].reduce((x, i) => {
return x + i
}, 0) // 6sort：排序，返回负数：a > b，返回正数：a < b，返回 0 ：a = 0
[2, 3, 1].sort((a, b) => a - b) // [1, 2, 3] 升序
[2, 3, 1].sort((b, a) => a - b) // [3, 2, 1] 降序，交换参数位置变量
let代替var，没有变量提升的BUGconst用于不可变，变量本身不可二次赋值
循环
for in：少用
const arr = [1, 2, 3]
for (const key in arr) {
console.log(key, arr[key])
}for of：
const arr = [1, 2, 3]
for (const item of arr) {
console.log(item)
}解构&同构
解构对象：
// before
const obj = { a: 1, b: 2 }
const a = obj.a
const b = obj.b
// after
// 同名同位置取出
const { a, b, c: { d } } = { a: 1, b: 2, c: { d: 3 } }同构对象：
const a = 1
const b = 2
const o = { a, b } // { a: 1, b: 2 } 同名构成展开&同构：
const obj1 = { a: { e: 4, f: 5 }, b: 2, x: 1 }
const obj2 = { c: 1, d: 2 , x: 2 }
const obj3 = { ...obj1, ...obj2, ...(obj.e) }
// { a: { e: 4, f; 5 }, b: 2, c: 1, d: 2, e: 4, f: 5, x: 2}取剩余&解构：
const a, ...rest } = { a: 1, b: 2, c: 3 }
// a => 1
// rest => { b: 2, c: 3 }数组解构：
const [a, b] = [1, 2]
// 取剩余
const [a, ...rest] = [1, 2, 3]
// a => 1
// rest => [2, 3]模块
const axios = require('axios') // 旧的引入，通用
import axios from 'axios' // 新的引入，只能在顶层
import axios as $ from 'axios' // 别名VUE
基础
组件属性的顺序：
created()：尽量不用mounted()：组件数据已初始化，渲染完成datacomputed：根据data整理出只读的数据watch：当data、computed数据变化（必须新数据和旧数据不一样才叫变化）触发的函数methods：组件的方法components：子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>computed</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
</head>
<body>
<div id="app">
fullName {{ fullName }} <br>
listSum {{ listSum }} <br>
deepB {{ deepB }} <br>
</div>
<script>
let vm = new Vue({
el: '#app',
created() {}, // 一般不用
mounted() {
this.updateDeepB(this.obj.a.b)
},
data() {
return {
firstName: 'hello',
lastName: ' world',
list: [1, 2, 3],
obj: {
a: {
b: 1
}
},
deepB: null
}
},
// computed 数据来源必须是 data
// 对 data 数据的二次加工，只读
computed: {
// 无参数，只能从 this 取数据
fullName() {
return this.firstName + this.lastName
},
listSum() {
return this.list.reduce((x, i) => x+i, 0)
}
},
watch: {
'obj.a.b'(value, oldvalue) {
console.log('watch obj.a.b')
this.updateDeepB(value)
},
fullName(value) {
console.log('watch fullName')
}
},
methods: {
updateDeepB(value) {
this.deepB = value
}
},
components: {
// ...
}
})
</script>
</body>
</html>CLI3项目
全局安装CLI3脚手架：
npm i -g @vue/cli如果使用 npm i -g vue-cli，安装的是CLI2
创建项目 vue-demo：
vue create vue-demo选项：
(*) Babel // js 语法转换器
( ) TypeScript // ts 支持，更严格
( ) Progressive Web App (PWA) Support // WEB APP 支持
( ) Router // 路由，history mode 需要后端支持
( ) Vuex // 数据层支持
( ) CSS Pre-processors // css 预处理语言支持
(*) Linter / Formatter // 语法检查（eslint），格式化
( ) Unit Testing // 单元测试
( ) E2E Testing // 端到端测试
