这篇博客详细整理了Vue的学习笔记，涵盖了从Vue2的基础到Vue3的Composition API，包括Vue2的Vue实例创建、数据绑定、事件处理、计算属性、监听属性、指令使用等内容，以及Vue3的setup函数、ref、reactive、Vue3响应式原理和生命周期等知识点。内容丰富，适合Vue初学者和进阶学习者阅读。
目录
--------------------------------------------------------继续整理ing
一、初始VUE
黑马vue入门
1.Vue2基础
- 简介：vue是JS框架；简化了DOM操作；可响应式数据驱动。
- 第一个vue程序：导入开发版本的vue.js；创建vue实例，设置el属性和data属性；用模板语法{ {......}}
- el挂载点：设置Vue实例挂载（管理）元素；管理el选项命中的元素及内部的后代元素；可使用其他选择器(但是还是建议使用ID选择器)；可是使用其他双标签(但除了HTML、BODY)
- date数据对象：vue的数据定义在data中；data可写复杂类型的数据；遵守js语法即可。
2.本地应用
《小黑记事本》
①.新增：生成列表结构（用v-for数组）; 获取用户输入（v-model）; 回车新增数据（v-on.enter）
②.删除：数据改变，绑定的元素也同步改变；事件的自定义参数；splice方法的作用
③.统计：基于数据的开发方式（v-text、length）；v-text指令的作用
④.清空：点击清空所有信息（v-on、v-for(可省)）
⑤.隐藏：没有数据时隐藏元素（v-show）
创建vue的三个要素：el（挂载点）、data（数据）、methods（方法）
- （1）内容绑定，事件绑定
| v-text | 作用：设置标签的内容(textContent)。使用差值表达式{ {...}}可替换指定内容 |
| v-html | 作用：设置标签的innerHTML。内容中有html结构会被解析为标签；无论v-text指令是什么内容，都只会解析为文本。 |
| v-on(基础） | 作用：元素绑定事件。指令可简写为@；事件名不需写on；绑定的方法定义在methods属性中。方法内部是通过this关键字访问定义在data中的数据。 补：事件绑定方法写成函数调用的形式，可传入自定义参数。定义方法时，需定义形参来接收传入的实参，事件后面跟上.修饰符可对事件进行限制。（事件修饰符有很多种，eg：.enter可限制触发的按键为回车） |
- （2）显示切换，属性绑定
| v-show | 作用：真假切换元素的显示状态。 原理：修改元素display，实现显示和隐藏。 内容最后都会解析为布尔值（true为显示，false为隐藏） |
| v-if | 作用：真假切换元素的显示状态。 本质：操作dom元素来切换显示状态（与v-show的区别） （true，元素存在dom树中；false，元素从dom树中移除） |
| v-bind (单向绑定) |
格式为v-bind:属性名=表达式，简写为:属性名=表达式 作用：为元素绑定属性，eg：src 需动态增删class时，建议用对象的方式。 |
- （3）列表循环，表单元素绑定
| v-for | 作用：根据数据生成列表结构 语法：(item,index) in 数据 经常和数组一起使用，也可结合其他指令一起使用。数组长度更新会同步到页面上（是响应式的） |
| v-model (双向绑定，用于表单元素) |
作用：便捷设置和获取表单元素的值。 绑定的数据会和表单元素值相关联。 绑定的数据 <——>(双向绑定) 表单元素的值 |
3.网络应用
和本地应用的区别：改变了数据来源。
3.1 axios的格式：
①.axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
②.axios.post(地址,{key=value,key2=value2}.then(function(response){},function(err){})
3.2 axios网络请求库
axios中文网|axios API 中文文档 | axios
- 需要先导入才能使用。
- 用get或用post即可发送对应的请求。
- then方法中，回调函数会在请求成功或失败时触发。通过回调函数的形参可获取响应内容，或错误信息。
3.3 axios + vue
可以把this保存起来，回调函数中直接使用保存的this即可。
二、笔记——VUE2
尚硅谷vue2+vue3全家桶
01.认识Vue
1.让Vue工作，必须创建一个Vue实例，且传入一个配置对象；
2.root容器里的代码依然符合html规范，混入了特殊的Vue语法而已；
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{ {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，则页面中用到该数据的地方也会自动更新。
注意区分：js表达式 和 js代码（语句）
(1).js表达式：一个表达式会生成一个值，可放在任何一个需要值的地方；
eg：(1).a
(2).a+b
(3).demo(1)
(4).x === y ? 'a' : 'b'
(2).js代码（语句）
(1).if(){}
(2).for(){}
01.1 Vue的特点：
01.2：Vue与其它 JS 框架的关联
01.3 Vue 周边库
01.4 Vue的官方文档
02.Vue两大类模板语法
(1).插值语法：
功能：用于解析标签体内容。
写法：{ {xxx}} 其中xxx是js表达式，可直接读取到data中的所有属性。
(2).指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）。
eg：v-bind:href="xxx" 或简写为 :href="xxx" 。其中xxx同样要写js表达式
注：Vue中有很多的指令，且形式都是：v-????
03.Vue数据绑定的2种方式
- 1.单向绑定（v-bind）：
数据只能从data流向页面。
- 2.双向绑定（v-model）：
数据既可以从data流向页面，也可以从页面流向data。
注：①.双向绑定一般都用在表单类元素上（eg：input、select等）
②.v-model:value 因为v-model默认收集value值，所以可简写为v-model ，
04.el与data的2种写法
(1).el的2种写法：
①.new Vue时，配置的el属性
new Vue({
el: '#root',//el的第(1)种写法
data: {
name: 'jack',
}
})②.先创建Vue实例，后再通过vm.$mount('#root')指定el的值
const v = new Vue({
data: {
name: 'jack',
}
})
console.log(v)
v.$mount('#root') //el的第(2)种写法
(2).data的2种写法：
①.对象式：new Vue时，配置的data{ A : B }
new Vue({
el: '#root',
data: { //data的第(1)种写法：对象式
name: 'jack',
}
})②.函数式（Vue所管理的函数）
//data的第(2)种写法：函数式（vue所管理的函数）
new Vue({
data() {
console.log('@@@', this) //此处的this是Vue实例对象
return {
name: 'hello'
}
}
})注：Vue所管理的函数，一定不要写箭头函数。若写了箭头函数，则this不再是Vue实例，而是window的实例.
如何选择：目前哪种写法都可；之后学习到组件时，复用的data必须用函数式，否则会报错。
05.MVVM模型
(1).M：模型（Model）：data中的数据
(2).V：视图（View）：模板代码
(3).VM：视图模型（ViewModel）：Vue实例（ eg：new Vue({...}) ）
观察：
·data中所有的属性，都出现在了vm身上。
·vm身上所有的属性以及Vue原型上所有属性，在Vue模板中都可以直接使用。
06.数据代理
06.1 Object.defineProperty方法
语法：Object.defineProperty(obj, prop, descriptor)
参数：obj要定义属性的对象。prop要定义或修改的属性的名称。descriptor要定义或修改的属性描述符。
返回值：被传递给函数的对象。
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script>
<script>
let number = 18
let person = {
name: 'jack',
sex: 'man',
}
Object.defineProperty(person, 'age', {
/* value: 18,
enumerable: true, //enumerable控制属性是否可以枚举，默认值是false
writable: true, //writable控制属性是否可以被修改，默认值是false
configurable: true, //configurable控制属性是否可以被删除，默认值是false
*/
//当读取person的age属性时，get函数（即：getter）就会被调用，且返回值是age的值
get() {
console.log('有人读取了age属性')
return number
},
//当修改person的age属性时，set函数（即：setter）就会被调用，且会收到修改age的具体值
set(value) {
console.log('有人修改了age属性，且值为：', value)
number = value
},
})
console.log(person)
</script>06.2 理解数据代理
数据代理：通过一个对象对另一个对象中属性的操作（读/写）
<script type="text/javascript">
let obj = {
x: 100
}
let obj2 = {
y: 100
}
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
},
})
</script>06.3. Vue中的数据代理
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）。
优点：更加方便的操作data中的数据。
基本原理
通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。
<body>
<div id="root">
<h2>名字：{
{_data.name}}</h2>
<h2>地址：{
{address}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script>
</body>
<script>
/* 此时可用数据代理。通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。
let data = {
name: 'jack',
address: 'beijing'
} */
const vm = new Vue({
el: '#root',
data: {
name: 'jack',
address: 'beijing'
}
})
</script>07.事件处理
07.1 事件的基本使用
事件基本使用：
- 绑定事件用v-on:xxx 或 @xxx 其中xxx为事件者
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，不要用箭头函数！否则this就不是vm
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
- @click="demo" 和 @click="demo($event)" 效果一样，但后者可以传参！
<body>
<div id="root">
<h2>welcome to {
{name}}</h2>
<button @click="show1(666,$event)">点击提示信息1</button>
<!-- 若需要传参，则加括号()，在括号中输入参数 -->
<button @click="show2">点击提示信息2</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script>
<script>
// vm为实例对象
const vm = new Vue({
el: '#root',
data: {
name: 'GX'
},
methods: {
show1(event, number) {
console.log(event, number),
alert("one_Hello!")
},
show2(number) {
alert("two_Hello!")
},
},
})
</script>
</body>07.2 事件修饰符
Vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式，(只有捕获，阻止了冒泡事件的发生)
- self：只有event.target是当前操作的元素才是触发事件，在一定程度上阻止了冒泡
- passive：事件的默认行为立即执行，无序等待事件回调执行完毕
- 滚动事件： ①.scroll 鼠标滚轮、滚动条 ②.wheel 鼠标滚轮
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>Welcome to {
{name}}</h2>
<!-- 1.prevent：阻止默认事件（常用） -->
<a href="https:baidu.com" @click="show">点击一下会有弹出框，但是不会跳转噢！</a>
<!-- 2.stop：阻止事件冒泡（常用） -->
<div class="demo1" @click='show'>
<button @click.stop='show'>按钮2</button>
</div>
<!-- 3.once：事件只触发一次（常用） -->
<div>
<button @click.once='show'>按钮3</button>
</div>
<!-- 4.capture：使用事件的捕获模式 (只有捕获，阻止了冒泡事件的发生)-->
<div class="box1" @click.capture="showmsg(1)">
div1
<div class="box2" @click="showmsg(2)">
div2
</div>
</div>
<!-- 5.self：只有event.target是当前操作的元素才是触发事件 -->
<!-- 在一定程度上阻止了冒泡 -->
<div class="demo1" @click.self='show'>
<button @click='show'>按钮5</button>
</div>
<!-- 6.passive：事件的默认行为立即执行，无序等待事件回调执行完毕 -->-->
<!--
滚动事件： ①.scroll 鼠标滚轮、滚动条
②.wheel 鼠标滚轮
-->
<ul @scroll="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul @wheel="demo1" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script>
<script>
new Vue({
el: '#root',
data: {
name: 'NN'
},
methods: {
show(e) {
alert("Hello!")
},
showmsg(msg) {
console.log(msg)
},
demo() {
// for (let i = 0; i < 10000; i++) {
// console.log('@')
// }
// console.log('tried')
console.log('scroll')
},
demo1() {
console.log('wheel');
}
},
})
</script>
</body>07.3 键盘事件
- 1.Vue中常用的按键别名：
| 回车 |
——> | enter |
| 删除 | ——> | delete（捕获“删除”和“退格”键） |
| 退出 | ——> | esc |
| 空格 | ——> | space |
| 换行 | ——> | tab （特殊按键之一，必须配合keydown使用） |
| 上 | ——> | up |
| 下 | ——> | down |
| 左 | ——> | left |
| 右 | ——> | right |
- 2.系统修饰键（特殊按键）：ctrl、alt、shift、meta
(1).配合keyup使用时：按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发
(2).配合keydown使用时：正常触发事件。
- 3.Vue未提供别名的按键，可使用按键原始的key值去确定，但注意要转为kebab-case这样子的命名（A-B短横线命名）
- 4.也可使用keyCode去指定具体的按键（eg：@keyup.13="show"）【不推荐使用】
- 5.定制按键别名的方法： Vue.config.keyCodes.自定义键名 = 键码
08.计算属性
08.1 姓名案例——插值语法
<body>
<!-- 准备一个容器 -->
<div id="root">
姓：<input type="text" v-model="fname"><br/> 名：
<input type="text" v-model="lname"><br/>
全名： <span>{
{fname.slice(0,2)}}-{
{lname}}<span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script>
<script>
new Vue({
el: '#root',
data: {
fname: "张",
lname: "三",
},
})
</script>
</body>08.2 姓名案例-methods
<body>
<!-- 准备一个容器 -->
<div id="root">
姓：<input type="text" v-model="fname"><br/>
名：<input type="text" v-model="lname"><br/>
全名：<span>{
{fullname()}}<span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script>
<script>
new Vue({
el: '#root',
data: {
fname: "张",
lname: "三",
},
methods: {
fullname(){
// return '小猪佩奇'
console.log('@',this.fname)
console.log('@',this.lname)
return this.fname + '-' +this.lname
}
}
})
</script>
</body>08.3 姓名案例-计算属性
计算属性：
1.定义：要用的属性不存在，通过已有的属性计算得来的。
2.原理：借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
(1).初次读取时会执行一次（因为有缓存机制，所以再读取就不调用。）
(2).当依赖的数据发生改变时会被再次调用
4.优势：与methods实现相比，内部有缓存机制（可复用），效率更高，调试方便
5.注：
(1).计算属性最终会出现在vm上，直接读取使用即可。
(2).若计算属性要被修改，则必须写set函数去响应修改，且set中要引起计算时的数据发生改变。
<body>
<!-- 准备一个容器 -->
<div id="root">
姓：<input type="text" v-model="fname"><br/>
名：<input type="text" v-model="lname"><br/>
全名：<span>{
{fullName}}<span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script>
<script>
const vm=new Vue({
el: '#root',
data: {
fname: "张",
lname: "三",
},
computed: {
fullName:{
//get的作用？ 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候被调用？ 1.初次读取时。因为有缓存，所以再读取就不调用。 2.所依赖的数据发生变化时。
get(){
console.log('get被调用了',this)//此处的this是vm
console.log('fname')
return this.fname + '-' +this.lname
},
//
最低0.47元/天 解锁文章
扫一扫
1988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
