Vue (快速理解)v-model本质 Vue是什么用于构建用户页面的渐进式开源javascript框架也是一个创建

Vue是什么

用于构建用户页面的渐进式开源javascript框架 也是一个创建SPA单页应用的Web应用框架，Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互

渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用

特性 : 数据驱动(MVVM)，组件化开发，特殊的指令系统

MVVM是什么

MVVM(模型, 视图, 视图模型双向关联的一种设计模式)
MVVM好处: 减少DOM操作, 提高开发效率

Vue指令

以v-开头的标签属性, 叫指令, 给标签添加额外功能

v-bind 简写 " : "
v-on和修饰符 简写 " @ "
v-model和修饰符
v-text和v-html
v-show和v-if以及v-else
v-for

虚拟DOM是什么

本质就是一个JS对象, 保存DOM关键信息

虚拟DOM好处:

提高DOM更新的性能, 不频繁操作真实DOM,

在内存中找到变化部分, 再更新真实DOM(打补丁)

diff算法 key

key值要求:

唯一不重复的字符串或者数值.

key应该怎么用?

有id用id, 无id用索引

key的好处:

可以配合虚拟DOM提高更新的性能

侦听器 watch

如何侦听一个对象/数组

把侦听器写成对象形式, 给handler方法和deep:true

侦听器函数马上执行

deep: true

<template>
-   <div>
    用户名: <input type="text" v-model="user.name">
  </div>
</template>

export default {
  data() {
    return {
      user: {
        name: 'zs'
      }
    }
  },
  watch: {
    //侦听器 只有user 变量的值发生了变化 对应的 侦听器 就会被触发
    user: { 
      deep: true,  //开启 深度监听
      handler(newVal) {
        console.log(newVal.name)
      }
    }
  }
}

Vue组件概念

.vue文件,可复用的 vue, html,样式,js

遇到重复标签, 可复用的时候封装组件

组件好处:重复利用,各自独立, 互不影响

组件之间通信

父组件A通过props的方式向子组件B传递，B 传 A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

vue生命周期

什么是生命周期?

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

钩子函数有哪些?

初始化 / 挂载 / 更新 / 销毁

作用: 特定的时间点，执行特定的操作

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

分类: 4大阶段8个方法

$refs,$ nextTick作用

ref 作用：给标签或者组件添加一个标记（引用）

this.$refs 作用：获取当前组件中所有的ref引用

2种方式获取原生DOM标签

1. 目标标签 – 添加id / ref

2. 恰当时机, 通过id / 通过ref属性获取目标标签

如何获取组件对象呢?

目标组件添加ref属性

this.$refs.名字获取组件对象

拿到组件对象能做什么?

调用组件里的属性/方法

vue插槽使用

默认插槽

子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面

父组件在使用的时候，直接在子组件的标签内写入内容即可

具名插槽

子组件用name属性来表示插槽的名字，不传为默认插槽

父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

路由系统

- 基本使用步骤

安装

yarn add vue-router

引入

import VueRouter from 'vue-router'

使用插件

Vue.use(VueRouter)

创建路由实例

const router = new VueRouter()

关联到vue实例

new Vue({router: router})

- 配置路由规则

通过routes配置规则

new VueRouter({routes: [ {path: '', component: ''} ]})

指定路由的出口

router-view

重定向

redirect

404页面

模式

hash

history

- vue-router路由系统

vue-router 本质是什么?

第三方包, 下载后集成到vue项目中

vue-router如何使用?

下包/引入/注册/规则/路由对象/注入/挂载点

规则如何生效?

切换url上hash值, 开始匹配规则, 对应组件展示到

router-view位置

Vue (快速理解)