- A+
所属分类：Web前端
一、Vue
Vue是遵循MVVW架构模式实现的前端框架
npm导入路径：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js
MVVM架构 Model数据 View模板 ViewModel处理数据
1、ES6的常用语法：
变量的定义，var，let，const
- Var 变量的提升，函数作用域 全局作用域，重新定义不会报错，可以重新赋值
- let 块级作用域 { }，重新定意会报错，可以重新赋值
- const 定义不可修改的常量，不可以重新赋值
箭头函数的this取决于当前的上下文环境：类似于python的匿名函数
this指当前函数最近的调用者，距离最近的调用者
解构：
字典解构 {key,key,...} 注：要使用key才行
数组结构 [x,y,.....]
let obj = { a:1, b:2 }; let hobby = ["吹牛", "特斯拉", "三里屯"]; let {a,b} = obj; let [hobby1,hobby2,hobby3] = hobby; console.log(a); console.log(b); console.log(hobby1); console.log(hobby2); console.log(hobby3); 2、Vue的核心思想是数据驱动视图
1）Vue的常用指令
v-text：获取文本内容
v-html：获取html内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <h2 v-text="name"></h2> <h3 v-text="age"></h3> <div v-html="hobby"></div> </div> <script> const app = new Vue({ el:"#app", data:{ name:"PDD", age:18, hobby:"<ul><li>学习</li><li>刷剧</li><li>Coding</li></ul>" } }); </script> </body> </html> v-for：循环获取数组
v-for：循环获取字典
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li> <li v-for="(item,index) in one" :key="index"> {{index}}:{{item.name}}:{{item.age}}:{{item.hobby}} </li> </ul> </div> <script> const app = new Vue({ el:"#app", data:{ course_list:["classname","teacher","student"], one:[{name:"eric",age:"18",hobby:"music"}, {name:"bob",age:"18",hobby:"dance"}] } }) </script> </body> </html> v-bind：自定制显示样式，动态绑定属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_app{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <div v-bind:class="{my_app:is_show}"> </div> <img :src="my_src" alt=""> <!-- v-bind: 可以简写为 : --> </div> <script> const app = new Vue({ el:"#app", data:{ is_show:true, //true表示显示style样式，false不显示style样式 my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg" alt="Vue整理" } }) </script> </body> </html> v-on@事件名：事件绑定
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-on@click只会执行一次，是在第一次进入页面的时候，@click会循环执行 --> <button @click="my_click('hello')" v-on="{mouseenter:my_enter,mouseleave:my_leave}"> 点击弹窗 </button> <!-- <button @click="my_click('hello')" @mouseenter="my_enter",@mouseleave="my_leave"> 繁琐写法--> <!-- 点击弹窗 --> <!-- </button> --> </div> <script> const app = new Vue({ el:"#app", data:{}, methods:{ my_click:function(x){ alert("luke" + x) }, my_enter:function(){ console.log("鼠标移入事件") }, my_leave:function(){ console.log("鼠标移出事件") } } }) </script> </body> </html> v-if：条件判断
v-if v-else-if v-else
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <div v-if="role == 'admin' ">管理员你好</div> <div v-else-if="role == 'hr' ">查看简历</div> <div v-else>没有权限</div> </div> <script> const app = new Vue({ el:"#app", data:{ role:"admin" }, methods:{} }) </script> </body> </html> v-show：布尔值类型判断
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <div v-show="admin">管理员你好</div> <div v-show="hr">查看简历</div> <div v-show="others">没有权限</div> </div> <script> const app = new Vue({ el:"#app", data:{ admin:true, hr:false, others:false, }, methods:{} }) </script> </body> </html> 综合案例
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <div v-show="admin">管理员你好</div> <div v-show="hr">查看简历</div> <div v-show="others">没有权限</div> <button @click="my_click">点击显示或隐藏</button> <div v-show="is_show">hello</div> </div> <script> const app = new Vue({ el:"#app", data:{ admin:true, hr:false, others:false, is_show:false }, methods:{ my_click:function(){ this.is_show=!this.is_show } } }) </script> </body> </html> v-model：获取数据，标签的属性设置 ，获取其属性值，用户信息等，例如input，select等
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="username"> {{username}} <hr> <textarea type="text" cols="30" rows="10" v-model="article"> {{article}} </textarea> <hr> <select name="" v-model="choices"> <option value="1">阿萨德</option> <option value="2">主线程</option> <option value="3">权威</option> </select> {{choices}} <hr> <select name="" v-model="choices_multiple" multiple> <option value="1">阿萨德</option> <option value="2">主线程</option> <option value="3">权威</option> </select> {{choices_multiple}} </div> <script> const app = new Vue({ el:"#app", data:{ username:"1234", article:"123456", choices:"", choices_multiple:['1'] }, methods:{} }) </script> </body> </html> v-model.lazy：失去光标绑定数据事件
v-model.lazy.number：数据类型的转换
v-model.lazy.trim：清除空格
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model.lazy="username"> {{username}} <hr> <!-- 前端默认只显示一个空格，pre使数据原始化展示 --> <input type="text" v-model.lazy="username"> <pre>{{username}}</pre> <hr> <!-- --> <input type="text" v-model.lazy.trim="username_trim"> <pre>{{username_trim}}</pre> <hr> <input type="text" v-model.lazy.number="article"> {{article}} {{typeof article}} </div> <script> const app = new Vue({ el:"#app", data:{ username:"1234", username_trim:"1234", article:"123456" }, methods:{} }) </script> </body> </html> 2）自定义指令
v-自定义的函数（指令）：自定制函数（指令）
Vue.directive（）
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <div class="my_box" v-pin.right.top="pinned"></div> </div> <script> Vue.directive("pin",function(el,binding){ console.log(el); //指令的标签元素 console.log(binding); //指令的所有信息 let adr = binding.modifiers; if(binding.value){ //定位到浏览器的右下角 el.style.position = "fixed"; // el.style.right='0'; // el.style.bottom='0'; //指令修饰符定位 for (let posi in adr){ el.style[posi]=0; } }else{ el.style.position = "static"; } }); const app = new Vue({ el:"#app", data:{ pinned:true } }) </script> </body> </html> 3）方法集合
v-text
v-html
v-for
v-if v-else-if v-else
v-bind 绑定属性
v-on 绑定事件
v-show display
v-model 数据双向绑定
input
textarea
select
指令修饰符
.lazy
.number
.trim
自定义指令
Vue.directive（'指令名'，function(el,参数binding){ }）
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifiers 指令修饰符组成的对象
二、Vue获取DOM，数据监听，组件，混合和插槽
注：“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符。
1、Vue获取DOM
给标签加ref属性：ref="my_box"
获取：this.$refs.my_box;
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <div ref="my_box"></div> <button v-on:click="my_click">点击显示文本</button> </div> <script> const app = new Vue({ el:"#app", data:{}, methods:{ my_click: function(){ let ele = this.$refs.my_box; console.log(ele); ele.innerText = "hello" } } }) </script> </body> </html> computed：计算属性，放的是需要处理的数据
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <table> <tr> <th>科目</th> <th>成绩</th> </tr> <tr> <td>Python</td> <td><input type="text" v-model.number="python"></td> </tr> <tr> <td>Java</td> <td><input type="text" v-model.number="java"></td> </tr> <tr> <td>Go</td> <td><input type="text" v-model.number="go"></td> </tr> <tr> <td>总分</td> <td>{{total}}</td> </tr> <tr> <td>平均分</td> <td>{{average}}</td> </tr> <!-- 繁琐方法 --> <!-- <tr> --> <!-- <td>总分</td> --> <!-- <td>{{python + java + go}}</td> --> <!-- </tr> --> <!-- <tr> --> <!-- <td>平均分</td> --> <!-- <td>{{total/3}}</td> --> <!-- </tr> --> </table> </div> <script> const app = new Vue({ el:"#app", data:{ python:"", java:"", go:"" }, methods:{}, computed:{ total: function(){ return this.python + this.java + this.go }, average: function(){ return this.total/3 } } }) </script> </body> </html> 2、数据监听
watch ：监听不到可以添加deep属性
deep:true ：深度监听，deep监听不到，可以使用 $.set() 属性操作值
$.set()
字符串监听：监听到的新旧值不同。
数组：只能监听到长度的变化，新旧值相同，改变数组值的时候要使用 $set(array,index,value)
对象：只能监听到value的改变，必须深度监听：deep，增加对象的key必须使用：$set(array,key,value)
注：数组监听有坑
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> {{name}} <br> {{hobby}} <br> {{obj}} <br> <button v-on:click="my_click">点我改变数据</button> </div> <script> const app = new Vue({ el:"#app", data:{ name:"eric", hobby:["打游戏","打豆豆"], obj:{ boy:"PDD", age:23 } }, methods:{ my_click: function(){ // 修改name数据 this.name = "bob"; // this.hobby.push("潜水"); // this.hobby[0] = "潜水"; // app.$set(this.hobby,0,"潜水"); // this.obj.age = 20; // this.obj["sex"] = "男"; app.$set(this.obj,"sex","男"); } }, watch: { name: { handler: function(val,oldVal){ console.log(val); console.log(oldVal); } }, hobby: { handler: function(val,oldVal){ // 改变数组的长度的时候新旧值相同 console.log(val); console.log(oldVal); }, // deep: true }, obj: { handler: function(val,oldVal){ console.log(val); console.log(oldVal); }, deep: true } } }) </script> </body> </html> 3、组件
可复用
全局组件的定义：Vue.component("myheader",{}）
全局组件的使用：<myheader></myheader>
<!-- 全局注册组件 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <myheader></myheader> </div> <div id="apps"> <myheader></myheader> </div> <script> Vue.component("myheader",{ template: '<div><h1>{{ title }}</h1></div>', // template: '<div><h1>Hello world!</h1></div>', data(){ // 对象的单体模式 return{ title: "HelloWorld！" } }, methods:{} }); const app = new Vue({ el:"#app", data:{}, methods:{} }); const apps = new Vue({ el:"#apps", data:{}, methods:{} }) </script> </body> </html> 局部组件的定义：components: {my_com: my_com_config}
局部组件的使用：<my_com></my_com>
<!-- 局部注册组件 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <my_com></my_com> </div> <script> let my_com_config = { template: '<div><h1>局部组件</h1></div>' }; const app = new Vue({ el:"#app", components: { my_com: my_com_config } }) </script> </body> </html> 父子组件：
注：组件只识别一个作用域块
<!-- 父子组件的进本使用 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <my_com></my_com> </div> <script> let child_config = { template: '<div><h2>子组件</h2></div>' }; let my_com_config = { template: '<div><h1>父组件</h1><child></child></div>', components: { child: child_config } }; const app = new Vue({ el:"#app", components: { my_com: my_com_config } }) </script> </body> </html> 父子组件的通信：
父子通信（主操作在父级）：
父级定义方法：:father_say="f_say"
子级调用方法：props: ['father_say']
子级使用方法（模板语言直接调用）：{{father_say}}
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <my_com></my_com> </div> <script> let child_config = { template: '<div><h2>子组件</h2><p>father_say：{{father_say}}</p></div>', props: ['father_say'] }; let my_com_config = { template: '<div><h1>父组件</h1><child :father_say="f_say"></child></div>', components: { child: child_config }, data(){ return { f_say: "滚~~" } } }; const app = new Vue({ el:"#app", components: { my_com: my_com_config } }) </script> </body> </html> 子父通信（主操作在子级）：
子集定义方法：@click='my_click'
子级提交事件：this.$emit("事件名",data)
父级绑定子级提交的事件：@事件名="处理的方法"
父级处理方法： methods: {处理的方法: function(data){data 数据处理} }
父级使用方法（模板语言直接调用）：{{say}}
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <my_com></my_com> </div> <script> let child_config = { template: "" + "<div>" + "<h2>子组件</h2>" + "<button @click='my_click'>向父级传送数据</button>" + "</div>", methods: { my_click(){ // 子组件提交事件名称 this.$emit("son_say","滚~~") } } }; let my_com_config = { template: '' + '<div>' + '<h1>父组件</h1>' + '<child @son_say="my_son_say"></child>' + '<p>son_say：{{say}}</p>' + '</div>', components: { child: child_config }, data(){ return { say:"" } }, methods: { my_son_say: function(data){ this.say = data } } }; const app = new Vue({ el:"#app", components: { my_com: my_com_config } }) </script> </body> </html> 非父子级通信：
定义中间调度器：let event = new Vue()
需要通信的组件向中间调度器提交事件：event.$emit("事件名", data)
接收通信的组件监听中间调度器里的事件：event.$on("事件名", function(data){data操作(注意：this的问题)})
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <eric></eric> <jing></jing> </div> <script> let midlen = new Vue(); let eric = { template: "" + "<div>" + "<h1>This is Eric</h1>" + "<button @click='my_click'>点击通知静静</button>" + "</div>", methods: { my_click(){ // 通知bob，晚上等我 // 向bob，提交事件 midlen.$emit("email","晚上，一起吃饭") } } }; let jing = { template: "" + "<div>" + "<h1>This is jing</h1>" + "<p>eric和我说：{{ eric_email }}</p>" + "</div>", data(){ return { eric_email: "" } }, mounted(){ // 组件加载完成后执行的方法 let that = this; midlen.$on("email", function(data){ that.eric_email = data; // console.log(data); }) } }; const app = new Vue({ el:"#app", components: { eric: eric, jing: jing } }) </script> </body> </html> 4、混合
实际上在框架中用的很少
作用：复用共用的代码块
minxins:[base]
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <button @click="show_text">点击显示文本</button> <button @click="hide_text">点击隐藏文本</button> <button @mouseenter="show_text" @mouseleave="hide_text">提示框</button> <div v-show="is_show"><h1>look wyl and kjj</h1></div> </div> <script> const app = new Vue({ el: "#app", data: { is_show:false }, methods: { show_text: function(){ this.is_show = true }, hide_text: function(){ this.is_show = false } } }) </script> </body> </html> <!-- 混合示例 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <com1></com1> <com2></com2> </div> <script> let base = { data(){ return { is_show:false }; }, methods: { show_text(){ this.is_show = true }, hide_text(){ this.is_show = false } } }; let com1 = { template:"" + "<div>" + "<button @click="show_text">点击显示文本</button>" + "<button @click="hide_text">点击隐藏文本</button>" + "<div v-show="is_show"><h1>look wyl and kjj</h1></div>" + "</div>", mixins: [base], data(){ return { is_show: true } } }; let com2 = { template:"" + "<div>" + "<button @mouseenter="show_text" @mouseleave="hide_text">提示框</button>" + "<div v-show="is_show"><h1>look wyl and kjj</h1></div>" + "</div>", mixins: [base], }; const app = new Vue({ el:"#app", components: { com1: com1, com2: com2 } }) </script> </body> </html> 5、插槽
作用：实现组件内容的分发
slot:
直接使用slot标签：<slot></slot>
名命slot标签：
先给slot加name属性：<slot name="title"></slot>
给标签元素添加slot属性：<h3 slot="title">Python</h3>
<!-- 未命名的slot标签 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <com> <slot>This is jing</slot> </com> <com> <slot>This is wyl</slot> </com> </div> <template id="my_com"> <div> <h1>这是一个组件</h1> <slot></slot> </div> </template> <script> let com = { template: "#my_com" }; const app = new Vue({ el:"#app", components: { com: com } }) </script> </body> </html> <!-- 命名的slot标签 --> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_box{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <com> <h3 slot="title">Python</h3> <p slot="brief">This is jing</p> </com> <com> <h3 slot="title">Git</h3> <p slot="brief">This is wyl</p> </com> </div> <template id="my_com"> <div> <h1>这是一个组件</h1> <slot name="title"></slot> <slot name="brief"></slot> </div> </template> <script> let com = { template: "#my_com" }; const app = new Vue({ el:"#app", components: { com: com } }) </script> </body> </html> 三、VueRouter
特点：通过路由和组件实现一个单页面的应用。
1、路由的注册：静态路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title> </head> <body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-view></router-view> </div> <script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'<div><h1>首页组件</h1></div>' } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router }) </script> </body> </html> 2、路由的注册：动态路由（路由的参数）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title> </head> <body> <div id="app"> <!-- 路由动态绑定：to --> <router-link :to="{name:'home'}">首页</router-link> <router-link :to="{name:'course'}">课程</router-link> <!-- 带有参数的静态路由绑定 --> <router-link to="/user/nepenthe?age=20">用户1</router-link> <!-- 带有参数的动态路由绑定 --> <router-link :to="{name:'user',params:{name:'forget-me-not'},query:{age:'23'}}">用户2</router-link> <router-view></router-view> </div> <script> // 定义路由匹配规则 let url = [ { path:"/", name:"home", component:{ template:'<div><h1>首页组件</h1></div>' } }, { path:"/course", name: "course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/user/:name", // 参数设置（？P<name>.*） name: "user", component:{ template:'' + '<div>' + // 获取路由name：this.$route.name '<h1>{{this.$route.name}}用户组件</h1>' + // 获取路由中参数：this.$route.params.name '<h1>username:{{this.$route.params.name}}</h1>' + // 获取路由中参数（使用？的参数）：this.$route.query.age '<h1>age:{{this.$route.query.age}}</h1>' + '</div>', // Vue属性加载完成后执行的方法 mounted(){ console.log(this.$route) } } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router }) </script> </body> </html> 3、路由的注册：自定义路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title> </head> <body> <div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/login">登录</router-link> <router-view></router-view> </div> <script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '<button @click="my_click">点击跳转登录页面</button>' + '</div>', methods:{ my_click: function(){ console.log(this.$route); // $route 当前路由的所有信息 console.log(this.$router); // $router VueRouter的实例化对象 console.log(this.$el); console.log(this.$data); this.$router.push("/login") // 跳转页面 --> 跳转到登录组件 } } } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/login", component:{ template:'' + '<div>' + '<h1>登录组件</h1>' + '</div>' } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router }) </script> </body> </html> 4、路由的钩子函数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title> </head> <body> <div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/user">用户</router-link> <router-link to="/login">登录</router-link> <router-view></router-view> </div> <script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '<button @click="my_click">点击跳转登录页面</button>' + '</div>', methods:{ my_click: function(){ console.log(this.$route); // $route 当前路由的所有信息 console.log(this.$router); // $router VueRouter的实例化对象 console.log(this.$el); console.log(this.$data); // 跳转页面 --> 跳转到登录组件 this.$router.push("/login") } } } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/login", component:{ template:'' + '<div>' + '<h1>登录组件</h1>' + '</div>' } }, { path:"/user", meta:{ required_login: true }, component:{ template:'' + '<div>' + '<h1>用户组件</h1>' + '</div>' } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url, mode:'history' // 清除路径 }); router.beforeEach(function (to, from, next) { console.log(to); // 跳转到哪里 console.log(from); // 从哪来 console.log(next); // 下一步做什么 // 直接路径判断 // if(to.path == "/user"){ // next("/login"); // } // 使用meta判断（配置方便） if(to.meta.required_login){ next("login"); } next(); }); // router.afterEarch(function(to, from){ // 智能识别路由要去哪和从哪来，一般用于获取路由从哪来 // }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router }) </script> </body> </html> 5、子路由的注册：静态路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title> </head> <body> <div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/course/detail">课程详情</router-link> <router-view></router-view> </div> <script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '</div>' } }, { path:"/course", component:{ template:'' + '<div>' + '<h1>课程组件</h1>' + '</div>' } }, { path:"/course/detail", component:{ template:'' + '<div>' + '<h1>课程详情组件</h1>' + '<hr>' + '<router-link to="/course/brief">课程概述</router-link> ' + ' <router-link to="/course/chapter">课程章节</router-link>' + '<router-view></router-view>' + '</div>' }, children:[ { path:"/course/brief", component:{ template:'' + '<div>' + '<h1>课程概述组件</h1>' + '</div>' } },{ path:"/course/chapter", component:{ template:'' + '<div>' + '<h1>课程章节组件</h1>' + '</div>' } }, ] } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router }) </script> </body> </html> 6、子路由的注册：动态路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title> </head> <body> <div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/course/detail">课程详情</router-link> <router-view></router-view> </div> <script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '</div>' } }, { path:"/course", component:{ template:'' + '<div>' + '<h1>课程组件</h1>' + '</div>' } }, { path:"/course/detail", redirect:{name:'brief'}, // 重定向子路由，实现默认页面显示 component:{ template:'' + '<div>' + '<h1>课程详情组件</h1>' + '<hr>' + '<router-link :to="{name:'brief'}">课程概述</router-link> ' + '<router-link to="/course/chapter">课程章节</router-link>' + '<router-view></router-view>' + '</div>' }, children:[ { path:"brief", name:"brief", component:{ template:'' + '<div>' + '<h1>课程概述组件</h1>' + '</div>' } },{ path:"/course/chapter", name:"chapter", component:{ template:'' + '<div>' + '<h1>课程章节组件</h1>' + '</div>' } }, ] } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router }) </script> </body> </html> 7、命名的路由视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title> </head> <body> <div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/user">用户</router-link> <router-view name="head"></router-view> <router-view name="footer"></router-view> <router-view></router-view> </div> <script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '</div>', } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/user", components:{ head:{ template:'' + '<div>' + '<h1>用户head</h1>' + '</div>' }, footer:{ template:'' + '<div>' + '<h1>用户footer</h1>' + '</div>' } } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url, mode:'history' // 清除路径 }); router.beforeEach(function (to, from, next) { next(); }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router }) </script> </body> </html> 8、Vue的路由：
注册：
-- 定义一个匹配规则对象
let url = [
{
path:"/",
component:{}
}
]
-- 实例化VueRouter对象 并把匹配规则注册进去
let router = new VueRouter({
routes:url
})
-- 把VueRouter实例化对象注册到Vue的根实例
const app = new Vue({
el:""
})
-- router-link
-- router-view
子路由的注册
-- 在父路由里注册children：[{},{}]
-- 在父路由对应的组件里的template里写 router-link router-view
路由的名命
-- name
-- 注意 to 一定动态绑定 ：to=" {name:' '} "
路由的参数
this.$route.params.xxxx
this.$route.query.xxxx
自定义路由
this.$router.push("/course")
this.$router.push({name:' ', params:{ },query:{}})
路由的钩子函数
router.beforeEach(function(to, from, next){
to 路由去哪
from 路由从哪来
next 路由接下来要做什么
}) # 一般用于拦截
router.afterEach(function(to, from){
}) # 一般用于获取
注意
$route 路由的所有信息组成的对象
$router VueRouter 实例化对象
redirect 路由的重定向
四、Vue的生命周期
Vue生命周期的钩子函数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <title>Title</title> </head> <body> <div id="app"> {{name}} </div> <script> const app = new Vue({ el:"#app", data:{ name:"eric" }, methods:{ init:function(){ console.log(123) } }, beforeCreate(){ console.group("BeforeCreate"); console.log(this.$el); console.log(this.name); console.log(this.init); }, created(){ console.group("Created"); console.log(this.$el); console.log(this.name); console.log(this.init); }, beforeMount(){ console.group("BeforeMount"); console.log(this.$el); console.log(this.name); console.log(this.init); }, mounted(){ console.group("Mounted"); console.log(this.$el); console.log(this.name); console.log(this.init); }, beforeUpdate(){ console.group("BeforeUpdate"); console.log(this.$el); console.log(this.name); console.log(this.init); }, updated(){ console.group("Updated"); console.log(this.$el); console.log(this.name); console.log(this.init); }, beforeDestroy(){ console.group("BeforeDestroy"); console.log(this.$el); console.log(this.name); console.log(this.init); }, destroyed(){ console.group("Destroyed"); console.log(this.$el); console.log(this.name); console.log(this.init); } }) </script> </body> </html> Vue的生命周期的钩子 LifeCycle hooks
数据监听之前：beforeCreate()；
监听数据变化：created()；
虚拟dom加载完成前：beforeMount()；
页面真实加载完成后：mounted()；
数据改变前执行的函数：beforeUpdate()；
数据改变后执行的函数：updated()；
Vue实例销毁前：beforeDestroy()；
Vue实例销毁后：destroyed()s
五、Vue-cli脚手架
作用：脚手架帮助搭建Vue项目
下载（下载到全局）：npm i vue-cli -g
用vue-cli搭建项目：vue init webpack 项目名称
启动项目：
cd到项目目录下：npm run dev
vue-cli项目目录：
build 打包后存放的所有文件包括配置文件
config 配置文件
node_models 依赖包
src 工作目录
static 静态文件
index.html 单页面
pckage.json 存放所有项目信息
路由的解耦过程：
下载 npm i vue-router
导入 import VueRouter from 'vue-router'
Vue.use(VueRouter)
定义匹配规则url
实例化对象VueRouter
把VueRouter对象注册到Vue的跟实例中
