同学录网站开发的背景,域名注册网站免费,食用油 网站 模板,上海seo方案目录
4.1 动态组件
4.1.1 定义动态组件 4.1.2 利用KeepAlive组件实现组件缓存
4.1.3 组件缓存相关的生命周期函数
4.1.4 KeepAlive组件的常用属性 4.2 插槽
4.2.1 什么是插槽
编辑 4.2.2 具名插槽
4.2.3 作用域插槽
4.3 自定义指令
4.3.1 什么是自定义指令…目录
4.1 动态组件
4.1.1 定义动态组件 4.1.2 利用KeepAlive组件实现组件缓存
4.1.3 组件缓存相关的生命周期函数
4.1.4 KeepAlive组件的常用属性 4.2 插槽
4.2.1 什么是插槽
编辑 4.2.2 具名插槽
4.2.3 作用域插槽
4.3 自定义指令
4.3.1 什么是自定义指令
4.3.2 私有自定义指令的声明与使用
4.3.3 全局自定义指令的声明与使用
4.3.4 为自定义指令绑定参数
编辑 4.3.5 自定义指令的函数形式
4.4 引用静态资源 学习目标 掌握具名插槽的使用方法能够通过name属性定义具名插槽
掌握私有自定义指令的使用方法能够独立完成私有自定义指令的声明和使用 掌握为自定义指令绑定参数的使用方法能够通过等号的方式为当前 指令绑定参数
掌握自定义指令的函数形式能够使用函数形式简化自定义指令的声明等等
4.1 动态组件
4.1.1 定义动态组件
利用动态组件可以动态切换页面中显示的组件。使用component标签可以定义动态组件语法格式如下。
component is要渲染的组件/component上述语法格式中component标签必须配合is属性一起使用is属性的属性值表示要渲染的组件当该属性值发生变化时页面中渲染的组件也会发生变化。
is属性的属性值可以是字符串或组件当属性值为组件时如果要实现组件的切换需要调用shallowRef()函数定义响应式数据将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应它比ref()函数更适合于将组件保存为响应式数据。
代码如下
创建Myleft.vue文件
templateMyleft组件divcount的值{{值}}button clickcount11/button
/div
/template
script setupimport {onMounted,onUnmounted,onActivated,onDeactivated,ref} from vueconst count ref(0);onMounted((){console.log(Myleft组件被挂载成功)})onUnmounted((){console.log(Myleft组件被销毁成功)})onActivated((){console.log(MyRight组件被缓存了)})onDeactivated((){console.log(MyRight组件被缓存了)})/scriptstyle
/style
创建Myright.vue文件
templateMyright组件
/templatescript
/scriptstyle
/style
创建DynamicComponet.vue文件
templatebutton clickshowComponentMyleft展示MyLeft组件/buttonbutton clickshowComponentMyright展示MyRight组件/buttonKeepAlivediv component :isshowComponent/component/div/KeepAlive
/templatescript setupimport {shallowRef} from vueimport Myleft from./Myleft.vue import Myright from ./Myright.vueconst showComponent shallowRef(Myleft)
/scriptstyle
/style
修改main.js文件
import { createApp } from vue
import App from ./components/DynamicComponet.vue
const appcreateApp(App)
//import GlobalComponent from ./components/GlobalComponent.vue
// app.component(GlobalComponent, GlobalComponent)
app.mount(#app)
运行结果 4.1.2 利用KeepAlive组件实现组件缓存
概念使用动态组件实现组件之间的按需切换时隐藏的组件会被销毁展示出来的组件会被重新创建。因此当一个组件被销毁后又重新创建时组件无法保持销毁前的状态。
如果在多个组件之间进行动态切换时想要保持这些组件的状态以及避免重复渲染导致的性能问题可以通过组件缓存来实现。
组件缓存可以使组件创建一次后不会被销毁。在Vue中可以通过KeepAlive组件来实现组件缓存。 KeepAlive组件可通过KeepAlive标签来定义定义时使用KeepAlive标签包裹需要被缓存的组件。运行结果 从单击“展示MyRight组件”按钮后的页面效果和控制台可以看出控制台中没有输出“MyLeft组件被销毁了”的信息说明此时MyLeft组件已经被缓存了。 再次单击“展示MyLeft组件”按钮页面效果与步骤1中单击“1”按钮后的页面效果相同说明通过添加KeepAlive标签可以实现组件缓存。
4.1.3 组件缓存相关的生命周期函数
概念在Vue开发中有时需要在组件被激活或者被缓存时执行某些操作。为此Vue提供了组件缓存相关的生命周期函数可以监听组件被激活和组件被缓存的事件。
当组件被激活时会触发组件的onActivated()生命周期函数当组件被缓存时会触发组件的onDeactivated()生命周期函数。这两个生命周期函数的语法格式如下。
// onActivated()生命周期函数
onActivated(() { })
// onDeactivated()生命周期函数
onDeactivated(() { })MyLeft.vue文件新增代码
script setup
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from vue
onActivated(() {console.log(MyLeft组件被激活了)
})
onDeactivated(() {console.log(MyLeft组件被缓存了)
})
/scriptMyRight.vue文件新增代码
script setup
import { onActivated, onDeactivated } from vue
onActivated(() {console.log(MyRight组件被激活了)
})
onDeactivated(() {console.log(MyRight组件被缓存了)
})
/script运行结果 单击“展示MyRight组件”按钮后的页面效果和控制台如下图所示。 单击“展示MyLeft组件”按钮后的页面效果和控制台如下图所示。 4.1.4 KeepAlive组件的常用属性
概念在默认情况下所有被KeepAlive标签包裹的组件都会被缓存。如果想要实现特定组件被缓存或者特定组件不被缓存的效果可以通过KeepAlive组件的常用属性include、exclude属性来实现。 KeepAlive组件的常用属性如下表所示。 在KeepAlive标签中使用include属性和exclude属性时多个组件名之间使用英文逗号分隔以include属性为例语法格式如下。
KeepAlive include组件名1, 组件名2被缓存的组件
/KeepAlive4.2 插槽
4.2.1 什么是插槽
概念Vue为组件的封装者提供了插槽slot插槽是指开发者在封装组件时不确定的、希望由组件的使用者指定的部分。也就是说插槽是组件封装期间为组件的使用者预留的占位符允许组件的使用者在组件内展示特定的内容。通过插槽可以使组件更灵活、更具有可复用性。
插槽需要定义后才能使用下面对定义插槽和使用插槽分别进行讲解。
1. 定义插槽
在封装组件时可以通过slot标签定义插槽从而在组件中预留占位符。假设项目中有一个MyButton组件在MyButton组件中定义插槽的示例代码如下。
templatebuttonslot/slot/button
/template在slot标签内可以添加一些内容作为插槽的默认内容。如果组件的使用者没有为插槽提供任何内容则默认内容生效如果组件的使用者为插槽提供了插槽内容则该插槽内容会取代默认内容。 另外如果一个组件没有预留任何插槽则组件的使用者提供的任何插槽内容都会不起作用。
2. 使用插槽
概念使用插槽即在父组件中使用子组件的插槽在使用时需要将子组件写成双标签的形式在双标签内提供插槽内容。例如使用MyButton组件的插槽的示例代码如下。 因为插槽内容是在父组件模板中定义的所以在插槽内容中可以访问到父组件的数据。插槽内容可以是任意合法的模板内容不局限于文本。例如可以使用多个元素或者组件作为插槽内容示例代码如下。
MyButtonspan stylecolor: yellow;按钮/spanMyLeft /
/MyButton创建src\components\SlotSubComponent.vue文件用于展示子组件的相关内容。
templatediv测试插槽的组件/divslot/slot
/template创建src\components\MySlot.vue文件用于展示插槽的相关内容。
template父组件-----{{ message }}hrSlotSubComponentp{{ message }}/p/SlotSubComponent
/template
script setup
import SlotSubComponent from ./SlotSubComponent.vue
const message 这是组件的使用者自定义的内容
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/MySlot.vue运行结果 演示插槽的默认内容 演示插槽的默认内容实现当组件的使用者没有自定义内容时默认内容生效的效果。 注释MySlot组件中插槽内容。
!-- p{{ message }}/p --在SlotSubComponent组件中为slot标签提供默认内容。
slotp这是默认内容/p
/slot运行结果 将MySlot组件中的插槽内容取消注释保存上述代码后页面效果如下图所示。 4.2.2 具名插槽
概念在Vue中当需要定义多个插槽时可以通过具名插槽来区分不同的插槽。具名插槽是给每一个插槽定义一个名称这样就可以在对应名称的插槽中提供对应的数据了。
插槽通过slot标签来定义slot标签有一个name属性用于给各个插槽分配唯一的名称以确定每一处要渲染的内容。添加name属性的slot标签可用来定义具名插槽。 定义具名插槽的语法格式如下。
slot name插槽名称/slot在父组件中如果要把内容填充到指定名称的插槽中可以通过一个包含v-slot指令的template标签来实现语法格式如下。
组件名template v-slot:插槽名称/template
/组件名与v-on和v-bind类似v-slot也有简写形式即把v-slot:替换为#。例如v-slot:title可以简写为#title。
演示具名插槽的使用
创建src\components\ArticleInfo.vue文件用于展示文章内容模板。
templatediv classarticle-containerdiv classheader-boxslot nameheader/slot/divdiv classcontent-boxslot namecontent/slot/divdiv classfooter-boxslot namefooter/slot/div/div
/template
style
.article-container div { border: 1px solid black; }
/style创建src\components\MyArticle.vue文件用于提供文章数据在MyArticle组件中导入并使用ArticleInfo组件并在ArticleInfo标签中为不同插槽添加不同的信息。
templateArticleInfotemplate v-slot:headerp这是文章的头部区域/p/templatetemplate v-slot:contentp这是文章的内容区域/p/templatetemplate #footerp这是文章的尾部区域/p/template/ArticleInfo
/template
script setupimport ArticleInfo from ./ArticleInfo.vue /script修改src\main.js文件切换页面中显示的组件。
import App from ./components/MyArticle.vue运行结果 4.2.3 作用域插槽
概念一般情况下在父组件中不能使用子组件中定义的数据。如果想要在父组件中使用子组件中定义的数据则需要通过作用域插槽来实现。作用域插槽是带有数据的插槽子组件提供一部分数据给插槽父组件接收子组件的数据进行页面渲染。
作用域插槽的使用分为定义数据和接收数据两个部分。
1. 定义数据
在封装组件的过程中可以为预留的插槽定义数据供父组件接收并使用子组件中的数据。在作用域插槽中可以将数据以类似传递props属性的形式添加到slot标签上。 例如在封装MyHeader组件时在插槽中定义数据供父组件使用示例代码如下。
slot messageHello Vue.js/slot2. 接收数据
使用默认插槽和具名插槽接收数据的方式不同接下来分别进行讲解。
下面讲解默认插槽
在Vue中每个插槽都有name属性表示插槽的名称。在定义插槽时虽然省略了slot标签的name属性但是name属性默认为default这样的插槽属于默认插槽。
在父组件中可以通过v-slot指令接收插槽中定义的数据即接收作用域插槽对外提供的数据。通过v-slot指令接收到的数据可以在插槽内通过Mustache语法进行访问。 例如在父组件中使用MyHeader组件中的插槽时通过v-slot指令的值接收传递的数据的示例代码如下。 作用域插槽对外提供的数据对象可以使用解构赋值以简化数据的接收过程示例代码如下。 下面讲解具名插槽 在Vue中通过slot标签添加name属性来定义具名插槽在具名插槽中也可以向父组件中传递数据。 例如在封装MyHeader组件时向具名插槽中传入数据的语法格式如下。
slot nameheader messagehello/slot具名插槽和作用域插槽可以作用在同一个slot标签上且并不冲突。slot标签的name属性不会作为数据传递给插槽所以最终传递给组件的数据只有message属性。
在使用具名插槽时插槽属性可以作为v-slot的值被访问到基本语法格式为“v-slot:插槽名称形参”简写形式为“#插槽名称形参”使用简写形式使用插槽的示例代码如下。
MyHeadertemplate #header{ message }{{ message }}/template
/MyHeader如果在一个组件中同时定义了默认插槽和具名插槽并且它们均需要为父组件提供数据这时就需要为默认插槽使用显式的template标签来接收数据示例代码如下。
MyHeadertemplate #default{ message }{{ message }}/template
/MyHeader演示作用域插槽的使用
创建src\components\SubScopeSlot.vue文件用于展示作用域插槽。
templateslot messageHello 默认插槽/slothrslot messageHello Vue.js nameheader/slothrslot :useruser namecontent/slot
/template
script setup
import { reactive } from vue
const user reactive({ name: xiaoyuan, age: 15 })
/script创建src\components\ScopeSlot.vue文件用于为作用域插槽提供数据。
templateSubScopeSlottemplate v-slot:defaultscopep{{ scope }}/p/templatetemplate v-slot:headerscopep{{ scope }}/pp{{ scope.message }}/p/templatetemplate #content{ user }p{{ user.name }}/pp{{ user.age }}/p/template/SubScopeSlot
/template
script setupimport SubScopeSlot from ./SubScopeSlot.vue/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/ScopeSlot.vue运行结果 4.3 自定义指令
4.3.1 什么是自定义指令
当内置指令不能满足开发需求时可以通过自定义指令来拓展额外的功能。自定义指令的主要作用是方便开发者通过直接操作DOM元素来实现业务逻辑。
Vue中的自定义指令分为两类分别是私有自定义指令和全局自定义指令。 私有自定义指令是指在组件内部定义的指令。私有自定义指令可以在定义该指令的组件内部使用。例如在组件A中自定义了指令只能在组件A中使用组件B、组件C中不能使用。 全局自定义指令是指在全局定义的指令。全局自定义指令可以在全局使用例如在src\main.js文件中定义了全局自定义指令这个指令可以用于任何一个组件。
一个自定义指令由一个包含自定义指令生命周期函数的参数来定义。常用的自定义指令生命周期函数如下表所示。 常用的自定义指令生命周期函数的参数如下表所示。 binding中包含以下6个常用属性。
value传递给指令的值。
arg传递给指令的参数。
oldValue之前的值仅在beforeUpdate()函数和updated()函数中可用无论值是否更改都可用。 modifiers一个包含修饰符的对象 (如果有)。例如在v-my-directive.foo.bar 中修饰符对象是{ foo: true, bar: true }。
instance使用该指令的组件实例。 dir指令的定义对象。
4.3.2 私有自定义指令的声明与使用
如果没有使用setup语法糖可以在directives属性中声明私有自定义指令。例如声明一个私有自定义指令color示例代码如下。
export default {directives: {color: {}}
}在上述代码中color为自定义指令的名称指令名称可以自定义。名称为color的指令指向一个配置对象对象中可以包含自定义指令的生命周期函数可通过这些函数来操作DOM元素。
在使用自定义指令时需要以“v-”开头示例代码如下。
h1 v-color标题/h1如果使用setup语法糖任何以“v”开头的驼峰式命名的变量都可以被用作一个自定义指令示例代码如下。
templatespan v-color/span
/template
script setup
const vColor { }
/script驼峰式命名驼峰式命名规则是一种在编程中广泛使用的命名约定。它有两种主要形式
小驼峰式命名法这种命名方式中第一个单词的首字母小写从第二个单词开始每个单词的首字母都大写。例如“firstName”和“lastName”。
大驼峰式命名法在这种命名法中每个单词的首字母都大写而第一个单词的首字母小写。例如“FirstName”、“LastName”和“CamelCase”。大驼峰式也被称为Pascal命名法这种命名法常用于类名和常量名。
演示私有自定义指令的使用方法
创建src\components\DirectiveComponent.vue文件。
templatep v-fontSizeDirectiveComponent组件/p
/template
script setup
const vFontSize {}
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/DirectiveComponent.vue修改DirectiveComponent组件添加mounted()函数实现元素挂载完成后文本字号的改变。
const vFontSize {mounted: el {el.style.fontSize 24px}
}运行结果 4.3.3 全局自定义指令的声明与使用
全局自定义指令需要通过Vue应用实例的directive()方法进行声明语法格式如下。
directive(自定义指令名称, 对象)在上述语法格式中directive()方法的第1个参数类型为字符串表示全局自定义指令的名称第2个参数类型为对象或者函数可以是对象或者函数形式用于接收指令的参数值。
下面演示全局自定义指令的使用方式。 修改src\main.js文件声明全局自定义指令fontSize。
import { createApp } from vue
import ./style.css
import App from ./components/DirectiveComponent.vue
const app createApp(App)
app.directive(fontSize, {mounted: el {el.style.fontSize 24px}
})
app.mount(#app)4.3.4 为自定义指令绑定参数
在使用自定义指令时开发人员可以通过自定义指令的参数改变元素的状态传递的参数由自定义指令的生命周期函数的第2个参数接收。 在标签中使用自定义指令时通过等号的方式可以为当前指令绑定参数示例代码如下。
h1 v-colorcolor/h1如果指令需要多个值可以传递一个对象示例代码如下。
div v-demo{ color: red, text: hello }/div演示自定义指令参数的使用方法
创建src\components\CustomDirective.vue文件。
templatep v-fontSizefontSizeDirectiveComponent组件/pbutton click“fontSize ‘24px’”更改字号大小/button
/template
script setup
import { ref } from vue
const fontSize ref(12px)
const vFontSize {mounted: (el, binding) { el.style.fontSize binding.value },
}
/script修改src\main.js文件切换页面中显示的组件。
运行结果 演示自定义指令参数的使用方法
在自定义指令fontSize中添加updated()函数实现自定义指令绑定的参数改变时页面进行同步更改。
const vFontSize {// 原有代码……updated: (el, binding) {el.style.fontSize binding.value}
}运行结果 4.3.4 为自定义指令绑定参数
在使用自定义指令时开发人员可以通过自定义指令的参数改变元素的状态传递的参数由自定义指令的生命周期函数的第2个参数接收。
在标签中使用自定义指令时通过等号的方式可以为当前指令绑定参数示例代码如下。h1 v-colorcolor/h1如果指令需要多个值可以传递一个对象示例代码如下。
div v-demo{ color: red, text: hello }/div演示自定义指令参数的使用方法
创建src\components\CustomDirective.vue文件。
templatep v-fontSizefontSizeDirectiveComponent组件/pbutton click“fontSize ‘24px’”更改字号大小/button
/template
script setup
import { ref } from vue
const fontSize ref(12px)
const vFontSize {mounted: (el, binding) { el.style.fontSize binding.value },
}
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/CustomDirective.vue运行效果 演示自定义指令参数的使用方法
在自定义指令fontSize中添加updated()函数实现自定义指令绑定的参数改变时页面进行同步更改。
const vFontSize {// 原有代码……updated: (el, binding) {el.style.fontSize binding.value}
}运行结果
单击“更改字号大小”按钮后的页面效果如下图所示。 4.3.5 自定义指令的函数形式
对于自定义指令来说通常仅需要在mounted()函数和updated()函数中操作DOM元素除此之外不需要其他的生命周期函数。
例如4.3.4小节CustomDirective 组件中的mounted()函数和updated()函数中的代码完全相同。此时可以将自定义指令简写为函数形式。 将私有自定义指令简写为函数形式的示例代码如下。
const vFontSize (el, binding) {el.style.fontSize binding.value
}将全局自定义指令简写成函数形式的示例代码如下。
app.directive(fontSize, (el, binding) {el.style.fontSize binding.value
})4.4 引用静态资源
1. 引用public目录中的静态资源
public目录用于存放不可编译的静态资源文件该目录下的文件会被复制到打包目录该目录下的文件需要使用绝对路径访问。 例如在组件中引用public目录中的demo.png文件示例代码如下。
img src/demo.png 演示引用public目录中静态资源的方法
创建src\components\Image.vue文件。
templateimg src/vite.svg
/template修改src\main.js文件切换页面中显示的组件示例代码如下。
import App from ./components/Image.vue运行效果 2. 引用src\assets目录中的静态资源
src\assets目录用于存放可编译的静态资源文件例如图片、样式文件等。该目录下的文件需要使用相对路径访问。
在引用src\assets目录中的图片时首先将图片保存到本地然后使用import语法将图片导入需要的组件最后通过img元素的src属性添加图片的路径。
演示引用src\assets中静态资源的方法
创建src\components\Icon.vue文件。
templateimg :srcicon
/template
script setup
import icon from ../assets/vue.svg
/script修改src\main.js文件切换页面中显示的组件示例代码如下。
import App from ./components/Icon.vue运行效果 今天就分享到此感谢预览~
