06 前端开发框架VUE技术应用总结

1. VUE 基础

1.1 MVVM设计

MVVM: 界面View+模型Model+视图模型ViewModel

1.2 VUE绑定原理设计

访问器属性+虚拟DOM树
变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

1.3 虚拟DOM树分析

虚拟DOM树优点:

1. 小: 只包含可能变化的元素。
2. 遍历查找快
3. 修改效率高: 只修改受影响的元素。
4. 避免重复编码: 已封装DOM增删改查代码

1.4 VUE编程步骤实践Vue功能3步:

1. 先创建增强版的界面:
   a. 整个界面必须包含在一个唯一的父元素下
   b. 可能变化的元素内容用{{自定义变量名}}标记
   c. 触发事件的元素用@click="自定义处理函数名"标记
2. 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
3. 在new Vue()对象内定义模型对象data和methods
   a.界面所需的所有变量都放在data中
   b.界面所需的所有事件处理函数都放在methods中

1.5 绑定与指令应用

1. 如果元素的内容需要随变量自动变化: {undefined{}}
2. 如果元素的属性值需要随变量自动变化: :
3. 控制一个元素显示隐藏: v-show //使用display:none隐藏元素
4. 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素
5. 多个元素多选一显示: v-if v-else-if v-else
6. 只要反复生成多个相同结构的元素组成列表时: v-for :key=“唯一标识”
   强调: 为什么必须加:key=“i”？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。
7. 只要绑定事件: @ $event
8. 防止用户短暂看到{undefined{}}: v-cloak和v-text
9. 只要绑定原始HTML代码片段内容: v-html
10. 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once
    优化: 减少虚拟DOM树中元素个数。
11. 保护内容中的{undefined{}}不被编译: v-pre
12. 今后只要想获得表单元素的值或状态: v-model

1.6 绑定样式分析(了解):

1. 需要精确修改某一个css属性，就绑定style:
   a. <元素 style=“固定样式” :style="{css属性:变量名, …}"

data:{
   变量名:css属性值
	... : ...
}

b. <元素 style=“固定样式” :style=“变量名”

data:{
   变量名:{
	css属性名: 属性值,
	... : ...
   }
  }

2. 只要批量修改一个元素的多个css属性就绑定class
   a. <元素 class=“固定class” :class="{class名:变量名, …}"

data:{
   变量名:true或false,
   ... : ...
}

b. <元素 class=“固定class” :class=“变量名”

data:{
      变量名:{
	    class名:true或false,
    ... : ...
   }
}

1.7 计算属性应用实践

今后只要根据其他变量的值动态计算出一个属性值就用计算属性:

<元素>{undefined{计算属性}}</元素>

---

new Vue({
  el:"#app",
  data:{...},
  methods:{...},
  computed:{
    计算属性名(){
      计算过程
      return 计算结果
    }
  }
})

1.8 生命周期函数应用

vue生命周期4个阶段 8个钩子函数

1. 创建(create)

created(){ ... }
beforeMount(){ ... }

2. 挂载(mount)

mounted(){ ... 经常在这里发送ajax请求 ... }
beforeUpdate(){ ... }

3. 更新(update)

updated(){ ... }
beforeDestroy(){ ... }

4. 销毁(destroy)

destroyed(){ ... }

2. Axios方式的Ajax请求

只要在vue中发送ajax请求，就用axios
axios.defaults.baseURL=“服务器端接口的公共基础地址部分”

Get请求

axios.get(
  "服务器端接口地址的相对路径",
  {
    params:{ 参数名: 参数值, ...  }
  }
).then(result=>{
  ... result.data...
})

Post请求

axios.post(
  "服务器端接口地址的相对路径",
  "参数名1=参数值1&参数名2=参数值2&..."
).then(result=>{
  ... result.data...
})

强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象

destroyed(){ ... }

3. VUE 组件化开发

3.1 组件设计

只要希望重用一块独立的功能区域就用组件:

1. 定义组件

Vue.component(组件标签名,{undefined
template:HTML内容片段,
data(){ return { 变量 } },
//其余和new Vue()完全相同
})

2. 在HTML中使用自定义组件

<组件标签名/>或双标记也行

3. 原理: new Vue()扫描到自定义组件标签
   a.组件的template中的HTML内容代替页面中<组件标签>位置。
   b. 并为这个小区域专门创建一个缩微版的vue类型对象。
   1). 调用组件的data()函数为当前组件副本创建一个专属数据对象副本。
   2). 引入组件对象中的methods等其他内容到当前组件对象副本中

3.2 基本步骤

a. 拿到页面先划分功能区域
1). 从上到下，按功能不同划分区域
2). 按是否重用划分
b. 为每个组件创建独立的.js文件，其中包含一个组件对象及其内容
c. 将所有组件引入唯一完整的html页面中，并在其中添加父组件标签。

