一、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 } });
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:新属性值[,其他配置]})
- 1
其他配置项例如:
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:
- 当被监视的属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视
- 监视有两种写法:
- 创建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) })
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; } } })