Vue2学习笔记（尚硅谷张天禹老师）day-01

也曾眼眸有光

已于 2023-01-28 15:51:59 修改

阅读量4.6k

点赞数 5

分类专栏：前端文章标签： java javascript vue.js 前端前端框架

于 2022-04-01 10:03:18 首次发布

本文链接：https://blog.csdn.net/qq_53916344/article/details/123890478

版权

前端专栏收录该内容

6 篇文章 10 订阅

订阅专栏

Vue

一、vue核心

1、vue简介

1.1、vue是什么

一套用于构建用户界面的渐进式JavaScript框架。

渐进式：vue可以自底向上逐层应用；简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的的vue插件。

1.2、谁开发的

华人尤雨溪；
vue2（攻壳机动队） vue3（海贼王）

1.3、vue的特点

采用组件化模式，提高代码复用率、且让代码更好的维护
声明式编码（原生js为命令式编码），使无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

1.4、vue官网

vue官网：https://cn.vuejs.org/v2/guide/

1.5、搭建vue开发环境

引入vue.js文件
安装浏览器vue插件：vue.js devyools
Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。

2、初识Vue：

2.1、第一个Vue程序：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <!-- 插值 -->
    <div id="root">hello {{name}}</div>
    <script>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

        // 创建Vue实例
        const x = new Vue({
            el: '#root', //el：挂载点，相当于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { //data用于存储数据，数据供el所指定的容器去使用。值我们暂时先写成一个对象
                name: 'vue',
                age: 8
            }
        });
    </script>
</body>

</html>

2.2、初识Vue总结：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为Vue模板
容器和vue实例必须一一对应，不能一对多，也不能多对一
真实开发中只有一个Vue实例，并且会配合组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有数据
一旦data中的数据发生改变，那么模板中用到的地方也会自动更新

3、模板语法

3.1、插值语法

写法：{{xxx}}
功能：用于解析标签体内容

hello {{name}}

new Vue({
el: ‘#root’,
data: {
name: ‘vue’
}
});

3.2、指令语法

功能: 解析标签包括标签属性、解析标签体内容、绑定事件
举例：或简写为，xxx同样要写js表达式，且可以直接读取到data中的所有属性
说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

hello {{name}}

new Vue({
el: ‘#root’,
data: {
name: ‘vue’,
url: ‘www.xxxx.xx’
}
});

4、数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

备注：

双向绑定一般都应用在表单类元素上（如：、、等）
v-model:value可以简写为v-model，因为v-model默认收集的就是value值

4.1、el与data的两种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello,{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false 
        //el的两种写法：
        // const vm = new Vue({
        //     // el:'#root', //第一种写法
        //     data:{
        //         name:'JOJO'
        //     }
        // })
        // vm.$mount('#root')//第二种写法

        //data的两种写法：
        new Vue({
            el:'#root', 
            //data的第一种写法：对象式
            // data:{
            //     name:'JOJO'
            // }
            //data的第二种写法：函数式
            data(){
                return{
                    name:'JOJO'
                }
            }
        })
    </script>
</body>
</html>

el有2种写法：

创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值

data有2种写法：

对象式

data:{}
函数式

    data:function(){
    	return {
    		
    	}
    }

如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数，否则会报错

由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了

5、MVVM模型

5.1、MVVM模型

M：模型（Model），对应data中的数据
V：视图（View）：对应模板
VM：视图模型（ViewModel）：对应Vue实例对象

data（M）中多有属性最后都出现在了vm身上
vm身上所有属性及Vue原型上所有属性，在vue模板（V）中都可以直接使用

5.2、Object.defineProperty方法

功能：给对象添加属性
语法：

Object.defineProperty(对象名,新属性名,{value:新属性值[,其他配置]})

其他配置项例如：

let person = {
            name: 'zhangsan',
            sex: 'nan'
        }
        Object.defineProperty(person, 'age', {
             value: 18,
             enumerable: true, //控制属性是否可以枚举，默认值是false
             writable: true, //控制属性是否可以被修改，默认值是false
             configurable: true //控制属性是否可以被删除，默认值是false
        })
        console.log(person);

借助Object.defineProperty方法让对象和数据产生关联：

let number = 14;
        let person = {
            name: 'zhangsan',
            sex: 'nan'
        }
        Object.defineProperty(person, 'age', {
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get() {
                console.log('有人读取age属性了');
                return number;
            },

//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value) {
            console.log('有人修改了age属性，且值为' + value);
            number = value;
        }
    })
    console.log(person);

5.3、理解数据代理

什么是数据代理：通过一个对象代理对另一个对象中属性的操作（读写）
例如一个简单的数据代理：

 let obj1 = {
            x: 100
        }
        let obj2 = {
            y: 200
        }
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x;
            },
            set(value) {
                obj1.x = value
            }
        })