3.3 运行分析

1. new Vue()扫描vue.js文件发现父组件标签，创建并替换父组件
2. b. 父组件扫描自己内部的template内容，创建并替换子组件

3.4 组件类型

1. 根组件: new Vue()
2. 全局组件: Vue.component(…)
3. 子组件: 三步

1.
var 子组件对象名={undefined
内容必须符合组件的要求
}
子组件对象名必须是驼峰命名
2.
父组件对象中:{undefined
… …
components{ 子组件对象名, … ,… }
}
子组件对象名必须是驼峰命名
3.
父组件template中用<子组件标签名/>引入子组件内容
components会将子组件对象名的驼峰命名自动翻译为-分隔
所以, 使用子组件标签时，要用-分隔多个单词

3.5 组件间传参

1. 父组件给子组件

<子组件 :自定义属性名=“父组件变量”>

2. 子组件取:
   props:[“自定义属性名”]
   结果: 在子组件内，props中的"自定义属性名"与子组件自己data中的变量用法完全相同！

4. 单页应用实践(SPA)

4.1 基本步骤

第一步： 先创建唯一完整的HTML页面

1. 包含vue基本的页面结构

  <div id="app"> new Vue({el:"#app"})

2. 引入所有必要的文件和组件

    vue-router.js, 其它页面或组件文件, router.js路由器对象所在文件中用为今后页面组件预留空位。

第二步： 再为每个页面组件创建独立的文件。每个页面组件其实都是一个子组件
第三步： 创建router.js文件，例如：

1. 创建路由字典对象

    var routes=[
    {path:"/", component:首页组件对象名},
    {path:"/相对路径" , component: 其它页面组件对象名},
    {path:"*", component: 404页面组件对象 }
  ]

2. 创建路由器对象，并将路由字典对象转入路由器对象中

    var router=new VueRouter({ routes })

3. 将router对象加入到new Vue()中

       new Vue({ el:"#app", router })

4.2 页头等全局组件：

1. 创建独立的文件保存页头组件的内容
2. 使用Vue.component(“my-header”,{ … })将页头创建为全局组件
3. 在唯一完整的HTML页面中引入页头组件文件
4. 使用页头组件标签: 2种:
   1). 如果所有页面都有统一的页头:
   就放在唯一完整的html页面中外部上方
   2). 如果有的页面有页头，有的页面没有页头:
   就只放在需要页头的组件中的template中

4.3 路由跳转

1. html中: 文本
2. js中: this.$router.push("/相对路径")

4.4 路由传参

1. 修改路由字典:

  {path:"/相对路径/:自定义参数名", component:页面组件对象, props:true}

2. 跳转时:

   <router-link to="/相对路径/参数值"
  或
  this.$router.push("/相对路径/参数值")

3. 下一个页面接:

   1). props:[ '自定义参数名' ]
   2). 可将"自定义参数名"用作绑定或程序中都行

5. 安装vue脚手架

5.1 安装步骤

1. 设置npm默认使用国内淘宝镜像仓库:

npm config set registry http://registry.npm.taobao.org
  备选: npm i -g cnpm --registry=http://registry.npm.taobao.org

2. 安装可反复生成项目脚手架代码的工具:

npm  i   -g  @vue/cli
  备选: cnpm i -g @vue/cli

3. 启动vue脚手架项目

npm run serve

4. 打开浏览器，地址栏输入:

 http://localhost:8080

5.2 脚手架文件夹结构

(1). 唯一完整的HTML页面: 一分为三:

a. public文件夹
1). 图片img文件夹放在public文件夹下
2). 第三方css的压缩版和第三方js的压缩版都放在public文件夹下
3). 唯一完整的HTML文件index.html中，head中引入第三方的css和js

b. src/App.vue
1). 下只包含公共的页头组件和
2).

1). import引入App.vue，router，axios，以及其他全局组件
2). 将全局组件对象转为真正的全局组件: Vue.component( “组件标签名”, 全局组件对象 )
3). 配置axios并放入原型对象中:
axios.defaults.baseURL=“服务器端基础路径”
Vue.prototype.axios=axios;

(2). 为每个页面创建.vue组件文件，都放在src/views文件夹下。每个.vue文件中:

a. 标签内，包含这个页面的HTML内容
b. 中的js内容，和前四天将的是完全一样的写法，绑定，指令，函数，生命周期，axios请求等都一样。前四天怎么用，这里就怎么用。

(3). 路由字典和路由器对象，在src/router/index.js文件中

a. 仅import首页组件对象，不要过早引入其它页面组件
b. 路由字典中首页组件: { path:"/", component:首页组件对象}
c. 其余页面组件都做成懒加载:

{undefined
path: ‘/相对路径’,
component: () => import(/* webpackChunkName: “组件名” */ ‘…/views/其它页面组件.vue’)
}

