day74 vue框架

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" />