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节点
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, //控制属性是否可以枚举,默认值是falsewritable: true, //控制属性是否可以被修改,默认值是falseconfigurable: 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 = falsenew 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:
- 当被监视的属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视
- 监视有两种写法:
- 创建Vue时传入watch配置
- 通过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。
Vue2学习笔记(尚硅谷张天禹老师)day-01相关推荐
- 尚硅谷 张天禹老师vue2笔记(方便自己查阅)
视频链接: 文章目录 尚硅谷 张天禹老师vue2笔记 脚手架文件结构 关于不同版本的Vue vue.config.js配置文件 ref属性 props配置项 mixin(混入) 插件 scoped样式 ...
- [记录学习]自学尚硅谷张天禹Vue2+3框架_vue_test
首先感谢尚硅谷和张天禹老师的教学分享!Respect! 学习来源:B站 https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1&vd_source=07 ...
- [记录学习]自学尚硅谷张天禹Vue2+3框架_vue3_test
首先感谢尚硅谷和张天禹老师的教学分享!Respect! 学习来源:B站 https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1&vd_source=07 ...
- Vue2学习笔记(尚硅谷张天禹老师)Day-03
12.过滤器 定义:对要显示的数据进行特定格式化后再显示(使用于一些简单逻辑的处理) 语法: 注册过滤器: 全局过滤器 Vue.filter(name, callback)或局部过滤器 new Vue ...
- Vue2学习笔记(尚硅谷张天禹老师)Day-02
8.class与style绑定 8.1.理解 (1)在应用界面中,某个(些)元素的样式是变化的 (2)class/style绑定就是专门用来实现动态样式效果的技术 8.2.绑定class (1)绑定c ...
- Vue2笔记 尚硅谷张天禹
笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── a ...
- 尚硅谷张天禹Vue课程v-for中key的原理动画PPT(免费领取)
最近在看尚硅谷张天禹老师的Vue课程,他通过PPT动画的形式把v-for中key的底层原理讲解的非常透彻,觉得很生动,很遗憾没有找到对应的PPT动画资源,想必不少朋友跟我一样,为了便于后面的复习,所以 ...
- MySQL学习笔记——尚硅谷李玉婷经典版MySQL基础笔记(一)
MySQL学习笔记--尚硅谷李玉婷经典版MySQL基础笔记(一) MySQL学习笔记目录 MySQL学习笔记--尚硅谷李玉婷经典版MySQL基础笔记(一) 一.基础知识 1.MySQL的语法规范 2. ...
- maven学习笔记——尚硅谷
文章目录 maven学习笔记--尚硅谷 第一章 Maven概述 第一节 为什么要学习Maven 1.Maven 作为依赖管理工具 1.1 jar 包的规模 1.2 jar 包的来源 1.3 jar 包 ...
最新文章
- mysql galera_(十六)MySQL集群galera实现
- jvm性能调优实战 -60 线上系统的JVM参数优化、GC问题定位排查、OOM分析解决
- 【实战】某学校机房项目交换机的配置
- java convexhull_图像上划凸多边形(convexHull()函数)
- 表空间检测异常的问题诊断
- 一篇文章学会mysql_一篇文章帮你搞定所有MySQL命令!
- 谷歌大脑:探索权重无关神经网络
- python处理excel表格-如何用python处理excel表格
- oracle sql语句_7个维度查看oracle执行计划的sql语句执行效率
- 深度学习图片卷积输出大小计算公式
- 第九期 HG255d硬件分析 《路由器就是开发板》
- 抽签小程序,妈妈再也不用担心谁洗碗(分配任务)了,so easy
- Python爬虫进行Web数据挖掘总结和分析
- 【Qt Quick】零基础入门系列之安装与卸载(一)
- 大数据中技术的定义和特点
- 牛客网 小白月赛4 D-郊区春游 最短路+状压dp
- Libev源码分析05:Libev中的绝对时间定时器
- 给我深刻印象的教育片段
- 无线WIFI网络系统介绍
- 北大核心2020_上清华也能选修北大课程?是的!清华北大互相开放部分本科课程...
热门文章
- 国民体质测定标准计算机应用软件,国民体质测定标准知识问答
- html文字素材怎么加,〖HTML教程素材〗文字及贴图代码
- linux怎么退出shell编程,Linux Shell编程(11)——退出和退出状态
- 京东前CTO张晨加入携程,任董事长特别助理兼首席架构师
- .Net中的AOP系列之构建一个汽车租赁应用
- 谈谈企业数字化转型必由之路--顶层设计
- android 跳转外部应用,Android从当前APP跳转到其他应用
- python中choices_Django之choices选项和富文本编辑器的使用详解
- Office对话框大全
- 达梦数据库存储过程脚本