Vue总结

v-html 指令：可以渲染 html标签的指令标签被渲染到绑定标签的子元素中innerHTML
v-text：和 v-html用法一致不过v-text 不能渲染 html标签innerText
v-bind：绑定数据主要用于标签的原生属性绑定
div 的原生属性
title class id style 等
input 的原生属性 type id name class title value placeholder checked disabled readonly等
img 的原生属性
src class id title alt 等
v-bind的用法
<标签 v-bind:原生属性="data里面要绑定的值">
简写方法(推荐)
<标签 :原生属性="data里面要绑定的值">
v-on：绑定方式
<标签名 v-on:事件名="methods里面的函数名()" >
简写方式(推荐写法)
<标签名 @事件名="methods里面的函数名()">
v-model：双向绑定
1. 数据(data) 第一向
2. 视图 (html页面) 第二向
数据变视图变，视图变数据变
作用在表单标签(input,textarea,select)input的 type 的值为 text,number等的时候 v-model自动绑定 value的值;
v-if = "判断条件"v-else-if="判断条件"v-else 前面的都不满足则else满足用法 <标签名 v-if="判断条件">当判断条件满足的时候显示该标签v-if 不满足条件的标签不会被渲染到dom树中
v-show="判断条件"
判断条件满足时显示该标签
不满足时隐藏该标签v-show 会把标签全部渲染到 dom树里面
通过控制标签的display属性让不满足判断条件的标签值赋予 none 不显示在页面上
v-if和v-show的区别;
1. 不满足条件的标签 v-if 不会渲染到 dom树里面 v-show 会渲染到dom树里面，只不过v-show会控制标签的display:none
2. v-if适用于，数据不会发生改变的情况(用于列表的数据渲染)
3. v-show适用于，数据会经常性的发生改变;
v-for 作用于数据的渲染居多

用法
<被渲染的标签名 v-for="(item(里面的每一条数据),index(当前数据的下标)) in 渲染的数组(对象)" :key="列表中的唯一值(一般使用数据的id值)" >
v-for 需要配备一个key值
因为在列表数据的渲染过程中，如果发生了数据的改变，
会较大可能的影响数据的最终渲染结果;v-for在渲染的数据改变的时候会同时执行所用到的 vue指令

v-for还会监听数组的方法push()、pop()、shift()、unshift() 等。。。
v-if和v-for不建议一起使用，因为v-for的优先级比v-if高，这会导致v-if可能存在每一个v-for中最后造成资源浪费

四、指令绑定要点

Vue之后对于dom的操作仅存在 0.0001%的可能;
操作 data里面的数据
Vue事件里面的this 指向与 Vue实例 data里面的数据可以直接 this.数据名的方式调用和修改
当然 methods 里面的函数同样可以 this.函数名() 调用
onsole.log(this.msg) //调用
修改这样的赋值方式会直接更新视图

五、MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel,它们把每个页面都拆分成了这三个部分

Model 表示当前页面渲染时所依赖的数据源
View 表示当前页面所渲染的 DOM 结构
ViewModel 表示 vue 的实例，它是 MVVM 的核心

六、事件修饰符

事件修饰符	说明
.prevent	阻止默认行为（阻止 a 链接的跳转、阻止表单的提交）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定事件只触发一次
.self	只有在 event.target 是当前元素自身时触发事件处理函数

v-model 指令的修饰符：

修饰符	作用
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符
.lazy	在 `change` 时更新而非 `input`时更新

七、组件的生命周期

生命(生 -> 死):
创建，销毁结束;
周期:
组件也有自己的生命周期:
创建过程;

创建前(beforeCreate)

vue实例还没有被创建，data里面的数据不可被调用;
也就是this.数据名无效,页面仍然处于最原始的状态

创建后(created)

vue实例已经被创建，这个钩子函数是第一个能够访问到
data数据的钩子函数;页面仍然是最原始的状态，
虚拟dom还没有开始生成;
挂载过程;

挂载前(beforeMount)

