Vue核心知识

vue核心知识梳理与总结，包括VUE基础语法、Vue3.X组件相关语法、Vue3.X动画和高级语法等内容。

VUE核心知识

• 基础语法
  • 创建应用
    • Vue.createApp( )
      • 创建一个应用 ，任何的Vue相关的内容，都应该在此部分编写。
    • const vm = app.mount( )
      • vm就是获取应用的根组件，通过vm可以获得vue里的任何数据、属性和方法
    • vm.$data
      • 获取数据对应内容
    • data(){}
      • data方法，用于在Vue中声明数据
    • methods:{}
      • methods属性，用于编写Vue中的方法
    • computed:{}
      • 计算属性，根据数据，自动进行计算，经常用于数值计算。
    • 方法和计算属性的区别：- 当计算属性依赖的内容发生变更时，才会重新执行，得到新的结果。-方法是只要页面重新渲染，就会重新计算，得到新的内容
    • watch:{}
      • 属性说明
        • 监听属性，属性变化时，制动执行里边的函数。
        • 可以根据变量的改变，作异步操作和页面样式的改变。
      • 参数说明
        • current
          • 现在参数的值
        • prev
          • 以前参数的值
    • 注意事项
      • computed 和 method 都能实现的功能，建议使用 computed ， 因为有缓存
      • computed 和 watcher 都能实现的功能，建议使用 computed ， 因为更加简洁
  • VUE生命周期函数
    • 声明周期函数指，在某一时刻会自动执行的函数。(声明周期函数也叫钩子函数)
    • 记忆时可以成对进行记忆，也就是分为四组。
    • 1. beforeCreate( )
      • 在初始化 / 实例创建 之前执行的函数
    • 2. Created( )
      • 在初始化 / 实例创建 之后执行的函数
    • 3. beforeMount( )
      • 在组件内容被渲染到页面之前自动执行的函数
      • 注意：此时无法找到任何模板DOM节点
    • 4. Mounted( )
      • 在组件内容被渲染到页面之后自动执行的函数
    • 5. beforeUpdate( )
      • 在数据将要变化之前自动执行的函数
    • 6. updated( )
      • 在数据发生变化之后自动执行的函数
    • 7. beforeUnmount( )
      • 在VUE实例销毁之前自动执行的函数
    • 8. unmounted( )
      • 在VUE实例销毁之后自动执行的函数
  • 常用模板语法
    • 插值表达式{{xxx}}
      • 在模板中输出变量,在插值表达式中是可以写JavaScript表达式的。例如：{{1+2}}，但不能写语句。
    • 基础指令
      • v-html
        • 转义输出变量的HTML标签
      • v-bind
        • 绑定HTML标签中的属性值
      • v-once
        • 读取一次变量值，不随变量 改变而改变
      • v-if
        • 模板中进行判断，根据变量负责DOM的展示与否。
        • 如果v-if的值为false时，将直接移除DOM元素
      • v-show
        • 模板中进行判断，根据变量负责DOM的展示与否。
        • 动过样式进行展示，为false时， display:none
      • v-on
        • 阻止默认行为 - @click.prevent
        • 在模板中绑定事件,例如 v-on:click="handleClick"
        • $event 传递原生事件：handleClick(num,$event)
      • ref
        • ref 是获取Dom 节点 / 组件引用 的一个语法
        • 模板语法：
        • 程序写法：this.$refs.count
    • 指令简写方法
      • v-bind 简写 ：
        • 原写法：
        • 简写法：
        • 动态属性绑定： ，xxx是在data里定义的变量
      • v-on 简写 @
        • 原写法：
        • 简写法：
        • 动态事件绑定： ，xxx是在data里定义的变量
  • 样式绑定语法
    • 用字符串绑定动态样式
      • 方法：在data()方法里，定义一个变量，然后用v-bind在模板中绑定属性
      • 案例; Hello World
    • 用对象绑定动态样式
      • 方法：在data( )里声明一个对象，例如叫classObject。
      • 案例：classObject:{red:true,green:true}
    • 用数组绑定动态样式
      • 方法：在data( )方法里,定义一个数组，数组中有的值，为模板中绑定的样式
      • 案例：classArray:['red','green']
    • 行内样式动态绑定
      • 字符串形式
        • 方法：直接在data( )方法里，声明一个CSS样式的字符串，然后在模板中进行绑定。
        • data( )中编写案例： styleString :'color:yellow'
        • 模板中绑定案例：
      • 对象形式
        • 方法：在data( )方法里，声明一个变量，变量是一个对象。然后在模板中进行绑定。
        • data( )中编写案例：styleObject:{color:'orange'}
        • 模板中绑定案例：
      • 注意事项：建议在工作中使用对象的形式，来编写模板中的行内样式动态绑定。因为这样更加直观，字符串拼接也不容易出错。
  • 列表循环渲染
    • v-for
      • 可以直接在模板中使用v-for来循环打印数组和对象
        • 数组循环案例：v-for="(item,index) in list"
        • 对象循环案例：v-for="(value,key，index) in list"
      • Vue要求循环时在模板中增加key值，避免重复渲染
        • :key="index"
    • 变更数组的方法
      • push( )
        • 从数组尾部添加内容
      • unshift( )
        • 从数组头部添加内容
      • pop( )
        • 从数组末尾删除内容
      • shift( )
        • 从数组头部删除内容
      • sort( )
        • 对数组进行排序
      • reverse( )
        • 对数组进行取反
      • splice（）
        • 从数组中山区具体的内容
    • 特殊用法
      • v-for="item in 10"
        • 从1循环到10
    • 注意事项： 循环和判断不能写在一个标签上，否认是没办法进行判断的。
  • 事件绑定
    • 事件绑定修饰符
      • @click.stop
        • 停止事件冒泡
      • @click.self
        • 停止向下传递
      • @click.prevent
        • 阻止默认行为
      • @click.capture
        • 捕获模式修饰符
      • @click.once
        • 事件只绑定一次
      • @scroll.passive
        • 提升滚动性能
    • 按键绑定修饰符
      • @keydown
        • 按键就可以触发事件
      • @keydown.enter
        • 按下回车键时触发
      • @keydown.tab
        • 按下tab键时触发
      • @keydown.delete
        • 按下删除键时触发
      • @keydown.esc
        • 按下ESC键时触发
      • @keydown.up
        • 按下上键时触发
      • @keydown.down
        • 按下下键时触发
      • ......有很多
    • 鼠标修饰符
      • @click.left
        • 点击鼠标左键触发
      • @click.right
        • 点击鼠标右键触发
      • @click.middle
        • 点击鼠标中键触发
    • 精确修饰符
      • @click.ctrl.exact
        • 按ctrl和鼠标键时才会触发
  • 双向绑定
    • v-modle
      • 双向绑定的最基本用法
    • 修饰符
      • v-model.lazy
        • 当失去焦点时才会触发双向绑定
      • v-model.number
        • 自动转变为number类型
      • v-model.trim
        • 去掉字符串前后的空格
