子定义指令
v-model 原理
视图层和数据层双向通信
视图层输入值改变data数据，data变化会更新视图层展示的内容，从而实现数据双向绑定
自定义指令
vue系统的指令是 v-model 、v-if 等
自定义指令是在dom渲染时对其做的操作，自定义指令让代码更简洁方便维护
使用场景：
- 1、输入框校验（只允许输入字符，数字）
- 2、自动获取焦点
- 3、时间转换等
- 4、金额转换等
指令⽣命周期：
- bind(el, binding, vnode, oldVnode)：只调用一次，在指令初次绑定到元素时调用。
- inserted(el, binding, vnode, oldVnode)：在元素插入到父节点时调用。
- update(el, binding, vnode, oldVnode)：在元素更新时调用，可能会触发多次。
- componentUpdated(el, binding, vnode, oldVnode)：在元素及其子元素更新时调用。
- unbind(el, binding, vnode, oldVnode)：当指令解绑时调用。
使用方式
directive 定义自定义指令
- 参数1：指令名称
- 参数2：选项对象、包含命周期钩子函数
全局注册
在main.js 中定义全局指令
自动获取焦点指令
// 输入框默认选中的指令 Vue.directive('focus',{ inserted(el,binding){ el.focus() } })
局部注册
在当前页面定义指令
绑定颜色的指令
export default { name: 'App', // 自定义指令 directives:{ // 绑定颜色指令 color:{ inserted(el,binding){ console.log('el',el,'binding',binding) el.style.color = binding.value } } }, }
案例
自定义复制指令
我们可以通过自定义指令来实现在网页上文字、图片等的复制功能。例如，我们可以通过自定义指令v-copy，实现点击按钮后自动复制指定DOM区域的内容。
main.js中全局注册
Vue.directive('copy', { bind: function (el, binding) { el.addEventListener('click', function () { var range = document.createRange(); // binding.value 复制区域的元素选择器 range.selectNode(document.querySelector(binding.value)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); alert('已复制成功！'); window.getSelection().removeAllRanges(); }); } });
使用 v-copy指令
<button v-copy=".copy-area">复制</button> <div class="copy-area">需要复制的内容</div>
内置组件
component 动态组件
<component> 可以动态地渲染不同的组件，根据不同的条件，渲染出不同的UI。例如，我们可以根据用户的登录状态，来显示不同的组件：
使用场景
选项卡等效果，根据用户的交互，或者添加判断来动态显示页面内容。
优点省去大量的if eles条件语句。
<component>标签接收一个is属性，用来指定当前需要渲染的组件。
<component v-if="isLogin" :is="LoginComponent"></component> <component v-else :is="LogoutComponent"></component>
过度效果 transition
<transition> 在DOM元素发生变化时添加动画效果，比如淡入淡出、滑动等。
我们可以使用Vue提供的标签，给组件或元素添加进入或离开动画效果。
例如，下面的代码将会让图片慢慢淡入淡出：
name参数： 指定过度名称
<transition name="fade"> <img :src="imgSrc" alt="example"> </transition>
css样式
组件进入和离开时的过度效果
.fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }
自定义过度类名
配置自定义类，让效果更丰富 建议搭配第三方css库 animate.css
- enter-to-class: String，进入时立即应用的class类名。
- enter-active-class: String，进入时过渡过程中要添加的class类名。
- leave-class: String，离开时要添加的class类名。
- leave-to-class: String，离开时立即应用的class类名。
- leave-active-class: String，离开时过渡过程中要添加的class类名。
如下：
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <!-- 过度效果 --> <transition enter-to-class="animated lightSpeedIn" leave-to-class="animated lightSpeedOut"> <component :is="active"></component> </transition>
keep-alive 缓存组件
<keep-alive>可以缓存具有相同组件标签的组件实例，优化应用性能，避免组件频繁地被销毁和重新创建。例如，我们可以使用keep-alive包裹动态组件，让它们保持“活性”，在组件切换时直接复用缓存实例。
<keep-alive> <component :is="currentComponent"></component> </keep-alive>
递归组件
递归组件是在组件内部，自引用的组件，处理具有层次结构的数据，例如树形结构、无限级联菜单等。
使用场景
- 树形结构组件
- 评论组件
- 表单项组件
- 评论组件
示例：象牙山三大恶人家族图
组件内部
<template> <div> <ul v-if="peopleArray.length"> <li v-for="(item,key) in peopleArray" :key="key"> {{item.name}} <xys :peopleArray="item.children"></xys> </li> </ul> </div> </template> <script> export default { name: 'xys', props:{ peopleArray:{ type:Array, default:()=>[] } }, }; </script>
使用递归组件
<template> <div id="app"> <XYS :peopleArray="arrayList"></XYS> </div> </template> <script> import XYS from "@/components/XYS.vue" export default { name: 'App', data() { return { arrayList: [{ title: "谢广坤", children: [{ title: "谢永强", }, { title: "王小蒙", }] }, { title: "刘能", children: [{ title: "刘英", children: [{ title: "赵兰妮" }, { title: "赵兰娜" }] }] }, { title: "赵四", children: [{ title: "赵玉田", }, { title: "刘英", }] }] }; }, components: { XYS } } </script>
