$event

用于函数传参时为事件占位，是一个原生DOM元素

Vue有8个钩子函数

创建前后 beforeCreate ## created
挂载前后 beforeMount ## Mounted
更新前后 beforeUpdate ## updated
销毁前后 beforeDestroy## destroyed

开发模式和生产模式

dependencies（对应生产模式）和 devDependencies（对应开发模式）直接执行" npm i" 或者 "npm install" 就可以把项目的依赖配置好了，而这两个命令都是安装dependencies里面的模块，

SPA（单页面应用程序）

一个web网站只有一个html文件（较为复杂）

vue-cli

vue-cli一个基于webpack来创建工程化vue项目的工具 vue-cli是npm上的一个全局安装包 npm install -g @vue/cli这样就不要每次创建项目的时候都去安装一次vue-cli。

使用vue-V检查安装版本（注意一定是大V）

props中的required

required是开启必填项，为true的时候，该项在父组件使用的时候没有传过来会报错
注意props是只读的，不可更改
如在父传子中，子组件需要更改数据，可以使用父组件中存储数据的对象，因为props就是指向的父组件中传过来的数据。直接找到源头修改即可。

scoped

<style lang="scss" scoped></style>

scss跟css极其相似，对开发人员更加友好，支持嵌套的写法。
若没有该属性，则style标签中的样式将会作用到全局。
加了scoped属性后，vue会自动给组件的每个元素添加data-v-xxx，这样就能防止组件样式冲突。

属性选择器和/deep/的使用

h5[data-v-002]{
    color:red;
}

修改h5中包含data-v-002自定义属性的元素颜色。
/deep/主要在使用第三方组件库的时候，如果需要修改第三方组件库的默认样式的需求，可以使用/deep/

兄弟组件传值

父组件传子组件用自定义属性props

子传父组件使用自定义事件

触发自定义事件的时候将参数传递过去。

动态组件

components

components是一个内置组件，is是固定的属性，依赖 "is" 的值来决定渲染哪一个组件 <components is="HelloWorld"></components> 黑马教程中是不需要加s的，在下不知缘由

keep-alive标签

Vue内置标签，可对组件进行缓存

keep-alive标签

当组件被创建的时候既会执行created生命周期也会执行activated。

activated 生命周期激活时触发
deactivated 生命周期缓存时触发
include的属性即可指定哪些组件需要缓存
exclude的属性排除组件，让他不被缓存
注意两个属性时二选一的，不可同时存在

每个组件都有一个name名称，若是组件注册名称和组件中的name名称不一致，keep-alive站name名称这边，注册名称单是各备胎而已。

slot插槽

slot是vue为组件的封装者提供的能力，允许开发者在封装组件时把不确定的，希望用户自己指定的部分定义为插槽。 每个插槽身上默认有个name如果没有默认就是defalut，在使用是也需要指定使用插槽的name属性，如果不声明默认是绑定在defalut插槽上的

简易版本

子组件
  <div>
    <div>插槽的简单使用</div>
    <slot></slot>
  </div>

父组件使用
<TestDemo> <h1>slot</h1></TestDemo>

具名插槽

  <div>
    <div>插槽的简单使用</div>
    <slot name="first"></slot>
  </div>

注意使用时要用template标签包裹，不然会报错
      <TestDemo> 
        <template v-slot:first>
          <h1>slot</h1>
        </template>
      </TestDemo>

template标签是个虚拟标签，只起到包裹作用，不会被渲染，和微信小程序的block标签一样

v-slot可简写会一个#

slot踩坑

 <slot name="First" msg="我是testDemo" myUser="dffg"></slot>

父组件
  <TestDemo> 
          <template #First="res">
            <h1>slot{{res}}</h1>
          </template>
      </TestDemo>

在需要传入多个值的时候，首先确认msg已经使用过了，然后还需要传参，就可以自定义属性，但切记不要加冒号：,旧版本的是需要加冒号的，但那是过去式了。