• Vue3.X组件相关语法
  • 基本概念：组件的基本给概念:就是把一个大的功能，拆分成一个个子组件。组件是页面中的一部分。
  • 全局组件
    • 特点：全局组件只要定义，处处可以使用，性能不高，但是使用起来简单。
    • 组件具备复用性，在一个页面里，可以使用多次。
    • 定义方法：app.component('组件名'，{})
  • 局部组件
    • 定义局部组件： const Counter={...}，以变量的形式定义局部组件, 使用时需要进行注册。
    • 局部组件的使用需要进行注册：例如在父组件里：components:{xxx:xxx}
    • PS：为了和普通变量区分，建议首字母进行大写。
  • 父子组件传值
    • 父组件中-属性传值
      • 子组件中-props接收
    • 校验
      • 校验方法：props;{content:String} 校验字符串
      • 可校验类型
        • String
        • Boolean
        • Array
        • Object
        • Function
        • Symbol
      • 非空校验
        • required:true
      • 默认值
        • default: xxx
      • validator方法校验
        • validator:function(value){return value<1000} 参数必须小于1000
  • 单项数据流
    • 基本概念
      • 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据。
    • Non-prop属性
      • 父组件向子组件传值，但子组件并部接受，这种叫做Non-prop属性。这时候的属性会放到子组件最外层的标签上面。
      • inheritAttrs:false
        • 不展示属性
      • v-bind="$attrs"
        • 绑定传递过来的属性
        • <div v-bind="$attrs">xxx</div>
      • this.$attrs
        • 在子组件中用程序的方法获取父组件传递过来的属性
    • this.$emit('jspang','参数')方法
      • 子组件向父组件传递方法，从而改变父组件里的变量
      • <div @jspang="handleXxx" >xxx</div>
    • emits:['aaa','bbb']
      • 如果向父组件传递的方法很多，可以在这里醒目标识出来。
  • slot插槽
    • 概念：在调用子组件时，使用两个标签(例如： ),并在中间插入其它HTML标签的形式。然后在子组件中，使用``接收，这种就叫做插槽。
    • 基础语法：
      • 父组件
      • 子组件
      • 默认值
        • <slott>default value</solt>
    • 具名插槽
      • 概念：一个组件里，可以设置多个插槽，然后在父组件里可以写多个<template>来填充这些插槽
      • 基础语法
        • 父组件
          • 基础写法：<template v-slot:header>
          • 简单写法:<template #header>
        • 子组件
    • 作用域插槽
      • 当子组件的具体标签输出方式，要有父组件决定时，可以使用作用域插槽。
  • 动态组件
    • 概念：根据数据的编号，结合compoent 这个标签，来随时动态切换组件的显示
    • 基础语法：<component :is="xxxx" />
    • 保持状态：<keep-alive></keep-alive>
      • 经常和动态组件一起使用
  • 异步组件
    • 基础语法：Vue.defineAsyncComponent( )
    • ES6异步方法：Promise((resolve,reject)=>{})
    • 概念：是异步执行某些组件的逻辑，这叫做异步组件
