Vue整理
一、Vue
Vue是遵循MVVM架构模式实现的前端框架
npm导入路径：https://cdn.jsdelivr.net/npm/[email protected]/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内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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:"- 学习
- 刷剧
- Coding
"
}
});
script>
body>
html>
v-for：循环获取数组
v-for：循环获取字典
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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：自定制显示样式，动态绑定属性。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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="">
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"
}
})
script>
body>
html>
v-on@事件名：事件绑定
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<button @click="my_click('hello')" v-on="{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
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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：布尔值类型判断
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
综合案例
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">hellodiv>
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等
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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：清除空格
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model.lazy="username">
{{username}}
<hr>
<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（）
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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;
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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：计算属性，放的是需要处理的数据
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>Pythontd>
<td><input type="text" v-model.number="python">td>
tr>
<tr>
<td>Javatd>
<td><input type="text" v-model.number="java">td>
tr>
<tr>
<td>Gotd>
<td><input type="text" v-model.number="go">td>
tr>
<tr>
<td>总分td>
<td>{{total}}td>
tr>
<tr>
<td>平均分td>
<td>{{average}}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)
注：数组监听有坑
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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”,{}）
全局组件的使用：
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: '{{ title }}
',
// template: 'Hello world!
',
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}
局部组件的使用：
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: '局部组件
'
};
const app = new Vue({
el:"#app",
components: {
my_com: my_com_config
}
})
script>
body>
html>
父子组件：
注：组件只识别一个作用域块
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: '子组件
'
};
let my_com_config = {
template: '父组件
父子组件的通信：
父子通信（主操作在父级）：
父级定义方法：:father_say=“f_say”
子级调用方法：props: [‘father_say’]
子级使用方法（模板语言直接调用）：{{father_say}}
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: '子组件
father_say：{{father_say}}
',
props: ['father_say']
};
let my_com_config = {
template: '父组件
子父通信（主操作在子级）：
子集定义方法：@click=‘my_click’
子级提交事件：this.$emit(“事件名”,data)
父级绑定子级提交的事件：@事件名=“处理的方法”
父级处理方法： methods: {处理的方法: function(data){data 数据处理} }
父级使用方法（模板语言直接调用）：{{say}}
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: "" +
"" +
"子组件
" +
"" +
"",
methods: {
my_click(){
// 子组件提交事件名称
this.$emit("son_say","滚~~")
}
}
};
let my_com_config = {
template: '' +
'' +
'父组件
' +
'son_say：{{say}}
' +
'',
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的问题)})
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: "" +
"" +
"This is Eric
" +
"" +
"",
methods: {
my_click(){
// 通知bob，晚上等我
// 向bob，提交事件
midlen.$emit("email","晚上，一起吃饭")
}
}
};
let jing = {
template: "" +
"" +
"This is jing
" +
"eric和我说：{{ eric_email }}
" +
"",
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]
Title
look wyl and kjj
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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:"" +
"" +
"" +
"" +
"look wyl and kjj
" +
"",
mixins: [base],
data(){
return {
is_show: true
}
}
};
let com2 = {
template:"" +
"" +
"" +
"look wyl and kjj
" +
"",
mixins: [base],
};
const app = new Vue({
el:"#app",
components: {
com1: com1,
com2: com2
}
})
script>
body>
html>
5、插槽
作用：实现组件内容的分发
slot:
直接使用slot标签：
名命slot标签：
先给slot加name属性：
给标签元素添加slot属性：
Python
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 jingslot>
com>
<com>
<slot>This is wylslot>
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>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">Pythonh3>
<p slot="brief">This is jingp>
com>
<com>
<h3 slot="title">Gith3>
<p slot="brief">This is wylp>
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、路由的注册：静态路由
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<title>Titletitle>
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:'首页组件
'
}
},
{
path:"/course",
component:{
template:'课程组件
'
}
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
script>
body>
html>
2、路由的注册：动态路由（路由的参数）
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<title>Titletitle>
head>
<body>
<div id="app">
<router-link :to="{name:'home'}">首页router-link>
<router-link :to="{name:'course'}">课程router-link>
<router-link to="/user/nepenthe?age=20">用户1router-link>
<router-link :to="{name:'user',params:{name:'forget-me-not'},query:{age:'23'}}">用户2router-link>
<router-view>router-view>
div>
<script>
// 定义路由匹配规则
let url = [
{
path:"/",
name:"home",
component:{
template:'首页组件
'
}
},
{
path:"/course",
name: "course",
component:{
template:'课程组件
'
}
},
{
path:"/user/:name",
// 参数设置（？P.*）
name: "user",
component:{
template:'' +
'' +
// 获取路由name：this.$route.name
'{{this.$route.name}}用户组件
' +
// 获取路由中参数：this.$route.params.name
'username:{{this.$route.params.name}}
' +
// 获取路由中参数（使用？的参数）：this.$route.query.age
'age:{{this.$route.query.age}}
' +
'',
// 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、路由的注册：自定义路由
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<title>Titletitle>
head>
<body>
<div id="app">
<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:'' +
'' +
'首页组件
' +
'' +
'',
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:'课程组件
'
}
},
{
path:"/login",
component:{
template:'' +
'' +
'登录组件
' +
''
}
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
script>
body>
html>
4、路由的钩子函数：
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<title>Titletitle>
head>
<body>
<div id="app">
<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:'' +
'' +
'首页组件
' +
'' +
'',
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:'课程组件
'
}
},
{
path:"/login",
component:{
template:'' +
'' +
'登录组件
' +
''
}
},
{
path:"/user",
meta:{
required_login: true
},
component:{
template:'' +
'' +
'用户组件
' +
''
}
}
];
// 实例化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、子路由的注册：静态路由
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<title>Titletitle>
head>
<body>
<div id="app">
<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:'' +
'' +
'首页组件
' +
''
}
},
{
path:"/course",
component:{
template:'' +
'' +
'课程组件
' +
''
}
},
{
path:"/course/detail",
component:{
template:'' +
'' +
'课程详情组件
' +
'
' +
'课程概述 ' +
' 课程章节 ' +
'课程概述组件
' +
''
}
},{
path:"/course/chapter",
component:{
template:'' +
'' +
'课程章节组件
' +
''
}
},
]
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
script>
body>
html>
6、子路由的注册：动态路由
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<title>Titletitle>
head>
<body>
<div id="app">
<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:'' +
'' +
'首页组件
' +
''
}
},
{
path:"/course",
component:{
template:'' +
'' +
'课程组件
' +
''
}
},
{
path:"/course/detail",
redirect:{name:'brief'}, // 重定向子路由，实现默认页面显示
component:{
template:'' +
'' +
'课程详情组件
' +
'
' +
'课程概述 ' +
'课程章节 ' +
'课程概述组件
' +
''
}
},{
path:"/course/chapter",
name:"chapter",
component:{
template:'' +
'' +
'课程章节组件
' +
''
}
},
]
}
];
// 实例化VueRouter对象
let router = new VueRouter({
routes:url
});
// 把VueRouter的实例化对象注册到Vue的跟实例
const app = new Vue({
el:"#app",
router:router
})
script>
body>
html>
7、命名的路由视图
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<title>Titletitle>
head>
<body>
<div id="app">
<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:'' +
'' +
'首页组件
' +
'',
}
},
{
path:"/course",
component:{
template:'课程组件
'
}
},
{
path:"/user",
components:{
head:{
template:'' +
'' +
'用户head
' +
''
},
footer:{
template:'' +
'' +
'用户footer
' +
''
}
}
}
];
// 实例化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生命周期的钩子函数：
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<title>Titletitle>
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的跟实例中