虚拟dom已经生成，但是还没有渲染到页面上，
但是这个钩子函数，做任何的dom操作，都不奏效;
因为，在这个钩子函数里面删除的所有的dom，
都已经被虚拟dom拷贝了一份，

挂载后(mounted)

所有的dom都已经渲染到了页面上，dom是最新的;
页面也是最新的; 组件的初始化已经完成了
更新过程;

更新前(beforeUpdate)

页面更新前，数据是最新的，但是页面还是旧数据;

更新后(updated)

页面的是最新的，数据也是最新的;
销毁过程;

销毁前(beforeDestroy)

实例销毁前都会触发的事件;

销毁后(destroyed)

这个生命周期是最后一次，能够调用事件以及data里面数据的钩子函数
销毁后，页面还在，页面的所有操作，都不在生效;
一般在这个生命周期，做一些，停止计时器，清空内存等操作;
称为组件的四大生命周期;

八小份生命周期都有自己的钩子(vue对象里面的函数)函数;

组件之间的数据共享

父子关系
兄弟关系

父组件向子组件共享数据

父组件：

<template>
  <child :msg="message"></child>
</template>

export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}

子组件：

<template>
  <div>父组件传递过来的 msg 值：{{ msg }}</div>
</template>

export default {
  props: ['msg']
}

子组件向父组件共享数据

子组件：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count ++;
      <!-- 修改数据时，通过 $emit() 触发自定义事件 -->
      this.$emit('change-count', this.count);
    }
  }
}

父组件：

<template>
  <child @change-count="changeCount"></child>
</template>

export default {
  data() {
    return {
      parentCount: 0,
    }
  },
  methods: {
    changeCount(count) {
      this.parentCount = count;
    }
  }
}

兄弟组件之间的数据共享

创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象
在数据发送方，调用 bus.$emit(‘事件名称’, 要发送的数据)方法触发自定义事件
在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数)方法注册一个自定义事件

八、Vue 路由

前端路由的工作方式

用户点击了页面上的路由链接
导致了 URL 地址栏中的 Hash 值发生了变化
前端路由监听到了 Hash 地址的变化
前端路由把当前 Hash 地址对应的组件渲染到浏览器中

vue-router 安装和配置

安装 vue-router 包 npm i vue-router -S
创建路由模块
导入并挂载路由模块
声明路由链接和占位符

创建路由模块

# 在 src 源代码目录下，新建router/index.js路由模块
# 1. 导入 Vue 和 VueRouter 的包
import Vue from 'vue';
import VueRouter from 'vue-router';

2. 调用 Vue.use() 函数，把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter);

# 3. 创建路由的实例对象
const router = new VueRouter();

# 4. 向外共享路由的实例对象
export default router;

动态路由

路由的从参数以 : 进行声明，冒号后面的是动态参数的名称

在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问动态匹配的参数值

调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面

调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面

push 和 replace 的区别：

push 会增加一条历史记录
replace 不会增加历史记录，而是替换掉当前的历史记录

调用 this.$router.go() 方法，可以在浏览器历史中前进和后退

$router.go 的简化用法：

$router.back()：在历史记录中，后退到上一个页面
$router.forward()：在历史记录中，前进到下一个页面

全局前置守卫

# 创建路由的实例对象
const router = new VueRouter();

# 调用路由实例对象的 boforeEach() 方法，即可声明全局前置守卫
router.boforeEach((to, from, next) => {
  # to 是将要访问的路由信息对象
  # from 是将要离开的路由信息对象
  # next 是一个函数，调用 next() 表示放行，允许这次路由导航
});

next 函数的 3 种调用方式

当用户拥有后台主页的访问权限，直接放行：next()
当用户没有后台主页的访问权限，强制其跳转到登录页面：next(‘/login’)
当用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

控制后台主页的访问权限

router.boforeEach((to, from, next) => {
  if(to.path === '/main') {
    const token = localStorage.getItem('token');
    if(token) {
      <!-- 访问的是后台主页，且有 token 的值 -->
      next();
    } else {
      <!-- 访问的是后台主页，但是没有 toekn 值 -->
      next('/login');
    }
  } else {
    next(); // 访问的不是主页，直接放行
  }
});