5.4、vue中的数据代理

在vue中，通过vm对象来代理data对象中的属性的操作（读写）
模板中直接写属性名就可以读写操作，这就用到了数据代理，如下有：

 <div id="root">
        <h2>学校：{{name}}</h2>
        <h2>地址：{{address}}</h2>
    </div>

Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el: "#root",
            data: {
                name: 'beida',
                address: 'beijing'
            }
        })

模板中用的是name，而不是data.name（即data.name），这里就用到了数据代理，vue对象代理了data对象；通过vm.name就可以读写_data中的name。

这里vm.name和vm.data.name的值相同，修改vm.name的值，vm.data.name也会改变。

基本原理：
数据代理，通过Object.defineProperty()方法把data对象中所有属性添加到vm，为每一个添加到vm上的属性，都指定一个getter/setter，getter/setter内部去操作（读写）data中对应的数据

vue中数据代理的好处：
更加方便的操作data中的数据

6、事件处理

6.1、事件处理的基本使用

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数不要用箭头函数，否则this指向就不是vm了
methods中配置的函数，都被Vue所管理的函数，this的指向是vm 或组件实例对象
@click="demo"和@click="demo($event)"效果一样，但后者可以传参

     <div id="root">
            <h3>欢迎来到{{name}}学习</h3>
            <br>
            <button v-on:click="showInfo1">点我提示信息1</button>
            <button v-on:click="showInfo2(666,$event)">点我提示信息2</button>
        </div>

  Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
            const vm = new Vue({
                el: "#root",
                data: {
                    name: 'atshanggui'
                },
                methods: {
                    showInfo1(event) {
                        console.log(event.target);
                        console.log(this);
                        alert('同学你好')
                    },
                    showInfo2(a, event) {
                        console.log(event.target);
                        console.log(this);
                        alert(a + '同学你好')
                    }
                }
            })

6.2 事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件 -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡 -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
			</div>

			<!-- 事件只触发一次 -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件 -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

Vue中的事件修饰符：

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，比如可以这么用：@click.prevent.stop=“showInfo”

6.3、键盘事件

（1）常用的两个键盘触发事件：

keydown：按下按键不用抬起来就触发事件
keyup：按下按键抬起来才触发事件（常用）

（2）Vue中按键别名

 <div id="root">
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
    <script>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el: "#root",
            methods: {
                showInfo(e) {
                    console.log(e.target.value);
                }
            }
        })
    </script>

上面代码中通过Enter键按下后抬起触发事件，enter为vue中Enter的别名

常用的按键别名有：

回车=>enter
删除=>delete（捕获“删除”和“退格”键）
退出=>esc
空格=>space
换行=>tab（特殊，必须配合keydown使用）
上=>up
下=>down
左=>left
右=>right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意驼峰命名法的原始key值要转化为短横线命名，例如大小写转换键KebabCase就要写成kebab-case。

系统修饰键（用法特殊）：ctrl、alt、shift、meta，用法如下：

配合keyup使用：按下修饰键的同时再按下其他键，随着释放其他键，事件才被触发
配合kedown使用：正常触发事件
如果只想要修饰键+一个其他键才能触发事件可以连续写，例如下面这行代码就是只有按下ctrl+y才能触发事件：

@keyup.ctrl.y=“xxx”

Vue.config.keyCodes.自定义键名 =键码，可以自定义按键别名。

在事件触发函数中获取键名和键码：

showInfo(e) {
    console.log(e.key, e.keyCode);
}

可以使用keyCode去指定具体的按键，比如：@keydown.13=“showInfo”，但不推荐这样使用

7、计算属性与监视

7.1、计算属性

定义：要用的属性不存在，要通过已有属性计算出来
原理：底层借助了Object.defineproperty方法提供的getterr和setter
get函数什么时候执行？
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试更方便
备注：
- 计算属性最终会出现在vm上，直接调用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
- 如果计算属性确定不考虑修改，可以使用计算属性的简写形式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>计算属性</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            姓：<input type="text" v-model="firstName"><br><br>
            名：<input type="text" v-model="lastName"><br><br>
            姓名：<span>{{fullName}}</span>
        </div>
    
        <script>
            Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
            const vm = new Vue({
                el: "#root",
                data: {
                    firstName: '张',
                    lastName: '三'
                },
                //计算属性
                computed: {
                    fullName: {
                        // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                        get() {
                            return this.firstName + '-' + this.lastName;
                        },
                        //多数情况只读不改，所以只读情况set就不用写
                        set(value) {
                            const arr = value.split('-');
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                        }
                    }
                }
            })
        </script>
    </body>
    </html>

多数情况只读不改，所以只读情况set就不用写，就可以直接写一个函数：

 fullName() {
     return this.firstName + '-' + this.lastName;
}

