文章正文:
前言
主要根据vue官网文档 完成。对一些平时可能会用到的知识、组件进行收集,为的是对vue的可用性有一个大致的了解。博客中的组件介绍可能只涉及简单用法,完整用法还是以官网为准。
基础
启动过程:
主文件(main.js)是程序的起点,在主文件里挂在容器。如app.mount('#app')。然后系统会去找id为app的页面作为首页。在主文件里可以定义一些全局通用的组件
app.component(
// 注册的名字
'MyComponent',
// 组件的实现
{
/* ... */
}
)
api风格:
选项式:传统的方法、参数使用data、method关键字分隔的方式。
组合式:方法和参数写在一起的方式。官方推荐组合式
参数
组件上的参数名可以动态配置。
< a :[someAttr] ="value" > ... a >
绑定数据data
在声明修改vue绑定值后,更新到DOM里存储的值会以异步的方式执行。
可以通过nextTick 去定义 更新完成后执行的操作。类似的是通过async 、await去让异步执行的接口查询方法同步执行。
this .message = 'Hello World';
this .$nextTick(() => {})
computed
computed方法与普通方法区别是computed方法会有缓存,在内部的计算参数更新后才会执行更新。而方法每次都会更新。
对于computed里的参数方法,不应该去修改其他参数值,以及执行异步操作,应该只用于计算值。
computed方法与普通方法区别是computed方法会有缓存,在内部的计算参数更新后才会执行更新。而方法每次都会更新。
对于computed里的参数方法,不应该去修改其他参数值,以及执行异步操作,应该只用于计算值。
class与style属性
class属性也可以通过参数来绑定
< div
class ="static"
:class ="{ active: isActive, 'text-danger': hasError }"
> div >
data() {
return {
isActive: true,
hasError: false
}
}
等同于
< div class ="static active" > div >
也可以直接传一个对象,对象内属性名与boolean值
自定义组件上定义的class会继承到组件内部
< div :style ="{ color: activeColor, fontSize: fontSize + 'px' }" > div >
父子组件交互
父组件通过@定义方法名,子组件通过this.$emit()调用父类方法
< button @click ="$emit('enlarge-text')" > Enlarge textbutton >
插槽
对于父类组件里定义的内容希望展示在子组件,可以通过slot 标签,会让父类组件中子组件标签内定义的内容 在slot标签位置展示
< AlertBox >
Something bad happened.
AlertBox >
< template >
< div class ="alert-box" >
< strong > This is an Error for Demo Purposesstrong >
< slot />
div >
template >
默认内容 :可以在slot标签内定义内容,作为父组件没有定义内容时的默认展示信息
多组插槽 :使用template标签包住,用#定义插槽名(也可以动态配置:#[dynamicSlotName])。子组件里slot用name接收。
父组件:
< BaseLayout >
< template #header >
< h1 > Here might be a page titleh1 >
template >
< p > A paragraph for the main content.p >
< p > And another one.p >
< template #footer >
< p > Here's some contact infop >
template >
BaseLayout >
子组件:
< div class ="container" >
< header >
< slot name ="header" > slot >
header >
< main >
< slot > slot >
main >
< footer >
< slot name ="footer" > slot >
footer >
div >
最终渲染:
< div class ="container" >
< header >
< h1 > Here might be a page titleh1 >
header >
< main >
< p > A paragraph for the main content.p >
< p > And another one.p >
main >
< footer >
< p > Here's some contact infop >
footer >
div >
其他
prop中的type可以定义成多个可能的类型
引用组件的 v-model 上所添加的修饰符,可以在组件里的prop 通过 modelModifiers 访问到
透传
子组件如果只存在一个根节点(多个根节点不会发生),那么会继承父组件的style、class、监听事件。称为透传。可以通过inheritAttrs: false 来避免透传。透传的参数可以在子组件上通过$attrs访问
依赖注入
如果存在多层组件,且中间组件用不到位于顶端的组件里的方法和参数,那么一层层使用props进行注入就会很麻烦,这时可以通过依赖注入实现。
父组件里使用provide传出:
export default {
provide() {
return {
// 将数据或方法作为键值对传递给子组件
someData: '这是传递给子组件的数据',
someMethod: () => {
console.log( '这是传递给子组件的方法');
}
};
}
};
子组件里使用inject接收:
export default {
inject: [ 'someData', 'someMethod'],
mounted() {
console.log( this .someData); // 输出:"这是传递给子组件的数据"
this .someMethod(); // 输出:"这是传递给子组件的方法"
}
};
异步组件
异步组件指的是某些不需要页面开始就加载的组件可以异步加载,不会阻塞主线程。
使用defineAsyncComponent去定义异步组件
如:
< script >
import { defineAsyncComponent } from ' vue '
export default {
components: {
AdminPage: defineAsyncComponent(() =>
import( ' ./components/AdminPageComponent.vue ' )
)}
}
script >
< template >
< AdminPage />
template >
全局组件 :
app.component('MyComponent', defineAsyncComponent(() =>
import( './components/MyComponent.vue')
))
如果追求其他一些配置,可以 :
const AsyncComp = defineAsyncComponent({
// 要加载的组件
loader: () => import('./Foo.vue'),
// 加载异步组件过程中展示的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间,默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个 timeout 时间限制,并超时了
// 也会显示这里配置的报错组件,默认值是:Infinity
timeout: 3000
})
原生HTML里使用vue注意
html里不分大小写,会统一成小写
需要显性声明闭合标签
某些元素位置位置会被限制。例如 ,, 和 ,相应的,某些元素仅在放置于特定元素中时才会显示,例如 , 和 。
< table >
< blog-post-row > blog-post-row >
table >
不生效,需要写成
< table >
< tr is ="vue:blog-post-row" > tr >
table >
事件的修饰词
如
< button @click.stop ="childClick" > 子元素button >
once 。表示当前事件只会执行一次。执行完成后就会移除。
stop 。表示不会向父类组件触发。如父组件和子组件都设定了点击事件,子类点击事件配置为子元素 。那么点击子类组件就不会触发父类的事件
prevent 。组件当前标签默认的事件执行。如form的submit按钮点击默认会提交事件,而.prevent会阻止表单提交
capture 。修改事件的传播机制。如默认父子组件的相同事件,会先执行子组件事件,再执行父组件事件,在父组件上使用capture,就会先执行父组件事件,再执行子组件事件。
self 。只会在标签本身修饰的信息上操作才会触发。如
< template >
< div @click.self ="divClick" >
点击我!
< button > 不要点击我button >
div >
template >
点击button不会触发divClick事件,在点击”点击我!”才会触发
6、passive 。表示方法会异步执行,不会影响操作默认的动作。如定义一个滚动事件,不希望滚动时不会先执行定义的滚动事件,执行完再继续滚动,而是滚动和事件执行同步进行。
< template >
< div @scroll.passive ="handleScroll" >
div >
template >
< script >
export default {
methods: {
handleScroll() {
// 处理滚动事件的逻辑
}
}
}
script >
绑定参数修饰词
< MyComponent v-model.lazy ="myText" />
lazy。输入内容后不立刻修改绑定值。当用户的input中失去焦点或者用户点击回车按钮时,才会将后台的数据进行修改。
number。默认下系统会将数字转成字符串,number可以转成number类型
trim。默认下会保留空格,trim会去除内容的空格
对于引用组件上自定义参数+修饰词,可以在子组件上的props里通过自定义参数名+”Modifiers” 来获取,而可以通过自定义参数名获取原值。
父组件:
< MyComponent v-model:title.capitalize ="myText" >
子组件:
export default {
props: [ 'title', 'titleModifiers'],
emits: [ 'update:title'],
created() {
console.log( this .titleModifiers) // { capitalize: true }
}
}
逻辑复用
Mixin
单独的参数、方法封装成一个文件,使用Mixin引入使用。
< script >
import { shopMixin } from ' @/store/mixin ' ;
export default {
mixins: [shopMixin],
}
组合式函数
比mixin更易拓展。vue3新特性。
自定义组件
定义一个能实现特定功能的组件。如自动聚焦
组件:
const focus = {
mounted: (el) => el.focus()
}
export default {
directives: {
// 在模板中启用 v-focus
focus
}
}
使用:
也可以全局定义:
const app = createApp({})
// 使 v-focus 在所有组件中都可用
app.directive( 'focus', {
/* ... */
})
自定义插件
对于一些全局使用的方法、组件。可以考虑封装成一个插件。在Vue定义时注册。
动画
Transition
应用于组件变化的动画。
< button @click ="show = !show" > Togglebutton >
< Transition >
< p v-if ="show" > hellop >
Transition >
如果组件本身配置css的动画,那么会兼容
自定义配置Transition不同节点的动画:
1、v-enter-from:进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。
2、v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3、v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。
4、v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。
5、v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6、v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时),在过渡或动画完成之后移除。
可以自定义class名称。
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
如:
< Transition
name ="custom-classes"
enter-active-class ="animate__animated animate__tada"
leave-active-class ="animate__animated animate__bounceOutRight"
>
< p v-if ="show" > hellop >
Transition >
Transition标签只能影响内部直接的子组件 ,如果是存在嵌套关系,可以通过css选择器实现。
如:
< Transition name ="nested" >
< div v-if ="show" class ="outer" >
< div class ="inner" >
Hello
div >
div >
Transition >
/* 延迟嵌套元素的进入以获得交错效果 */
.nested-enter-active .inner {
transition-delay: 0.25s;
}
分类
配置name属性
< Transition name ="fade" >
...
Transition >
对应的css动画节点名称v变成name。如
.v-enter-active 就要变成.fade-enter-active
更多使用见官网...
TransitionGroup
应用于循环组件的动画。
样式和Transition 一致,前缀改成list
< TransitionGroup name ="list" tag ="ul" >
< li v-for ="item in items" :key ="item" >
{{ item }}
li >
TransitionGroup >
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
KeepAlive
使组件保持活跃状态,状态不会被清除
如果想定义一个动态组件,在组件切换为其他类型时,前一个组件实例就会被清除,再次切换回来之前的数据也会被重置。使用KeepAlive可以在切换时也保持之前的数据状态。
< KeepAlive >
< component :is ="activeComponent" />
KeepAlive >
可以通过include 定义需要缓存状态的组件实例名 。实例名用name定义
< KeepAlive include ="a,b" >
< component :is ="view" />
KeepAlive >
< KeepAlive :include ="/a|b/" >
< component :is ="view" />
KeepAlive >
< KeepAlive :include ="['a', 'b']" >
< component :is ="view" />
KeepAlive >
使用max来限制最大缓存实例数
< KeepAlive :max ="10" >
< component :is ="activeComponent" />
KeepAlive >
使用activated 和 deactivated 作为组件的钩子函数。
Teleport
将组件移到制定的元素下面。
< div class ="outer" >
< h3 > Tooltips with Vue 3 Teleporth3 >
< div >
< button @click ="open = true" > Open Modalbutton >
< div v-if ="open" class ="modal" >
< p > Hello from the modal!p >
< button @click ="open = false" > Closebutton >
div >
< style scoped >
.modal {
position : fixed ;
z-index : 999 ;
top : 20% ;
left : 50% ;
width : 300px ;
margin-left : -150px ;
}
style >
如果直接使用,遇到outer下直接的元素进行布局调整就会冲突,影响class=modal的弹窗展示。这种情况可以使用Teleport 标签包裹并制定要转移的标签下面
< Teleport to ="body" >
< div v-if ="open" class ="modal" >
< p > Hello from the modal!p >
< button @click ="open = false" > Closebutton >
div >
Teleport >
相关阅读:
log4j的级别的说明
iOS知识点 ---- 离屏渲染
idea配置Tomcat时没有Artifacts选项
假如我写了几个函数,想将函数像存放数据一样放在数组里,方便调用,怎么做?
【练习】检测U盘并自动复制内容到电脑的软件
数据结构与算法-队列
代码随想录算法训练营第三十七天|738.单调递增的数字 968.监控二叉树 总结
Spring Boot和Spring MVC的区别
Kubernetes 使用 PVC 持久卷后,持久卷内数据丢失问题
知识点汇总
原文地址:https://www.cnblogs.com/mengxinJ/p/17817406.html