自定义指令

  directives:{
    color:{
      bind(el,binding)  //当指令第一次被绑定在元素上是触发，一个页面只触发一次
      {
        console.log("我我我")
        console.log(el,binding)
      },
      update(el,binding){//指令数据更改时触发
        console.log("更改")
        console.log(el,binding)
       }
      //  如果所两个事件都需要触发，可以直接简写
    }
  },

如果所两个事件都需要触发，可以直接简写

    color(el,binding){
        console.log("我我我")
        console.log(el,binding)
     }

在使用时加上V-,如果绑定的数据count是变量也不需要：

<div v-color="count">插槽的简单使用</div>

eslint

可组装的js工具，约束代码风格。

常见报错情况如下，报错信息都可在官网进行相应查找

断点debugger

代码会执行到debugger然后停止执行，方便观察数据的变化

flex布局的flex属性

可使用该数据去控制父组件中子组件的占比。

prototype

如果组件能需要多次使用axios，可直接将它挂载vue原型上面。

import axios from "axios"

Vue.prototype.axios = axios
axios.defaults.baseURL = "根路径"

vue内置的都是以 $开头的，建议$ http来绑定网络请求

缺点：不利用API接口的复用

router路由

hash地址和组件之间的对应关系 路由的工作方式

锚点链接

有历史记录
路由中的hash地址其实也就是锚链接

location.href获取当前窗口地址 location.hash获取#号后面的地址信息（也就是获取hash地址信息）

小案例（模拟前端路由）

<template>
  <div id="app">
    <a href="#/HelloWorld">HelloWorld</a>
    <a href="#/TestDemo">TestDemo</a>
    <components :is="select"></components>
  </div>
</template>

 created(){
    window.onhashchange = ()=>{
      switch(location.hash)
      {
        case "#/HelloWorld":this.select = "HelloWorld"
        console.log(this.select)
         break;
        case "#/TestDemo":this.select = "TestDemo"
         console.log(this.select)
         break;
      }

    }
  },

解析：通过两个a链接来控制展示的组件，点击a后路径会更改，但页面不变，通过onhashchange事件监听，location.hash拿到更改后的路径，再展示对应的组件。

htmltagwrap插件（补齐标签）

开发过程中如果需要使用某标签包裹已有内容，需要在前面打出部分，再将闭合标签移动到尾部，非常麻烦 解决方法：安装该插件后，选中内容按下alt+w即可打出p标签，若是需要的是其他标签，修改即可。一改后两个都能同时改掉。

vue-router路由

在这个对象中。我们需要注意的是：{}是路由关系，也可以说是路由规则，在路由规则中，路由链接与path内容要保持一致。这里的路由链接是指router-link中的hash地址

import VueRouter from 'vue-router'
import HelloWorld from '../src/components/HelloWorld.vue'
import TestDemo from '../src/components/TestDemo.vue'

// use安装插件
Vue.use(VueRouter)

export default new VueRouter({
    routes: [
        { path: "/HelloWorld", component: HelloWorld },
        { path: "/TestDemo", component: TestDemo }
    ]
})

path路径一定要和router-link标签中的to值一样。
routes没有r

  <div id="app">
  <router-link to="/HelloWorld">HelloWorld</router-link>
  <router-link to="/TestDemo">TestDemo</router-link>

   <router-view></router-view> 
  </div>

router-view标签相当于一个占位符

用a标签也能事项跳转，但是a标签要加#号，router-link不需要，推荐使用router-link官方写法

redirect路由重定向

http://localhost:8080/#/时是没有默认内容的，后面出现路径后才可显示。

redirect: { path: "/", redirect: "/TestDemo" }
意外发现：{ path: "/", component: TestDemo }也可解决。

两种写法的区别 redirect：如果#后面没有路径了，就会跳到默认路径路由写法：#号后面没有内容就只是显示TestDemo组件，不会改变路径

声明式导航和编程式导航

a标签和router-link都属于声明式导航
vue-router提供了许多编程式API，最常用的API如下：

  this.$router.push("hash地址")  **有历史记录**

  this.$router.replace("hash地址")**没有历史记录**

  this.$router.go(数值)**负数就会往后退**

动态路由

