vue -TransitionGroup、KeepAlive、Teleport、(常用)组合式API与选项式API、vue-cli脚手架搭建项目

美少女战士进攻前端
88 阅读3分钟

内置组件

TransitionGroup

注意：在 html 中使用烤串命名法调用

<transition-group enter-active-class="animate__animated animate__rotateInDownLeft" > 
<div class="box" v-for="item in arr" :key="item">
{{ item }}
</div> 
</transition-group>

动态组件及 KeepAlive

1.动态渲染组件

<component :is="组件名称"></component>

2.KeepAlive 保持激活

<keep-alive> 
<component :is="compName"></component> 
</keep-alive>

Teleport 传送门

默认情况下，在哪里调用组件，组件 DOM 结构就在哪里渲染 传送门 Teleport 可以将组件 DOM 节点传送并渲染到 to 所指定的标签内 应用场景：封装的遮罩弹窗效果，需要在最外层覆盖所有其他元素的时候，可以使用 Teleport

pp.component("my-comp", {
template: `<Teleport to="body">
<div class="modal">这是一个组件</div> 
</Teleport>`, });

特殊 Attributes

Vue 内置提供的

1.ref 属性

标记 DOM 或组件，让$refs 可以找到被标记的 DOM 或组件

<h1 ref="myH1"></h1>

2.key属性

标志DOM元素的唯一性

<div v-for="item in xxx" :key="具备唯一性的id"></div>

3.is属性

动态组件中.指定被渲染的组件名称

<component :is="组件名称"></component>

特殊元素

Vue内置提供

1.template

模板,包裹一些DOM节点,统一提供使用 插槽

<template #插槽名称></template> 
<template v-slot:插槽名称></template>

2.slot

标志组件内的插槽位置

3.component

动态渲染组件

选项式 API 与组合式 API

1.公司对于vue技能的要求

  • vue2 跟 vue3 都要会

2.vue2和vue3的区别

  • vue3是向后兼容的(选项式API,组合式API)
  • vue2只支持选项式API

3.选项式API

  • vue2面向对象
new vue({
el:'#app',
data(){
 return{}
},
computed:{},
component:{},
watch:{},
create(){},
methods:{},
directives:{},
})
  • vue3函数式编程
vue.createApp({
 data(){
    return{}
  },
  computed:{},
  component:{},
  methods:{},
  create(){},
  watch:{},
  directives:{}
    
})

4.逻辑关注点

代码逻辑，我们需要通过很多代码逻辑来实现组件交互 选项式 API，逻辑关注点没办法完全分离

  • 响应式数据必须写在data中
  • 函数方法必须在methods中

##常用组合式API

API语法太多了掌握选项式API的前提下,了解如何用组合式API作为代替企业用人需求,要求两种类型的API都要会

1.选项式API对应的组合式API

所有的组合式API需要写在setup区域

data(){} 对标的 Vue.ref() Vue.reactive()-针对对象     
computed:{} 对标的 Vue.computed()
methods:{} 对标的 const handleXXX = ()=>{}
mounted(){} 对标的 onMounted(()=>{}) 取消了create系列生命周期
watch:{} 对标的组合式 watch('被检测的数据',()=>{回调函数})
directives:{'focus':{}} 挂载局部指令 const vFocus = {mounted(){}}
components:{} 对标的组合式 直接引入使用，免注册

2.ref()和reactive(实现响应式)

  • ref处理响应式
    • ref()可以将基本类型处理为响应式let num=Vue.ref(100)
    • ref()可以将对象处理为响应式
  • reactive处理响应式
    • reactive()只能将对象处理为响应式 let state=Vue.ractive({num:100})
  • 实现原理
    • ref()是通过数据劫持(Objective.defineProperty)实现响应式能力
    • ractive()是通过数据代理处理(Poxy)实现的响应式能力
  • 操作手段的不同
    • ref()的操作需要xxx.value
    • reactive()是直接操作 3.computed方法
const reMsg = Vue.computed(()=>{})

4.生命周期的差异

  • 组合式API特有setup
  • 组合式API没有created,beforeCreate
  • 组合式API生命周期的命名特点:onMounted,onUpdated...

5.watch监听

Vue.watch(msg, () => { console.log("检测到了msg的变化"); });

@vue/cli 脚手架

工地：修楼房的时候，工人活动的铁架子（脚手架） 工程化开发、模块化、组件化 文档 Nodejs 版本 v16.18.10. 切换淘宝镜像

npm config set registry https://registry.npm.taobao.org

1.全局安装

可以使用 vscode 内置终端、可以使用 cmd 终端、或使用 powershell

npm i @vue/cli -g 全局安装 vue -V 查看脚手架版本号

2.使用脚手架提供的命令创建 vue 项目

vue create 项目名称 例如 vue create my-app 此处不要疯狂回车，因为还需要做后续配置

3.按需选择项目依赖

根据视频选择

  1. 启动项目进行预览开发
cd my-app 进入项目目录终端 npm run serve 启动项目

认识 Vue 工程化目录

  • node_modules 项目依赖文件夹
  • public 项目启动后所浏览的 html 页面，是以内部 index.html 为模板生成的
  • src 项目业务代码
  • assets 静态资源文件夹（img、css）
  • components 公共组件
  • App.vue 根组件
  • main.js 项目入口文件
  • .gitignore 可以让 git 忽略某些文件、文件夹
  • package.json 项目相关信息的记录文件（基本信息、命令、依赖）
avatar
文章
阅读
粉丝