• VUE3.x动画和高级语法
  • Mixin 混入
    • 优先级
      • 数据和方法：组件data ，methods 优先级高于mixin data，methods优先级
      • 生命周期：生命周期函数，先执行mixin里面的，再执行组件里的
      • 自定义的属性，组件中的属性优先级高于mixin属性的优先级
    • 局部Mixin
      • mixins:[myMixin] , myMixin是一个自定义组件
    • 全局Mixin
      • app.mixin( )
    • PS：Vue3中尽量避免使用Mixin，因为可以使用CompositionAPI来代替，可维护性更高。
  • directive自定义指令
    • 全局自定义指令
      • 定义方法：app.directive('focus',{mounted(el){el.focus()}})
      • 使用方法：<input v-focus />
    • 局部自定义指令
      • 局部指令需要在父组件注册后才可以使用
    • 生命周期函数
      • directive也是由生命周期的，所以声明周期函数同样起作用。
      • 生命周期函数接受两个参数 绑定形式：v-pos:abc="hello"
        • el：DOM元素
        • binding： 传递的属性值
        • 获取hello方法：binding.value
        • 获取abc方法：binding.tag
  • Teleport传送门
    • 通过传送门，可以把VUE里的标签，直接传送到VUE应用之外的顶层标签里去。比如直接传送到 标签之下。
    • 基本语法：<teleport to="body">......</teleport>
  • Plugin-插件
    • plugin插件，目的是把通用性的功能封装起来。
    • 创建插件固定语法： const myPlugin = { install(app , options){}}
      • app：整个Vue的实例，里边有很多东西
      • options 是传递内容
    • 使用插件写法：app.use(myPlugin,{name:'jspang'})
      • myPlugin：插件名字
      • {name:'jspang'} : 传递的参数