把hash地址中可变得部分定义为参数项，从而提高路由规则得复用性，在vue-router中使用英文得冒号：来定义参数项

props获取值

、 { path: "tabIndex/:mid", component: tabIndex, props: true } 注意：子路径一定不要加/,否则跳转无效 使用场景：需要多次跳转同一个组件，每次跳转都会跳转到模块的不同区域，可通过动态路由简写路由规则，然后在开启props：true，在组件中即可拿到跳转时候携带的id，在根据id去显示不同的内容。

params获取值

<span>{{$route.params.mid}}</span>

导航守卫

导航守卫可以控制路由的访问权限，

全局前置守卫

调用router.beforeEach（fn） 即可声明全局前置守卫，每次发送路由导航的跳转，都会触发fn回调函数。

fn(to,from,next){ }

to表示要访问的路由信息对象
from是将要离开的路由的信息对象
next（）函数，调用next（）即可放行；next('hash路径') 即可跳转至该页面；next(false)中断当前路由

简易访问权控制案例
router.beforeEach((to, from, next) => {
    if (to.path === "/main") {
        console.log("main组件")
        console.log(to)
        const token = localStorage.getItem("token")
        if (token) {
            next()
        } else {
            console.log("跳转失败")
            next(false)
        }
    } else {
        next()
    }

})

子路由

routes: [
        {
            path: "/HelloWorld", component: HelloWorld,
            redirect: "/HelloWorld/tabIndex",//子路由重定向
            children: [
                { path: "tabMain", component: tabMain },
                // { path: "", component: tabMain }, //默认子路由
                { path: "tabIndex", component: tabIndex }
            ]
        }]

设置初始页面可通过子路由重定向或默认子路由的方式。

ES6模块化规范

默认导入和按需导入是可以同时进行的

import info,{name,age} from "文件路径" 使用info来导入exprot default的内容 重命名
import {name as str} from "文件路径"

冷知识

在模块导入的时候，如果你导入的是一个文件夹，那么它默认导入文件夹下的index.js文件

js程序假死

由于js是一门单线程语言，如果前一个耗时太长，就会出现程序假死问题。

同步任务和异步任务

异步中的宏任务和微任务

执行顺序如下：只要有微任务就立即执行，他们本质上是交替执行的。

回调地狱

promise

，

node.js的fs模块仅支持以回调函数的方式读取文件，不支持promise的调用方式，需要可安装then-fs，它的readFile（）可以异步的读取文件，返回promise对象

all（）

Promise.all()会发起promise并行的异步操作，等所有的异步操作全部结束后才执行.then

各种请求

原生ajax

const ax = new XMLHttpRequest();
    ax.open("GET","http://127.0.0.1:8088/recommendlist")
    ax.send()
    ax.onreadystatechange =function(){
      if(ax.readyState === 4)
      {
        if(ax.status === 200)
        {
          console.log(ax.responseText)
        }
      }

axios

    axios({
      methods:"GET",
      url:"http://127.0.0.1:8088/recommendlist"
    }).then(function(res){
      console.log("我是axios")
      console.log(res.data)
    })

只要返回的是promise对象就可以使用await来修饰，如果在函数里面，函数需要aysnc修饰

Vue知识点复习

$event

Vue有8个钩子函数

开发模式和生产模式

SPA（单页面应用程序）

vue-cli

props中的required

scoped

属性选择器和/deep/的使用

兄弟组件传值

父组件传子组件用自定义属性props

子传父组件使用自定义事件

动态组件

components

keep-alive标签

keep-alive标签

slot插槽

简易版本

具名插槽

slot踩坑

自定义指令

eslint

断点debugger

flex布局的flex属性

prototype

router路由

锚点链接

小案例（模拟前端路由）

htmltagwrap插件（补齐标签）

vue-router路由

redirect路由重定向

声明式导航和编程式导航

动态路由

props获取值

params获取值

导航守卫

全局前置守卫

fn(to,from,next){ }

子路由

ES6模块化规范

冷知识

js程序假死

同步任务和异步任务

异步中的宏任务和微任务

回调地狱

promise

all（）

各种请求

原生ajax

axios