这个函数的功能就是get函数的功能，最后还是会把fullName配置到vm对象下，所以模板中写的是fullName，而不是fullName()，写fullName()就相当于调用get()，是错误的。

7.2、监视属性

（1）监视属性（watch）可以监视数据的变化，data和computed中的数据都可以被监视。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气好{{info}}!</h2>
        <button @click="changeWeather">点击切换天气</button>
    </div>

    <script>
        Vue.config.productionTip = false 

        new Vue({
            el:'#root', 
            data:{ 
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽' 
                }
            },
            methods:{
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
            watch:{
                isHot:{
                    immediate:true, //初始化时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时
                    handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
                }
            }
        })
    </script>
</body>
</html>

效果展示
在这里插入图片描述
总结：

监视属性watch：

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视
监视有两种写法：
1. 创建Vue时传入watch配置
2. 通过vm.$watch监视

vm.$watch("isHot", {
    immediate: true, //初始化时让handler调用一下
    handler(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue);
    }
});

（2）深度监视
Vue中的监视属性watch默认不监视对象内部值的改变（只监视一层），比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深度监视</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>a的值是:{{numbers.a}}</h3>
		<button @click="numbers.a++">点我让a+1</button>
		<h3>b的值是:{{numbers.b}}</h3>
		<button @click="numbers.b++">点我让b+1</button>
    </div>

    <script>
        Vue.config.productionTip = false 

        new Vue({
            el:'#root', 
            data:{ 
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                }
            },
            watch:{
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
					handler(){
						console.log('numbers改变了')
					}
                }
                //监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
            }
        })
    </script>
</body>
</html>

效果展示
在这里插入图片描述
总结：

深度监视：
- Vue中的watch默认不监测对象内部值的改变（一层）
- 在watch中配置deep:true可以监测对象内部值的改变（多层）
备注：
- 使用watch时根据监视数据的具体结构，决定是否采用深度监视
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

（3）监视属性的简写
前面学习计算属性computed的时候，只有get函数不写set函数时可以简写该属性；在这监视属性watch也一样，只写handler函数不写deep，immediate时也可以简写。
例如上面写过的如果只写hander就可以简写为：

同样为了不改变函数的this指向，也能写成箭头函数；即一般在Vue内管理的函数都不要写箭头函数。

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            //正常写法
            isHot:{
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}, 
            //简写
            isHot(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue,this)
			}
        }
    })

    //正常写法
    vm.$watch('isHot',{
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    })
    //简写
    vm.$watch('isHot',function(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    })
</script>

7.3、计算属性和监视属性的区别

（1）computed能完成的功能，watch都可以完成
（2）watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
（3）都能完成的尽量用computed，因为computed是声明式的，watch是命令式的

下面这个姓名案例两种属性都可以实现：

<div id="root">
    姓：<input type="text" v-model="firstName"><br><br>
    <!--  -->
    名：<input type="text" v-model="lastName"><br><br>
    <!--  -->
    全名：{{fullName}}
</div>

计算属性实现：

Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el: "#root",
        data: {
            firstName: '张',
            lastName: '三'
        },
        computed: {
            fullName() {
                return this.firstName + '-' + this.lastName;
            }
        }
    })

监视属性实现：

const vm = new Vue({
        el: "#root",
        data: {
            firstName: '张',
            lastName: '三',
            fullName: "张三"
        },
        watch: {
            firstName(newValue, oldValue) {
                this.fullName = newValue + '-' + this.lastName;
            },
            lastName(newValue, oldValue) {
                this.fullName = this.firstName + '-' + newValue;
            }
        }
    })

但是异步任务用计算属性就很难实现，用监视属性就很好实现，比如加一个计时器，让全名的姓延迟一秒更新：

const vm = new Vue({
        el: "#root",
        data: {
            firstName: '张',
            lastName: '三',
            fullName: "张三"
        },
        watch: {
            firstName(newValue, oldValue) {
                setTimeout(() => {
                    this.fullName = newValue + '-' + this.lastName;
                }, 1000)
            },
            lastName(newValue, oldValue) {
                this.fullName = this.firstName + '-' + newValue;
            }
        }
    })

总结：

computed和watch之间的区别：
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。
目标都一个，就是让this指向是vm。

也曾眼眸有光

关注

5
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
Vue2学习笔记（尚硅谷张天禹老师）day-01

Vue一、vue核心1、vue简介1.1、vue是什么一套用于构建用户界面的渐进式JavaScript框架。渐进式：vue可以自底向上逐层应用；简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的的vue插件。1.2、谁开发的华人尤雨溪；vue2（攻壳机动队） vue3（海贼王）1.3、vue的特点采用组件化模式，提高代码复用率、且让代码更好的维护声明式编码（原生js为命令式编码），使无需直接操作DOM，提高开发效率使用虚拟DOM+优秀的Diff算法，尽量复用DOM
复制链接

扫一扫

专栏目录