文章目录
Vue基础
Vue简介
- Vue:是一套用于构建用户界面的渐进式框架。
- 官方文档:
- Vue3的API文档
- Vue2的API文档
- 官方整理的第三方库:Awesome Vue
初识Vue
- 下载地址:直接用
<script>
引入- 开发版本:有警告和调试模式
- 生成版本:用于生成环境,无警告
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
- root容器里的代码依然符合html规范,只不过混入一些Vue语法
- root容器里的代码被称为“Vue模板”
- Vue实例和容器是一一对应的
- 真实开发中只有一个Vue实例,并且配合组件一起使用
- {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
- 一旦data中的数据发生变化,那么模板中用到该数据的地方也会自动更新;
- 使用
<script>
引入示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始Vue</title>
<!--引入Vue-->
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
</script>
</body>
</html>
- Hello Vue示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始Vue</title>
<!--引入Vue-->
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--插值语法-->
<h1>Hello, {{name.toUpperCase()}}</h1>
<h1>Age is {{age}}</h1>
</div>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
const vm = new Vue({
el: '#root', // el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串、
data: { // data中用于存储数据,数据供el所指定的容器去使用。
name: 'JayLi',
age: 18,
}
});
</script>
</body>
</html>
区分:js表达式 和 js代码
- 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
- a
- a+b
- demo(1)
- x === y ? ‘a’ : ‘b’
- js代码/语句:
- if语句
- for语句
模板语法
- 模板语法有两大类
- 插值语法:
- 功能:用于解析标签体内容
- 写法:{{xxx}},xxx是js表达式,且可以直接读取data中的所有属性。
- 指令语法:
- 功能:用于解析标签(包括:属性、标签体内容、绑定事件等)
- eg:
v-bind:herf="xxx"
或 简写为:herf="xxx"
,xxx同样是js表达式。 - 备注:Vue中有很多指令,且形式都是
v-???
。
- 插值语法:
- 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始Vue</title>
<!--引入Vue-->
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url">点我去{{school.name}}</a>
</div>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el: '#root',
data: {
name: 'jack',
school: { // 层级访问
name: '百度',
url: "http://www.baidu.com"
}
}
})
</script>
</body>
</html>
数据绑定
-
Vue中有两种数据绑定的方式:
- 单项绑定(v-bind):数据只能从data流向页面。
- 双项绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
- 双向绑定一般都应用在表单类元素上(如:input、select等)
v-model:value="xxx"
,可以简写为v-model="xxx"
,因为v-model默认收集的就是value值。
-
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据绑定</title>
<!--引入Vue-->
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="root">
<!--普通写法-->
单向数据绑定:<input type="text" v-bind:value="name"><br>
双向数据绑定:<input type="text" v-model:value="name"><br>
<!--`v-model:`只能应用在表单类元素(输入类元素)上-->
<!--简单写法-->
单向数据绑定:<input type="text" :value="name"><br>
双向数据绑定:<input type="text" v-model="name"><br>
</div>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el: '#root',
data: {
name: '学习Vue'
}
})
</script>
</body>
</html>
el与data的两种写法
-
el的2种写法:
- new Vue时,配置el属性
- 先创建Vue实例,随后再通过
vm.$mount('#root')
制定el的值。
-
data的2种写法:
- 对象式
- 函数式:组件,data必须使用函数式,否则会报错。
-
重要原则:有Vue管理的函数,不能写箭头函数,一旦写了箭头函数,this就不是Vue实例,而且window了。
-
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>el与data的两种写法</title>
<!--引入Vue-->
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>你好,{{name}}</h1>
</div>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// // el的两种写法
const v = new Vue({
// el: '#root',
data: {
name: 'JayLi'
}
})
console.log(v);
// 1秒之后,才展示
setTimeout(() => {
v.$mount('#root');
}, 1000);
// data的两种写法
const v = new Vue({
el: '#root',
// data: {
// name: 'JayLi'
// }
// data的第二种写法:函数式
data() { // 不可以使用箭头函数
console.log('@@@', this); // 此处的this是Vue实例对象
return {
name: 'JayLi2'
}
}
})
</script>
</body>
</html>
MVVM模型
- M:模型(Model),对应data中的数据
- V:视图(View),模板
- VM:视图模板(ViewModel),Vue实例对象
-
data中所有的属性,最后都出现在vm上。
-
vm身上的所有属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
-
代码示例:
<body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<div id="root">
<h1>名称:{{name}}</h1>
<h1>地址:{{address}}</h1>
<h1>测试一下1:{{1+1}}</h1>
<h1>测试一下2:{{$options}}</h1>
<h1>测试一下3:{{_c}}</h1>
</div>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
const vm = new Vue({
el: '#root',
data: {
name: 'JayLi',
address: 'Beijing'
}
})
</script>
</body>
数据代理
Object.defineProperty
-
语法:
Object.defineProperty(obj, '属性名', {配置字段}
- value:赋值
- enumerable:控制属性是否可以枚举,默认值是false
- writable:控制属性是否可以被修改,默认值是false
- configurable:控制属性是否可以被删除,默认值是false
- get方法:当有人读取person的age属性时,get函数就会被调用,且返回值就是age的值
- set方法:当有人修改person的age属性时,set函数就会被调用,且收到值就是age的值
-
示例代码:
<script type="text/javascript">
let person = {
name: '张三',
sex: '男'
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true, // 控制属性是否可以枚举,默认值是false
writable: true, // 控制属性是否可以被修改,默认值是false
configurable: true, // 控制属性是否可以被删除,默认值是false
});
console.log(person);
for (let key in person) { // 枚举
console.log('@',person[key])
}
person.age = 19;
console.log(person);
delete person.age;
console.log(person);
</script>
- 示例代码:get和set
# js
let person = {
name: '张三',
sex: '男'
}
let number = 18;
Object.defineProperty(person, 'age', {
// 当有人读取person的age属性时,get函数就会被调用,且返回值就是age的值
get(){
return number;
},
// 当有人修改person的age属性时,set函数就会被调用,且收到值就是age的值
set(val){
console.log('有人修改age属性的值', val);
return number = val;
}
});
number = 20;
console.log(person.age);
person.age = 30;
console.log(person.age);
数据代理
数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
- 代码示例:有
obj2.y
代理obj1.x
。
let obj = {x: 100}
let obj2 = {y: 200}
Object.defineProperty(obj2, 'y', {
get(){
return obj.x
},
set(value){
obj.x = value
}
})
console.log(obj); // {x: 100}
obj2.y = 300;
console.log(obj); // {x: 300}
Vue中的数据代理
-
概念:通过vm对象来代理data对象中属性的操作(读/写)
-
优势:更加方便地操作data中的数据
-
原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部操作(读/写)中对应的属性。
-
提示:
vm._data
内部使用了“数据劫持” -
示意图
事件处理
事件的基本使用
-
使用
v-on:xxx
或@xxx
绑定事件,其中xxx是事件名。 -
事件的回调需要配置在methods对象中,最终会出现在vm上。
-
methods中配置的函数,不要用箭头函数!否则this就不是vm,而是windows了。
-
methods中配置的函数,都是被Vue管理的函数,this的指向是vm 或者 组件实例对象。
-
@click="demo"
或@click="demo($event, args, ...)"
效果一致,但后者可以传参。 -
示例代码
<body>
<div id="root">
<h2>欢迎来到{{name}}</h2>
<button v-on:click="showInfo1">点我提示信息(不传参)</button>
<br>
<button @click="showInfo2($event, 66)">点我提示信息(传参)</button>
</div>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el: '#root',
data: {
name: '北京'
},
methods: {
showInfo1(event){
console.log(event.target.innerText); // 输出:点我提示信息
console.log(this); // 此处的this是vm
alert('北京欢迎你')
},
showInfo2(event, number){
console.log(event.target.innerText); // 输出:点我提示信息
// console.log(this); // 此处的this是vm
alert('北京欢迎你,哈哈' + number.toString())
}
}
})
</script>
</body>
事件修饰符
-
prevent:阻止默认事件(常用)
-
stop:组织事件冒泡(常用)
-
once:事件只触发一次(常用)
-
capture:使用事件的捕获模式
-
self:只有event.target是当前操作的元素才触发事件
-
passive:事件的默认行为立即执行,无需等待时间回调执行完毕
-
修饰符可以连续写:
# 先阻止冒泡,再取消默认事件
<a href="http://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a>
- 代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<!--引入Vue-->
<script type="text/javascript" src="../vue_js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: green;
}
.box1{
padding: 5px;
background-color: blue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: darkred;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}</h2>
<p>阻止默认事件(跳转)</p>
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<p>阻止事件冒泡:不加则弹出两次</p>
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<p>事件只触发一次</p>
<button @click.once="showInfo">点我提示信息</button>
<p>事件的捕获模式</p>
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<p>只有event.target是当前操作的元素才触发事件</p>
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<p>事件的默认行为立即执行,无需等待时间回调执行完毕</p>
<ul class="list" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el: '#root',
data: {
name: '北京'
},
methods: {
showInfo(e) {
console.log(e.target);
alert('欢迎你!!!')
},
showMsg(num) {
console.log(num);
},
demo(){
for (let i=0;i<1000;i++){
console.log('#')
}
console.log('累坏了');
}
}
})
</script>
</body>
</html>
键盘事件
-
Vue中常用的按键别名:
- 回车:enter
- 删除:delete(捕获“删除”和“退格”键)
- 退出:esc
- 空格:space
- 换行:tab(特殊:必须用
keydown.tab
) - 上:up
- 下:down
- 左:left
- 右:right
- 可以连续写:
keyup.ctrl.y
为按ctrl+y
组合键。
-
Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
- 如:CapsLock为caps-lock。
-
系统修饰键(用法特殊):ctrl, alt, shift, meta
- 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
- 配合keydown使用:正常触发事件。
-
也可以使用keyCode去指定具体的按键(不推荐)
-
Vue.config.keyCodes.自定义键名 = 键码
,可以定制按键别名。
<div id="root">
<h2>欢迎来到{{name}}</h2>
<!--回车输出-->
<input type="text" placeholder="按下按键提示输入" @keyup.enter="showInfo">
</div>
</body>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 自定义别名:回车的名称为huiche
Vue.config.keyCodes.huiche = 13
// 创建Vue实例
new Vue({
el: '#root',
data: {
name: '北京',
},
methods: {
showInfo(e) {
console.log(e.keyCode, e.key) // 按键码,按键名称
console.log(e.target.value)
}
}
})
</script>
计算属性与监视
计算属性
-
效果:全名的内容为联动展示
-
定义:要用的属性不存在,要通过已有属性计算得来。
-
原理:底层借助了
Object.defineproperty方法
提供的getter和setter。 -
get函数什么时候执行?
- 初次读取的时候会执行一次
- 当依赖的数据发生变化的时,会被再次调用。
-
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
-
备注:
- 计算属性最终会出现在vm上,直接读取使用即可。
- 如果计算属性要被修改,那必须set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
-
代码示例(完整写法):08_03_计算属性_姓名案例_计算属性实现.html
<body>
<div id="root">
姓:<input type="text" v-model="firstName">
<br>
名:<input type="text" v-model="lastName">
<br>
全名:<span>{{fullName}}</span>
缓存:<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
computed: {
// get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
// get什么时候调用:1. 初次读取时。2. 所依赖的数据发生变化时
fullName: {
get(){
console.log('get')
// 此处的this是vm
return this.firstName + '-' + this.lastName
},
// set什么时候调用?当fullName被修改时
set(value){
console.log('set', value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
- 代码示例(简写):如果不需要
vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName(){
return this.firstName + '-' + this.lastName
},
}
})
监视属性
- 当被监视的属性变化时,回到函数自动调用,进行相关操作
- 监视的属性必须存在,才能被监视!
- 监视属性的两种写法:
a.new Vue
时传入watch配置
b. 通过vm.$watch
配置
-
绑定事件的时候:
@xxx="yyy"
yyy可以写一些简单的语句
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<!--绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句-->
<button @click="changeWeather">切换天气</button><br>
</div>
</body>
<script type="text/javascript">
// 关闭警告:阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
vm = new Vue({
el: '#root',
data: {
isHot: true
},
watch: {
isHot: {
immediate: true, // 初始化时,让handler被调用
// handler什么时候被调用:当isHot发生变化时
handler(newValue, oldValue){
console.log('isHot被修改了', newValue, oldValue)
}
}
}, shen
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
}
})
// $watch配置:监视info
vm.$watch('info', {
immediate: true, // 初始化时,让handler被调用
// handler什么时候被调用:当isHot发生变化时
handler(newValue, oldValue){
console.log('info被修改了', newValue, oldValue)
}
})
</script>
深度监视
- Vue中的watch默认不监测对象内部值的变化(一层)。
- 配置
deep:true
可以监测对象内部值的变化(多层)。 - 备注:
- Vue自身可以监测对象内部值的变化,只是watch默认不可见。
- 使用watch时根据数据的具体结构,决定是否采用深度监视。
computed和watch之间的区别
-
computed能完成的功能,watch都可以完成。
-
watch能完成的功能,computed不一定能完成。例如:watch可以进行异步操作。
-
两个重要原则:
- 被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数 等),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。
-
代码示例:姓名案例的不同实现
样式绑定
- 代码示例:样式绑定
class样式
- 写法:
class="xxx"
,xxx可以是字符串、对象、数组。 - 字符串写法适用于:类名不确定,要动态获取。
- 对象写法市适用于:要绑定多个样式,个数不确定,名字也不确定。
- 数组写法适用于:要绑定读多个样式,个数确定,名字也确定,但不确定用不用。
style样式
:style="{fontSize: xxx}"
其中xxx是动态值。:style="[a,b]"
其中a,b是样式对象。
条件渲染
v-if
- 写法:
v-if="表达式"
v-else-if="表达式"
v-else
- 适用于:切换频率较低的场景。
- 特点:不展示的DOM元素直接被移除。
- 注意:可以组合使用,但是结构不能被“打断”。
v-show
-
写法:
v-show="表达式"
-
适用于:切换频率较高的场景。
-
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉。
-
备注:使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到。
-
示例代码:条件渲染
列表渲染
v-for指令
-
用于展示列表数据
-
语法:
<li v-for="(item, index) of xxx" :key="index">item</li>
-
可遍历:
- 常用:数组、对象
- 不常用:字符串、指定次数。
-
示例代码:基本列表
key的原理
:key="index"
引发的错误,流程如下
面试题:react和Vue中的key有什么作用?(key的内部原理)
- 虚拟DOM中key的作用:
- key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据“新数据”生成“新虚拟DOM”,随后Vue进行“新虚拟DOM”与“旧虚拟DOM”的差异比较。
- 对比规则:
- “旧虚拟DOM”找到了与“新虚拟DOM”相同的key:
- 若虚拟DOM中内容没变,直接使用之前的真实DOM!
- 若虚拟DOM变了,则生成新的真实DOM,随后替换页面中之前的真实DOM。
- “旧虚拟DOM”中未找到与“新虚拟DOM”中相同的key:
- 创建新的真实DOM,随后渲染到页面
- “旧虚拟DOM”找到了与“新虚拟DOM”相同的key:
- 用index作为key可能会引发的问题:
- 若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新,界面效果没问题,但效率低。
- 如果结构中还包含输入类的DOM:会产生错误DOM更新,界面有问题。
- 开发中如何选择key?
- 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一标识。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅渲染列表用于展示,使用index作为key是没有问题的。
过滤列表
- watch实现:列表的过滤_watch实现
- 计算属性实现(代码更少):列表的过滤_计算属性实现
- 排序
列表排序
- 示例代码:列表排序.html
更新时的一个问题
- 示例代码:更新时的一个问题.html
- Vue没有监测到数据的改变
Vue监视数据的原理
-
Vue会监视data中所有层次的数据
-
如何监视对象中的数据:通过setter实现监视,且要在new Vue时就传入要监视的数据
- 对象中后追加的属性,Vue默认不做响应式处理
- 如需给后添加的属性做响应式,请使用如下API:
Vue.set(target, propertyName/index, value)
this.$set(target, propertyName/index, value)
-
如何监视数组中的数据:通过包裹数组更新元素的方法,本质就是:
- 调用原生对应的方法对数组进行更新。
- 重新解析模板,进而更新页面。
-
在Vue修改数组中的某个元素一定要用如下方法:
- 使用这些API:push, pop, shift, unshift, splice, sort, reverse
Vue.set()
或vm.$set
-
注意:
Vue.set()
或vm.$set
不能给vm或vm的根数据对象(vm._data) 添加属性 -
代码示例:总结Vue数据监测
收集表单数据
-
示例页面:收集表单数据
-
<input type="text">
,则v-model收集的是value值,用户输入的就是value值。 -
<input type="radio">
,需要给标签配置value值。 -
<input type="checkbox">
- 没有配置input的value属性,那么收集的就是checked(是否勾选,布尔值)
- 配置input的value属性:
- v-model的初始值是非数组,那么收集的就是cehcked(是否勾选,布尔值)
- v-model的初始值是数组,那么收集的就是value组成的数组
-
v-model的三个修饰符:
v-model.xxx="something"
- lazy:失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
过滤器
- 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
- 语法:
- 注册过滤器:
Vue.filter(name, callback)
或new Vue(filters: {})
- 使用过滤器:
{{ xxx | 过滤器名 }}
或v-bind:属性="xxx|过滤器名"
- 注册过滤器:
- 备注:
- 过滤器也可以接收额外的参数、多个过滤器可以串联
- 并没有改变原本的数据,是产生新的对应数据
内置指令
- v-bind:单向绑定解析表达式,简写:
:xxx
- v-model:双向数据绑定
- v-for:遍历数组/对象/字符串
- v-on:绑定事件监听,简写:
@xxx
- v-if:条件渲染(动态控制节点是否存在)
- v-else:条件渲染(动态控制节点是否存在)
- v-show:条件渲染(动态控制节点是否展示)
v-text指令
- 作用:向其所在的节点中渲染文本内容。
- 与插值语法区别:v-text会替换掉节点中的内容,
{{xxx}}
不会。
v-html指令
- 作用:向指定节点中渲染包含html结构的内容。
- 与插值语法的区别:
- v-html会替换掉节点的所有内容,
{{xx}}
则不会。 - v-html可以识别html结构
- v-html会替换掉节点的所有内容,
- 注意:v-html有安全性问题
- 在网站上渲染任意HTML是非常危险的,容易导致XSS攻击(冒充用户之手攻击)。
- 一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上。
v-cloak指令(没有值)
- 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时,页面展示出
{{xxx}}
的问题。 - 示例代码:v-cloak指令
v-once指令
- v-once所在节点在初次动态渲染后,就视为静态内容了。
- 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
- 示例代码:v-once指令
v-pre指令
- 跳过其所在节点的编译过程
- 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
自定义指令
-
需求1:定义一个v-big指令,和 v-text指令类似,但会把绑定的数值放大10倍。
-
需求2:定义一个v-fbind指令,和v-bind指令功能类似,但可以让其所绑定的input元素默认获取焦点。
-
实现代码:自定义指令
-
定义语法:
- 局部指令:
new Vue({ directives: { 指令名: 配置对象 或 指令名(element, binding){回调函数} } })
- 全局指令:
Vue.directive(指令名, 配置对象)
或Vue.directive(指令名, 回调函数)
-
配置对象中常用的3个回调:
- bind:指令与元素成功绑定时调用。
- inserted:指令所在元素被插入页时调用。
- update:指令所在模板结构被重新解析时调用。
-
备注:
- 指令定义时,不加
v-
,但使用时要写v-xxx
- 指令名如果是多个单词,要使用kebab-case明明方式,不要用camelCase命名。
- 指令定义时,不加
生命周期
- 生命周期回调函数、函数、钩子:Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改,但函数具体内容是程序员根据需求编写的。
- 生命周期函数中的this是vm 或 组件实例对象。
- 完整生命周期示意图:
- 常用的生命周期钩子:
- mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
- beforeDestory:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
- 关于销毁Vue实例:
- 销毁后借助Vue开发者工具看不到任何信息。
- 销毁后自定义事件会失效,但原生DOM事件依然有效。
- 一般不会再beforeDestory操作数据,因为即便操作数据,也不会再触发更新流程了。
Vue组件化编程
为什么使用组件
-
传统方式编写应用
- 依赖关系混乱,不好维护。
- 代码复用率不高。
-
使用组件方式编写应用
-
组件的嵌套
-
组件的定义:实现应用中的局部功能代码和资源的集合。
非单文件组件
- 单文件组件:一个文件中只包含1个组件
- 非单文件组件:一个文件中只包含n个组件(推荐)
基本使用
-
Vue中使用组件的三大步骤:
- 定义组件/创建组件
- 注册组件
- 使用组件(写组件标签)
-
如何定义一个组件?
- 使用
Vue.extend(options)
创建,其中options
和new Vue(options)
时,传入的那个options几乎一样。 - 区别:
- 不要写
el
:最终所有组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。 - data必须写成函数:避免组件被复用时,数据存在引用关系。
- 不要写
- 备注:使用template可以配置组件结构
- 使用
-
如何注册组件:
- 局部注册:靠
new Vue
的时候,传入components选项 - 全局注册:靠
Vue.component('组件名', 组件)
- 局部注册:靠
-
编写组件标签:
<some></some>
-
示例代码:非单文件组件的基本使用.html
几个注意点
关于组件名
- 一个单词组成:
- 第一种写法(首字母小写):school
- 第二种写法(首字母大写):School
- 多个单词组成:
- 第一种写法(kebab-case命名):my-school
- 第二种写法(CamlCase命名):MySchool(需要Vue脚手架支持)
- 备注:
- 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
- 可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签
- 第一种写法:
- 第二种写法:
- 备注:不用使用脚手架时,会导致后续组件不能渲染。
简写方式
const school = Vue.extend(options)
- 可简写为:
const school = options
- 可简写为:
关于VueComponent
-
school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
-
我们只需要写
<school/>
或<school></school>
,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。 -
特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!
-
关于this指向:
- 组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
- new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
-
VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。
- Vue的实例对象,以后简称vm。
-
示例代码:VueComponent.html
一个重要的内置关系
- 一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype
- 为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。
单文件组件
安装Vue脚手架
- Mac安装:
brew install npm
- npm配置淘宝的镜像源:
npm config set registry https://registry.npm.taobao.org
- 全局安装:
npm install -g @vue/cli
- 切换到你要创建项目的目录,然后使用命令创建vue_test项目:
vue create vue_test
- 进入vue_test目录,运行脚手架:
npm run serve
Vue脚手架
脚手架文件结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
render函数
-
vue.js与vue.runtime.xxx.js的区别:
- vue.js是完整版的Vue,包含:核心功能+模板解析器。
- vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
-
因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。
-
示例代码:vue_test/src/main.js
import Vue from 'vue'
//引入App组件,它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象---vm
new Vue({
el:'#app',
//render函数完成了这个功能:将App组件放入容器中
render: h => h(App),
// 以下用法报错
// template:`<h1>你好啊</h1>`,
// components:{App},
})
vue.config.js配置文件
- 使用
vue inspect > output.js
可以查看到Vue脚手架的默认配置。 - 使用vue.config.js可以对脚手架进行个性化定制,详情见:官方config配置指南
ref属性
-
被用来给元素或子组件注册引用信息(id的替代者)
-
应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
-
使用方式:
- 打标识:
<h1 ref="xxx">.....</h1>
或<School ref="xxx"></School>
- 获取:
this.$refs.xxx
- 打标识:
-
示例代码:02_src_ref属性/App.vue
props配置项
- 功能:让组件接收外部传过来的数据
- 传递数据:
<Demo name="xxx"/>
- 接收数据:
- 第一种方式(只接收):
props:['name']
- 第二种方式(限制类型):
props:{name:String}
- 第三种方式(限制类型、限制必要性、指定默认值):
props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }
- 第一种方式(只接收):
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
- 示例代码:03_src_props配置
mixin(混入/混合)
-
功能:可以把多个组件共用的配置提取成一个混入对象
-
使用方式:
- 第一步定义混合:
{ data(){....}, methods:{....} .... }
- 第二步使用混入:
- 全局混入:
Vue.mixin(xxx)
- 局部混入:
mixins:['xxx']
- 全局混入:
-
示例代码:04_src_mixin混入
插件
- 功能:用于增强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()
- 示例代码:05_src_插件
scoped样式
- 作用:让样式在局部生效,防止冲突。
- 写法:
<style scoped>
总结TodoList案例(组件化)
- 示例代码:TodoList案例
组件化编码流程
- 拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。
- 实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
- 一个组件在用:放在组件自身即可。
- 一些组件在用:放在他们共同的父组件上(状态提升)。
- 实现交互:从绑定事件开始。
props适用于
- 父组件 ==> 子组件 通信
- 子组件 ==> 父组件 通信(要求父先给子一个函数)
- 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
- props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。
webStorage
- 示例代码:08_浏览器本地存储
- 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
- 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
- 相关API:
xxxxxStorage.setItem('key', 'value');
:该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。xxxxxStorage.getItem('person');
:该方法接受一个键名作为参数,返回键名对应的值。xxxxxStorage.removeItem('key');
:该方法接受一个键名作为参数,并把该键名从存储中删除。xxxxxStorage.clear()
:该方法会清空存储中的所有数据。
- 备注:
- SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- LocalStorage存储的内容,需要手动清除才会消失。
xxxxxStorage.getItem(xxx)
如果xxx对应的value获取不到,那么getItem的返回值是null。JSON.parse(null)
的结果依然是null。
组件的自定义事件
-
示例代码:组件自定义事件
-
一种组件间通信的方式,适用于:
子组件 ===> 父组件
-
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(
事件的回调在A中
)。 -
绑定自定义事件:
- 第一种方式,在父组件中:
<Demo @atguigu="test"/>
或<Demo v-on:atguigu="test"/>
- 第二种方式,在父组件中:
<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }
- 若想让自定义事件只能触发一次,可以使用
once
修饰符,或$once
方法。
- 第一种方式,在父组件中:
-
触发自定义事件:
this.$emit('atguigu',数据)
-
解绑自定义事件
this.$off('atguigu')
-
组件上也可以绑定原生DOM事件,需要使用
native
修饰符。 -
注意:通过
this.$refs.xxx.$on('atguigu', 回调)
绑定自定义事件时,回调要么配置在methods中
,要么用箭头函数
,否则this指向会出问题!
全局事件总线(GlobalEventBus)
-
示例代码:12_src_全局事件总线
-
示例代码:13_src_TodoList_事件总线
-
一种组件间通信的方式,适用于
任意组件间通信
。 -
安装全局事件总线:
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
......
})
- 使用事件总线:
- 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
- 提供数据:
this.$bus.$emit('xxxx',数据)
- 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
消息订阅与发布(pubsub)
-
示例代码:14_src_消息订阅与发布
-
todolist使用消息订阅与发布:15_src_TodoList_pubsub
-
一种组件间通信的方式,适用于
任意组件间通信
。 -
使用步骤:
- 安装pubsub:
npm i pubsub-js
- 引入:
import pubsub from 'pubsub-js'
- 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的
回调留在A组件自身
。
methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 }
- 提供数据:
pubsub.publish('xxx',数据)
- 最好在beforeDestroy钩子中,用
PubSub.unsubscribe(pid)
去取消订阅
。
- 安装pubsub:
nextTick
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次 DOM 更新结束后执行其指定的回调。
- 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
Vue封装的过度与动画
- 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
- 图示:
<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />
用法
一. 先写好动画样式
元素进入的样式
- v-enter:进入的起点
- v-enter-active:进入过程中
- v-enter-to:进入的终点
元素离开的样式:
- v-leave:离开的起点
- v-leave-active:离开过程中
- v-leave-to:离开的终点
二. <transition>
标签
- 使用
<transition>
包裹要过度的元素,并配置name属性:
<transition name="hello">
<h1 v-show="isShow">你好啊!</h1>
</transition>
- 备注:若有多个元素需要过度,则需要使用:
<transition-group>
,且每个元素都要指定key
值。
vue脚手架配置代理
- 示例代码:vue.config.js
方法一
- 在vue.config.js中添加如下配置:
devServer:{
proxy:"http://localhost:5000"
}
- 说明:
- 优点:配置简单,请求资源时直接发给前端(8080)即可。
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
方法二
- 编写vue.config.js配置具体代理规则:
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
- 说明:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
- 缺点:配置略微繁琐,请求资源时必须加前缀。
插槽
- 示例代码:插槽
- 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于
父组件 ===> 子组件
。 - 分类:默认插槽、具名插槽、作用域插槽
默认插槽
父组件中:
<Category>
<div>html结构1</div>
</Category>
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容...</slot>
</div>
</template>
具名插槽
父组件中:
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
作用域插槽
- 难点:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
- 具体编码:
父组件中:
<Category>
<template scope="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template slot-scope="scopeData">
<!-- 生成的是h4标题 -->
<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:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>
Vuex
基础概念
-
概念:在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
-
何时使用:多个组件需要共享数据时
-
多组件共享数据(读/写)
- 全局事件总线的实现
- vuex的实现
- 全局事件总线的实现
-
vuex工作原理图
搭建vuex环境
- 创建文件:
src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
- 在
main.js
中创建vm时传入store
配置项
......
//引入store
import store from './store'
......
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
基本使用
-
初始化数据、配置
actions
、配置mutations
,操作文件store.js
。
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
//响应组件中加的动作
jia(context,value){
// console.log('actions中的jia被调用了',miniStore,value)
context.commit('JIA',value)
},
}
const mutations = {
//执行加
JIA(state,value){
// console.log('mutations中的JIA被调用了',state,value)
state.sum += value
}
}
//初始化数据
const state = {
sum:0
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
- 组件中读取vuex中的数据:
$store.state.sum
- 组件中修改vuex中的数据:
$store.dispatch('action中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写
dispatch
,直接编写commit
getters的使用
- 示例代码:25_src_求和案例_getters
- 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
- 在
store.js
中追加getters
配置
......
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
- 组件中读取数据:
$store.getters.bigSum
四个map方法的使用
- mapState方法:用于帮助我们映射
state
中的数据为计算属性
computed: {
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性:sum、school、subject(数组写法)
...mapState(['sum','school','subject']),
},
- mapGetters方法:用于帮助我们映射
getters
中的数据为计算属性
computed: {
//借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性:bigSum(数组写法)
...mapGetters(['bigSum'])
},
- mapActions方法:用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数
methods:{
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
- mapMutations方法:用于帮助我们生成与
mutations
对话的方法,即:包含$store.commit(xxx)
的函数
methods:{
//靠mapActions生成:increment、decrement(对象形式)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['JIA','JIAN']),
}
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
模块化+命名空间
- 目的:让代码更好维护,让多种数据分类更加明确。
- 示例代码:求和案例_多组件共享数据
- 示例代码:求和案例_vuex模块化编码
- 修改
store.js
const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum * 10
}
}
}
const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
countAbout,
personAbout
}
})
- 开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject']),
- 开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])
- 开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
- 开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
路由
- 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
- 前端路由:key是路径,value是组件。
基本使用
- 示例代码:路由的基本使用
- 安装vue-router,命令:
npm i vue-router@3
,为了搭配Vue2使用。 - 应用插件:
Vue.use(VueRouter)
- 编写router配置项:
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
- 实现切换(active-class可配置高亮样式)
<router-link active-class="active" to="/about">About</router-link>
- 指定展示位置
<router-view></router-view>
几个注意点
- 路由组件通常存放在
pages
文件夹,一般组件通常存放在components
文件夹。 - 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
- 每个组件都有自己的
$route
属性,里面存储着自己的路由信息。 - 整个应用只有一个router,可以通过组件的
$route
属性获取到。
多级路由(多级路由)
- 示例代码:31_src_多级路由
- 配置路由规则,使用children配置项:
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message',//此处一定不要写:/message
component:Message
}
]
}
]
- 跳转(要写完整路径):
<router-link to="/home/news">News</router-link>
路由的query参数
- 示例代码:32_src_路由的query参数
- 传递参数
<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
- 接收参数:
$route.query.id
$route.query.title
命名路由
- 作用:可以简化路由的跳转。
- 示例代码:33_src_命名路由
如何使用
- 给路由命名:
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
- 简化跳转:
<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
路由的params参数
- 示例代码:34_src_路由的params参数
- 配置路由,声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}
- 传递参数
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
- 接收参数:
$route.params.id
$route.params.title
路由的props配置
- 作用:让路由组件更方便的收到参数
- 示例代码:35_src_路由的props配置
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
<router-link>
的replace属性
- 作用:控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式:分别为
push
和replace
,push
是追加历史记录,replace
是替换当前记录。路由跳转时候默认为push
- 如何开启
replace
模式:<router-link replace .......>News</router-link>
编程式路由导航
- 示例代码:37_src_编程式路由导航
- 作用:不借助
<router-link>
实现路由跳转,让路由跳转更加灵活 - 具体编码:
//$router的两个API
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退
缓存路由组件
- 示例代码:38_src_缓存路由组件
- 作用:让不展示的路由组件保持挂载,不被销毁。
- 具体编码:
- 注意:include中放入 组件名!!!
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
两个新的生命周期钩子
- 示例代码:39_src_两个新的生命周期钩子
- 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
- 具体名字:
activated
路由组件被激活时触发。deactivated
路由组件失活时触发。
路由守卫
- 作用:对路由进行权限控制
- 分类:全局守卫、独享守卫、组件内守卫
全局守卫
- 示例代码:40_src_全局路由守卫
//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}else{
next() //放行
}
})
//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'vue_test'
}
})
独享守卫
- 示例代码:41_src_独享路由守卫
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}else{
next()
}
}
组件内守卫
- 示例代码:42_src_组件内路由守卫
//进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫:通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
路由器的两种工作模式
- 对于一个url来说,什么是hash值?——
#
及其后面的内容就是hash值。 - hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
- hash模式:
- 地址中永远带着#号,不美观 。
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
- 兼容性较好。
- history模式:
- 地址干净,美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
- 解决方案之一:nodejs+express使用nodejs-history-api-fallback中间件
上线部署代码
-
打包:
npm run build
,打包后的结果在dist目录
-
打包后必须使用静态资源服务器部署:nodejs+express的部署服务器
实战项目:模仿后台实现几个页面
- 后台项目:VueAdmin
- 技术栈:Vue2, elementUI, ajax
页面内容&功能
- SPA(单页面项目)
数据查询-汇总数据(MyData组件)
- post搜索接口 (DONE)
- 组件间通讯:Search组件获取的结果 更新到List组件 (DONE)
- 分页&翻页 (DONE)
- 下角标的翻页 (DONE)
- 列升序,降序,排序函数 # TODO
- 页面内容的模糊搜索:elementUI table 实现前端全局搜索 # TODO
- 每行的点击确认按钮 (DONE)
- ajax post有问题,尝试nodejs实现服务端GET响应Json # TODO
视频审核-待审核(VideoReview组件)
- 整体效果展示 (DONE)
- 貌似无法使用el-table实现,通过v-for实现 (DONE)
- 子页面的切换 (DONE)
- 通过路由整合不同页面和功能展示 (DONE)
- 弹出式视频播放 (DONE)
- 资源的根目录 & 本地资源展示:
require(‘@/assests/xxx')
(DONE)
部署
- 使用Nginx作为静态资源服务器,把打包后的dist下Vue项目放在Nginx即可。
- 参考:
第三方库
- 第三方库搜索网站:bootcdn
常用的第三方库
- moment.js:处理日期及格式
- dayjs:轻量化的monent.js
常用UI库
PC
- ElementUI:Element
- AntDesign?
- echart:图标展示
移动端
- Vint?
- Vant