(4). 全局组件都放在src/components文件夹下，每个全局组件.vue文件中。

全局组件必须在main.js引入，并用Vue.component()转化,为真正的全局组件，才能在其它组件的HTML中使用。

(5). 运行时, 路由器router对象监视浏览器地址栏路径变化

查找对应的页面组件内容，先代替App.vue中的，然后main.js再将包含要加载的页面内容的App.vue组件内容，替换到唯一完整的index.html中空闲位置。

6. 懒加载应用实践

6.1 异步延迟加载

src/router/index.js
//不要import Details from "../views/Details"
const routes=[
  ...
  {
    path:"/details/:lid",
	component: () => import(
		/* webpackChunkName: "details" */ 
		'../views/Details.vue'
	),
    props:true
]

6.2 彻底懒加载:

项目根目录创建vue.config.js

module.exports={
  chainWebpack:config=>{
    config.plugins.delete("prefetch")
    //删除index.html开头的带有prefetch属性的link，不要异步下载暂时不需要的页面组件文件
  },
}

7. http-proxy方式跨域

7.1 vue.config.js设置

module.exports={
  ... ,
  devServer: {
    proxy: {
      '/': {
        target: `服务器端接口地址公共基础路径`,
        changeOrigin: true
      }
    }
  }
}

7.2 main.js

axios.defaults.baseURL="服务器端公共基础路径"

7.3 避免组件间样式冲突

(1)方案1

<style scoped>

(2)方案2

<template>
   <组件父元素 class="组件名">
  </template>
  <style>
   .组件名>子元素选择器{ ... }
  </style>

7.4 watch+事件修饰符+防抖

(1). 希望变量一变化就自动执行一项操作时:

data(){
     return { 变量: 值 }
  },
watch:{
    变量(){
        要执行的操作
}
}

(2). 事件修饰符:
@事件.13 按回车时才执行
@事件.stop 阻止冒泡
@事件.prevent 阻止默认行为
(3). 防抖:

data(){
  return {
    ... ,
    timer:null
  }
},
methods:{
  查找方法(){
    if(this.timer!=null){
      clearTimeout(this.timer)
    }
    this.timer=setTimeout(()=>{
      正式的查找操作
    },等待时间)
  }
}

7.5 插槽技术应用

(1). 只要多个组件拥有相同的结构，只是局部的内容不同，都可用插槽实现
(2). 如何:
a. 先额外创建一个带插槽的外壳组件,保存其它多个组件相同部分的HTML+CSS+JS。但是，外壳组件中将来可能变化的位置，用标记
b. 再定义其它使用外壳组件的组件:
1). 引入带插槽的外壳组件:

  import 外壳组件名 from "./外壳组件.vue"
  export default {
    components:{ 外壳组件名 },
      ... 
  }

2). 在其它组件中:

  <template>
    <外壳组件 :外壳组件所需属性="变量">
      <当前组件自有的个性化内容>
    </外壳组件>
  </template>

8. Vuex 数据管理

9. TypeScript 基本语法

10. Vue3 新特性介绍

10.1 原理

绑定原理:ES6 Proxy代理对象+虚拟DOM树

10.2 Proxy代理对象

新生成的代理对象 = new Proxy(要保护或监视的原对象, { 
      //当有人试图获取数组中任何一个元素值时自动触发
      get(当前对象, 属性名) { 
        console.log(`有人试图读取arr对象的${属性名}成员`)
        return 当前对象[属性名];
      },
      //当有人试图修改数组中任何一个元素值时自动触发
     set(当前对象, 属性名, 新值) {
        console.log(`有人试图修改arr对象的${属性名}成员`)
        当前对象[属性名] = 新值;
        return true; //必须: 返回修改成功！
      }
  });

//今后，都使用新代理对象，代替使用原对象。但是用法上和使用普通对象完全一样！

10.3 main.ts 中实践

1. 默认:

   createApp(App).use(store).use(router).mount('#app’)

2. 全局组件:

import 组件对象  from “组件文件相对路径”
var app= createApp(App);
app.component('组件标签名', 组件对象名)
app..use(store).use(router).mount('#app’)

3. 全局指令:

app.directive ("my-focus",{
	mounted(DOM元素){
			DOM操作
	}	
})

4. axios:

//axios对象是单例模式，整个项目中只有一个axios对象，哪里使用都一样。
import axios from “axios”
axios.defaults.baseURL=”服务器端接口基础路径”
//单例模式，不用放到原型对象中，也能在任意组件内引用——Vue2也可以这样用。

10.4 页面/组件

10.5 新声明周期钩子函数

  beforeCreate -> setup()
  created -> setup()
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeDestroy -> onBeforeUnmount
  destroyed -> onUnmounted