Vue知识点概况

---

前言

⚫ 渐进式javacript框架, 一套拥有自己规则的语法
⚫ 官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)

一、 @vue/cli脚手架 搭建项目

1 全局安装@vue/cli 模块包 yarn global add @vue/cli

2 创建项目 vue create 项目名

yarn serve 启动项目

3 @vue/cli 目录和代码分析

目标：文件夹和文件含义, 关键文件里代码意

4 _项目架构了解

5_@vue/cli 自定义配置 vue.config.js

6_eslint检查代码

eslint是一种代码检查的工具

7_单vue文件讲解

二 Vue指令

1 插值表达式 {{ 表达式 }}

MVVM设计模式 （减少DOM操作, 提高开发效率）

2 v-bind （操作属性 简写 ：）

_动态class

1 :class="{类名: 布尔值}"

2 :style="{css属性名: 值}"

3 v-on （绑定事件 简写：@）

-v-on事件对象 （@click=“fn(a,$event)”）

v-on修饰符 @事件名.修饰符(.stop .prevent .once )

修饰符列表
⚫ .stop - 阻止事件冒泡
⚫ .prevent - 阻止默认行为
⚫ .once - 程序运行期间, 只触发一次事件处理函数

键盘事件, 添加修饰符

更多修饰符: https://cn.vuejs.org/v2/guide/events.html

4 -v-model 双向数据绑定(主要用在表单上)

v-model修饰符 （ v-model.修饰符）.number .trim .lazy

5 v-text和v-html

6 v-show和v-if （显示隐藏）

7 v-for ： v-for="(值变量, 索引变量) in 目标结构"

三 vue 属性内容

1 _更新监测, key作用

数组变更方法, 就会导致v-for更新, 页面更新

_diff算法

1. diff算法如何比较新旧虚拟DOM?同级比较
2. 根元素变化?删除重新建立整个DOM树
3. 根元素未变, 属性改变?DOM复用, 只更新属性

key 作用

1. 子元素或者内容改变会分diff哪2种情况比较?
   无key, 就地更新
   有key, 按照key比较
2. key值要求是?
   唯一不重复的字符串或者数值
3. key应该怎么用?
   有id用id, 无id用索引
4. key的好处?
   可以配合虚拟DOM提高更新的性能

2 _过滤器 用在插值表达式和v-bind动态属性里 （moment时间过滤模块）