• Composition API
  • Setup函数
    • setup( )函数是在created生命周期函数 被完全初始化之前执行的函数。通过ref( )和reactive( )函数的使用，可以完全替换掉以前的data{}语法形式。
    • 基本语法：setup(props, context){return{name:'jspang'}}
    • Setup()函数特点
      • 特点1：return的内容，在模板中直接可以使用，包括变量和方法
      • 特点2：在setup( )中不能使用this关键字
    • context参数三个关键
      • attrs
      • slots
      • emit
  • 相关函数
    • ref( )函数
      • 作用：把setup函数中不可响应的基础类型数据变成响应数据。
      • 使用前需要先引入：const {ref} = Vue;
      • 基础语法： let name = ref("jspang")
    • reactive( )函数
      • 作用：把setup函数中不可响应的非基础类型数据变成响应数据。
      • 使用前需要先引入：const {reactive} = Vue;
      • 基础语法： const nameObj = reactive({name:'jspang'})
    • readonly( ) 函数
      • 作用：在setup()函数中把一个响应式引用变成只读属性，如果改变就会报错。
      • 使用前需要先引入：const {readonly} = Vue;
    • toRefs( )函数
      • 把响应式数据进行解构返回,在模板中就可以直接使用了。
      • 使用前需要先引入：const {toRefs} = Vue;
      • 基础语法：const { name } = toRefs(nameObj)
    • computed()函数
      • 作用：随着一个变量的变化，而随之变化的方法，也叫计算函数/计算属性
      • 使用前需要先引入： const {computed} = Vue；
      • 基础语法：const countNew=computed(()=>{return count.value +5})
      • 内部方法
        • get:( )=>{}
        • set:( )=>{}
    • watch()函数
      • 作用：对setup函数里某个值的变化进行监听，可以得到变化后的值和变化前的值。但它具备一定的惰性 lazy，也就是第一次不会执行，只有变化时才会执行。
      • 使用前需要先引入： const {watch} = Vue；
      • 基础语法：watch(name,(currentValue,prevValue)=>{console.log(currentValue,prevValue)})
      • 变成立即执行，增加第三个参数。im
    • watchEffect( )函数
      • 和watch( )函数基本一样，但是它是立即执行，没有惰性 immediate。不需要传递侦听内容，自动感知代码依赖。数据有依赖才会执行里边的代码，如果没有依赖，就不会执行。
      • 和Watch( )函数的不同点
        • 1.立即执行，没有惰性 immediate
        • 2.不需要传递侦听内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
        • 3.不能获取之前数据的值
      • 使用前需要先引入： const {watchEffect} = Vue；
      • 基础语法：watchEffect(( )=>{})
    • provide( ) 函数
      • 作用：在setup函数中向子组件或者孙子组件进行传值（可跨层级进行传值）。
      • 使用前需要先引入： const {provide} = Vue；
      • 基础语法：provide('name','jspang')
    • inject( ) 函数
      • 作用：在setup函数中父组件传递过来的值（可跨层级进行接受）。
      • 使用前需要先引入： const {inject} = Vue；
      • 基础语法：provide('name','hello') , hello为传递值，不存在时的默认值
  • setup中的生命周期函数
    • 在使用这些函数前，都需要引入。
    • onBeforeMount( )
      • 在Vue应用被挂载之前，自动执行的函数
    • onMounted( )
      • 在Vue应用挂载完成之后，自动执行的函数
    • onBeforeUpdate( )
      • 在数据发生变化之前，自动执行的函数
    • onUpdated( )
      • 在数据发生变化之后，自动执行的函数
    • onBeforeUnmount( )
      • 在组件销毁之前，自动执行的函数
    • onUnmounted( )
      • 在组件销毁之后，自动执行的函数
    • onRenderTracked( )
      • 在收集响应时依赖时，自动执行的函数
    • onRenderTriggered( )
      • 每次处罚页面渲染被触发时，自动执行的函数
• 配套工具
  • VueCLI 构建工具
    • 删除Vue-cli
      • npm uninstall vue-cli -g
      • yarn global remove vue-cli
    • 安装vue-cli
      • 最新版：npm install -g @vue/cli
      • 固定版： npm install -g @vue/cli@4.5.9
    • 创建项目：vue create demo(项目名称)
    • 启动项目： npm run serve
    • 安装项目依赖： npm install
  • Vue-Router路由
    • 作用：根据URL的不同，展示不同的内容
    • <router-link to="/">Home</router-link> 模板中使用的路由跳转标签
    • <router-view/>标签， 负责展示当前路由对应的组件内容
    • 异步加载路由：component:( ) => import('../xxxx')
  • VueX语法
    • 作用: Vuex数据管理框架，VueX创建了一个全局唯一的仓库，用来存放全局的数据。
    • 声明数据：state:{name:'jspang'}
    • 获取数据：computed:{myName(){return this.$store.state.name;}}
    • 修改数据
      • 步骤1. dispatch方法，派发action，名字叫做change：this.$store.dispatch('change')
      • 步骤2.感知到change，这个action，执行store中actions下面的change方法
        • 编写/store/index.js下actions: change(){console.log('jspang.com')}
        • VueX的store自动感知到你派发出了一个叫做change的action，并执行action方法
      • 步骤3.commit 提交一个叫做change的数据改变
        • 在/store/index下actions里编写:change( ){this.commit('change')}
      • 步骤4：mutation 感知到提交的change改变，执行change方法
        • 在/store/index下muations里编写：change(){console.log('mutation')}
      • 步骤5：在Mutation里修改数据
        • 在/store/index下muations里编写：change(){this.state.name="技术胖"}
    • PS:在mutation里面只允许写同步代码，不允许写异步代码。如果要写异步操作，可以在actions里进行。
  • Vetur：VSCode中的代码提示工具