Vue学习总结

发表于

想要学习一些前端的知识，方便做全栈，本次总结课程为《黑马程序员Vue2.0+Vue3.0入门到精通》

webpack基础

  1. 创建webpack.config.js文件
1
2
3
4
module.exports = {
  // 用来指定构建模式，可选值为development和production
  mode : 'development'
}
  1. npm init -y创建package.json
1
2
3
"scripts" : {
  "dev" : "webpack"  // 可通过npm run 命令进行脚本执行，例如 npm run dev，运行的就是对应的webpack命令
}
  1. 安装webpack
1
npm install webpack@5.5.1 webpack-cli@4.2.0 -D
  1. webpack.config.js默认约定
  • 默认打包入口文件为src->index.js
  • 默认输出文件路径为dist->main.js

VUE指令

  • 数据单向绑定 v-bind，简写:
  • 双向数据绑定v-model，只能用在表单类元素中，跟value绑定
1
2
3
4
<!--单向数据绑定-->
<input type="text" :value="name">
<!--双向数据绑定-->
<input type="text" v-model="name">

Object.defineproperty方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let person = {
			name:'张三',
			sex:'男',
		}
 // 等同于
/**
* let person = {
			age:18
		}
*/
Object.defineProperty(person,'age',{
			value:18,
			enumerable:true, //控制属性是否可以枚举，默认值是false
			writable:true, //控制属性是否可以被修改，默认值是false
			configurable:true //控制属性是否可以被删除，默认值是false

			//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get(){
				console.log('有人读取age属性了')
				return number
			},

			//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set(value){
				console.log('有人修改了age属性，且值是',value)
				number = value
			}
})
赏个🍗吧
0%