1.1-Vue介绍

Create by fall on:2022-03-13 Recently revised in:2022-09-20

Vue

渐进式 javascript 框架。

声明式渲染-->组建系统-->客户端路由-->集中式状态管理->项目构建

集中式状态管理：方便管理业务数据，vue中有一个单独模块VueX专门处理此类业务

• 易用、熟悉后开发很快
• 灵活：在库和一套完整框架之间自由伸缩
• 高效：超快虚拟 DOM，20kb 运行大小

客户端路由：实现局部更新，历史回退功能

数据监听：从view（视图）到 model（模型）

数据绑定：从model（模型）到 view（视图）

上手

编译过程：将 vue 转换为 js、html 语法

<div class="app"></div>
<script src="vue.js"></script> <!-- 此处引入 vue.js-->
<script>
var app = new Vue({
  el:'.app', // 元素的挂载位置
  data:{}, // 值的内容
  methods:{} // 写方法，或者事件
})
</script>

插值表达式

• 将 vue 中的内容填充到 HTML 标签之中
• 插值表达式支持基本的计算操作

生命周期问题

挂载时：

父组件（beforeCreate）->父（created）->父（beforeMount）->子组件（beforeCreate）->子（created）->子（beforeMount）->子（mounted）->父（mounted）

子组件更新

父组件（beforeUpdate）->子组件（buforeUpdate）->子组件（updated）->父组件（updated）

父组件更新

父组件（beforeUpdate）->父组件（updated）

销毁

父 （beforeDestroy）->子 （beforeDestroy）->子 （destroyed）->父 （destroyed）

指令

使用详情可见 **指令 **章节

指令名称	指令功能	简写
v-cloak	先通过隐藏样式在内存时的值，读取后显示	无
v-text	填充纯文本，用该方法填充不会闪动	无
v-html	作用：填充HTML片段	无
v-pre	填充原始信息，显示原始信息，跳过编译过程	无
v-on:	添加事件(点击事件，移动时间)	@
v-band:	绑定后面的属性值	:
v-if	判断是否渲染	无
v-show	判断是否展示	无
v-for	遍历属性	无

计算属性

计算属性值会基于其响应式依赖被缓存

可以通过计算属性对于函数进行计算，由于有缓存机制，无论调用多少次，只会打印一次，牺牲内存，节省性能

// 选项式 API
var vm = new Vue({
  computed:{
    reverse:function(){
      console.log()
      return this.msg.split("").reverse().join('')
    }
  }    
})

// 组合式API
import {ref,computed} from 'vue'
const firstName = ref('鲁尼')
const lastName = ref('帕瓦')
// 一般的 computed 的使用
//const fullName = computed(()=>{
//  return firstName.value +lastName.value
//})
// 可以同时设置名称和读取名称
const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
// 设置名称时，会同步更新
const fullName.value = '小泽 玛利亚' // firstName.value 小泽 lastName.value 玛利亚

侦听器

• 采用侦听器监听用户名的变化
• 调用后台接口进行验证
• 根据验证的结果调整提示信息

watch:{
  firstName(val){
    this.fullName = val+" "+ this.lastName; // 当 firstName 改变时，fullName 也改变
  }
}

单文件组件

SFC 即单文件组件，更加方便进行编辑和使用

Vue SFC 是一个框架指定的文件格式，因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS，一个编译后的 SFC 是一个标准的 JavaScript(ES) 模块，这也意味着在构建配置正确的前提下，你可以像导入其他 ES 模块一样导入 SFC：

<template>
<!--里面存放页面的 html 内容 -->
</template>
<script>
// 里面存放脚本文件，同 html 中的 script
</script>
<style>
/* 里面存放页面的样式 */
</style>

根据所在位置，所在的模块拆分 vue 文件。

插件

使用

import {createApp} from 'vue'
// 引入插件
import myPlugin from './myPlugin.js'
const app = createApp({})
app.use(myPlugin,{}) // 第二个参数是一个个配置对象

编写

// 最终需要暴露一个 带有 install 方法的对象
import MyComponent from './views/MyComponent.vue'
const myPlugin = {
  install(app,options){
    app.config.globalProperties.msg = '消息已递出'
    app.components('MyComponent',MyComponent)
    app.provide('foo') = 'foo'
  }
}
// vue 会调用 install 方法，传入 app 和 options