1、箭头函数 let fn = (a, b) => a + b;
// es5中只有function
// es6中新增了 箭头函数 与 对象方法
function f1() {
console.log('f1 run')
}
f1();
function f2() {
return '22222'
}
let r2 = f2();
console.log(r2);
let f3 = function () {
console.log('f3 run')
};
f3();
let f4 = () => {
console.log('f4 run')
};
f4();
// 箭头函数函数体只有返回值,没有多余代码,还可以简写
let f5 = () => 12345;
let r5 = f5();
console.log(r5);
// 箭头函数如果有参数,() 也可以省略
a = 10;
let f6 = n => n * 10;
let r6 = f6(a);
console.log(r6);
{
render: h => h(App); #render是key
}
2、函数原型:给函数设置原型 Fn.prototype.变量 = 值,那么通过new Fn 产生的对象都可以共用 原型变量
// js原型
/**
* class People:
* pass
*
* p1 = People()
* p2 = People()
*
* People.arg = 100 // 类比python中的类 给类添加属性,所有对象公用
* p1.arg
* p2.arg
*/
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
Fn.prototype.num = 888;
// f1.num = 10;
console.log(f1.num);
console.log(f2.num);
let f3 = new Fn();
console.log(f3.num);
3、vue项目的请求生命周期:main.js完成环境的加载与根组件的渲染;router的index.js完成路由映射
main.js
1)入口文件:加载vue、router、store等配置 以及 加载自定义配置(自己的js、css,第三方的js、css)
2)创建项目唯一根组件,渲染App.vue,挂载到index.html中的挂载点 => 项目页面显示的就是 App.vue 组件
3)在App.vue中设置页面组件占位符
4)浏览器带着指定 url链接 访问vue项目服务器,router组件就会根据 请求路径 匹配 映射组件,去替换App.vue中设置页面组件占位符
eg: 请求路径 /user => 要渲染的组件 User.vue => 替换App.vue中的 <router-view/>
index.js
需要将页面组件(views文件夹下)导入,并且通过路由规则表,将注册页面组件,与url路径形成映射关系
import User from '@/views/User' # ‘@’ 代表 /src,也就是src项目绝对路径,文件后缀可以省略
const routes = [
{
path: '/user',
name: 'user',
component: User
}]
4、<router-view />标签作为路由映射的页面组件占位符
app.vue
<template>
<div id="app">
<!--提供一个视图组件占位符,占位符被哪个views下的视图组件替换,浏览器就显示哪个页面组件-->
<router-view/>
</div>
</template>
5、<router-link></router-link>来完成路由的跳转
<!--router-link不会被解析为a标签,不适用a标签是因为a跳转回刷新页面-->
<router-link to="/">主页</router-link>
/*router-link渲染的a激活时的状态*/
a.router-link-exact-active {
color: pink;
}
6、this.$router来完成路由的跳转:push() | go()
push的两种方式
this.$router.push(`/book/detail/${id}');
// this.$router.push({
// name: 'book-detail',
// params: {pk: id},
// });
go的参数是正负整数,代表历史记录前进或后退几步
this.$router.go(-1);
7、this.$route来完成路由的传参
window.console.log(this.$router); // $router管理路由跳转的
window.console.log(this.$route); // $route管理路由数据的
let pk = this.$route.params.pk;
8.组件的生命周期钩子
一个组件,会在页面中渲染,也会销毁存放到内存(不渲染) => 加载组件到销毁组件
从加载一个组件到销毁该组件,整个生命周期中存在很多特殊的时间节点(组件要创建了,创建成功了,要加载了,加载成功了,
要更新数据了,数据更新完毕了,要销毁了,销毁成功了),这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成在这些时间
节点需要完成的业务逻辑
生命周期钩子函数书写的位置:钩子直接作为vue实例的成员
重点:1、书写位置 2、每个钩子节点时的特性
#最常用的钩子函数:组件加载后,可以请求后台数据,更新组件数据;组件间路由传参的值获取
created() {
window.console.log('该组件已经创建了');
window.console.log(this.num)}
9.vue组件的组成
.vue文件就是一个组件:html、css、js
html由template标签提供:有且只有一个根标签
css由style标签管理:style标签添加scope属性,保证样式只在该组件内部起作用(样式组件化)
js由script标签管理:内部书写的就是组件{}语法,但是一定要导出 export default
10.静态资源的加载
前台自己提供的静态资源,在传输后再使用(组件间交互),要才有require函数来加载资源
let img1 = require('../assets/img/西游记.jpg');
11.循环组件key属性设置
<!-- key属性是为标签建立缓存的标识,不能重复,且在循环组件下,必须设置 -->
<Book v-for="book in books" :book="book" :key="book.title" />