Vue入门
2021/10/5 23:14:41
本文主要是介绍Vue入门,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.动态组件
1.1什么是动态组件
动态组件值的是动态切换组件的显示和隐藏
1.2如何实现动态组件
vue提供了一个内置的<compoent>组件,专门用来实现动态组件的渲染
<component :is="comName"></component>
1.3动态切换组件的展示与隐藏
<button @click="comName = 'Left'">展示Left</button> <button @click="comName = 'Right'">展示Right</button>
1.4使用keep-alive保持状态
默认情况下,切换动态组件时无法保持组件的状态,此时可以使用vue内置的<keep-alive>组件保持动态组件的状态
<keep-alive> <component :is="comName"></component> </keep-alive>
inactive组件失活,被缓存
1.5keep-alive对应的声明周期函数
当组件被缓存时,会自动触发组件的deactivated生命周期函数
deactivated() { console.log('组件被缓存了,deactivated') }
当组件被激活时,会自动触发组件的activated生命周期函数
activated() { console.log('组件被激活了,activated') }
1.6keep-alive的include属性和exclude属性
include包含需要被缓存的项
<keep-alive include="Left,Right"> <component :is="comName"></component> </keep-alive>
exclude排除需要被缓存的项
<keep-alive exclude="Left,Right"> <component :is="comName"></component> </keep-alive>
2.插槽
2.1什么是插槽
插槽是vue为组件的封装者提供的能力,允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽
<slot></slot>
2.2v-slot指令
<Left> <!-- 默认情况下,在使用组件的时候,提供的内容都会被填充到名字为default的插槽之中 --> <!-- 1.如果要把内容填写到指定名称的插槽中,需要使用v-slot这个指令 --> <!-- 2.v-slot:后面要跟上插槽的名字 --> <!-- 3.v-slot:指令不能直接用在元素身上,必须用在template标签上 --> <!-- 4.template这个标签,它是一个虚拟的标签,只起到包裹性质的作用,但是,不会被渲染为任何实质性的HTML元素 --> <template v-slot:default> <p>这是在Left组件的内容区域,声明的p标签</p> </template> </Left>
2.3v-slot:简写
可以简写成#
<!-- 5.v-slot:指令的简写形式是# --> <template #default>
2.4插槽的后备内容
封装组件时,可为预留的<slot>插槽提供后备内容,如果组件的使用者没有为插槽提供任何内容,则后备内容会生效
<slot name="default">这是default插槽的默认内容</slot>
2.5具名插槽
如果在封装组件时需要预留多个插槽节点,则需要为每个<slot>插槽指定具体的name名称。这种带有具体名称的插槽叫做"具名插槽"
<!-- 文章的标题 --> <div class="header-box"> <slot name="title"></slot> </div> <!-- 文章的内容 --> <div class="content-box"> <slot name="content"></slot> </div> <!-- 文章的作者 --> <div class="footer-box"> <slot name="author"></slot> </div>
2.6作用域插槽
在封装组件的过程中,可以预留的<slot>插槽绑定props数据,这种带有props数据的<slot>叫做"作用域插槽"
<!-- 在封装组件时,为预留的<slot>提供属性对应的值,这种用法,叫做"作用域插槽" --> <slot name="content" msg="hello vue.js"></slot>
解构赋值
<template #content="{msg,user}">
3.自定义指令
3.1什么是自定义指令
vue官方提供了v-text、v-for、v-model、v-if等常用的指令,初次之外vue还允许开发者自定义指令
3.2自定义指令的分类
vue中的自定义指令分为两种,分别是:
私有自定义属性
全局自定义属性
3.3私有自定义属性
在每个vue组件中,可以在directives节点下声明私有自定义指令
directives:{ //定义名为color的自定义指令 color:{ //当指令第一次被绑定到元素上的时候,会立即触发bind函数 //形参中的el表示当前指令所绑定的那个DOM元素 bind(el){ console.log('触发了v-color的bind函数') el.style.color = 'red' } } }
3.4update函数
bind函数只调用1次:当指令第一次绑定到元素时调用,当DOM更新时bind函数不会被触发。update函数会在每次DOM更新时被调用
//在DOM更新的时候,会触发update函数 update(el,binding){ console.log('触发了v-color的update函数') el.style.color = binding.value }
3.5函数简写形式
如果bind和update函数中的逻辑完全相同,则对象格式的自定义指令可以简写成函数格式
color(el,binding){ el.style.color = binding.value }
3.6全局自定义属性
全局共享的自定义指令需要通过"Vue.directive()"进行声明
Vue.directive('color',function(el,binding){ el.style.color = binding.value })
4.eslint
可组装的JavaScript和JSX检查工具
4.1rules规则
no-console在发布时候禁用console语句,在开发阶段不禁用
no-debugger在发布时候禁用debugger语句,在开发阶段不禁用
4.2ESLint语法规则
no-multiple-empty-lines禁止出现空行
eol-last要求或禁止文件末尾存在空行
no-trailing-spaces不允许有多余的空格
等,具体语法规则请看官网详情
这篇关于Vue入门的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略