⚫ 语法:
⚫ Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”}) //main.js中定义
⚫ filters: {过滤器名字: (值) => {return “返回处理后的值”}

3 _计算属性 （一个变量的值, 依赖另外一些数据计算而来的结果）

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

_计算属性_缓存

_计算属性_完整写法 set(){},get(){}

4 _侦听器_watch 可以侦听data/computed属性值的改变

深度侦听和立即执行

四 组件

1 _组件_基础使用（全局，局部）

组件-scoped作用（会自动给标签添加data-v-hash值属性）

CSS样式不影响其他组件

2 Vue组件通信

_父传子_props （props里的变量, 本身是只读的）

2 父组件内

_子向父_自定义事件 @自定义事件名=“父methods里函数名”

2. 子组件内, 恰当的时机, 触发父给我绑的自定义事件, 导致父methods里事件处理函数执行

子组件内

_跨组件通信-EventBus

⚫ 语法
⚫ src/EventBus/index.js – 创建空白Vue对象并导出
⚫ 在要接收值的组件(List.vue) eventBus.$on{(}^{\prime }事件{名}^{\prime },函数体)⚫在要传递值的组件(MyProduct.vue)eventBus.$emit(‘事件名’, 值)

五 组件进阶

1 vue生命周期

从创建 到 销毁 的整个过程就是 – Vue实例的 - 生命周期

1.1_钩子函数（4大阶段8个方法）

1.2_初始化 create（创建实例）

1.3_挂载 mounted（真实Dom）

1.4_更新 updated(data数据变更后)

1.5_销毁 destroy (销毁事件）

)

2 axios使用（ajax+Promise）

axios 是一个专门用于发送ajax请求的库
官网: http://www.axios-js.com

ajax原理?
浏览器window接口的XMLHttpRequest
axios是什么?
基于原生ajax+Promise技术封装通用于前后端的请求库

2.1_axios使用_获取数据（get）

2.2_axios使用_get传参params{}

axios哪个配置项会把参数自动写到url?后面
params

2.3_axios使用-post //data{}

axios默认发给后台请求体数据格式是?
json字符串格式

2.4_axios全局配置 axios.defaults.baseURL =""

3 $refs和 $nextTick使用

1 _获取DOM id 或$refs

3.1_获取组件对象 ref属性获取

3.1_Vue-异步更新DOM $nextTick

Vue更新DOM是异步的

优化: $nextTick()返回Promise 配合await使用
$nextTick函数原地返回Promise对象

3.4_组件name属性使用

4 _动态组件< component is=“组件名”>

1_组件缓存

_组件激活和非激活 activated –deactivated

5_组件插槽 slot> 默认内容</slot

1 具名插槽 slot name="" 使用时 #:‘插槽名’

2 作用域插槽 (使用子组件内变量)

可以让组件更加灵活的适用于不同的场景和项目

6 自定义指令（获取标签, 扩展额外的功能）

1_自定义指令_注册 全局和局部 directive(xx,inserted(el){})

传值 触发update（）方法

六 路由系统

.vue文件分2类, 一个是页面组件, 一个是复用组件

1 Vue路由简介和基础使用

路径和组件的映射关系

vue-router

⚫ 官网: https://router.vuejs.org/zh/

组件分类

vue-router模块使用步骤 （7步）

⚫ 步骤

1. 下载vue-router模块到当前工程

    yarn add vue-router
   

2. 在main.js中引入VueRouter函数

    import VueRouter from 'vue-router'
   

3. 添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件

    Vue.use(VueRouter)
   

4. 创建路由规则数组 – 路径和组件名对应关系

const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]

5. 用规则生成路由对象

const router = new VueRouter({
  routes
})

6. 把路由对象注入到new Vue实例中

new Vue({
  router
})

7. 用router-view作为挂载点, 切换不同的路由页面
   注意: 一切都要以url上hash值为准
   components换成router-view

<router-view to="xxx"></router-view>

2 声明式导航 - 跳转传参

{
    path: "/part",
    component: Part
  },
  {
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },

3. vue路由 - 重定向和模式

目标: 匹配path后, 强制切换到目标path上

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

3.1 路由 - 404页面

找不到路径给个提示页面

1 创建NotFound页面
2 在main.js - 修改路由配置

//导入包
import NotFound from '@/views/NotFound'

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]

3.2 路由 - 模式设置hash histoty

⚫ hash路由例如: http://localhost:8080/#/home
⚫ history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

const router = new VueRouter({

4. vue路由 - 编程式导航 用JS跳转

语法:
二选一

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

1 main.js - 路由数组里, 给路由起名字

{
    path: "/find",
    name: "Find",
    component: Find
},

4.1 编程式导航-跳转传参 query:{}；params:{}

// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参
// 注意: 如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由

5 vue路由 - 嵌套和守卫 children:[]

const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]

5.1 声明导航 - 类名区别 router-link自带的2个类名

1- router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
2- router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径

5.2 全局前置守卫 跳转之前判断

目标: 路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转

在路由对象上使用固定方法beforeEach

语法 router.beforeEach((to, from, next)=》{}）

// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息)    目标
// 参数2: 从哪里跳转的路由 (路由对象信息)  来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地

// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

7 补充知识 vant组件库 （移动端 组件库）

官网：
https://vant-contrib.gitee.io/vant/#/zh-CN/

vant中有些css无法覆盖问题 /deep/