0-8 Vue进阶属性（directives、mixins、extends）

1.Directives 指令

内置指令
v-if、v-for、v-show、v-html等
自定义指令
自己造出 v-x，点击即出现一个x

1.1 自定义指令

一、声明一个全局指令
Vue.directive('x',directiveOptions)
就可以在任何组件里使用 v-x
<img v-x alt="Vue logo" src="./assets/logo.png" width="25%">

// 注册一个全局自定义指令 `v-x`
Vue.directive('x', {inserted: function (el) {//当 img 标签中使用 v-x 的时候，点击标签打出 xel.addEventListener('click',()=>{console.log(x)})}
})

二、声明一个局部指令
v-x只能用在该组件中

<template><h1 v-x>你好</h1>
</template><script>
export default {...,directives: {x: {inserted(el) {el.addEventListener("click", () => { console.log("x") });}}}
}
</scrpt>

1.2 directiveOptions 里有哪些属性

五个函数属性（一般使用125）
1.bind(el,info,vnode,oldVnode)——类似created
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2.inserted(el,info,vnode,oldVnode)——类似mounted
被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
——当 v-x 写入标签的时候调用函数
3.update(el,info,vnode,oldVnode)
所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
4.componentUpdated(el,info,vnode,oldVnode)
指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5.unbind(el,info,vnode,oldVnode)——类似 destoryed
只调用一次，指令与元素解绑时调用。
接收的参数（都是Vue传过来的，一般只用前两个）
1.el：所绑定的元素，v-x放到哪个元素上
2.info对象：除了元素还传了很多东西，详细信息，基本上需要的信息都在这个参数里
3.vnode：元素对应的虚拟节点
4.oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
举例

new Vue({directives: {on2: {inserted(el, info) {//v-on2 写入标签的时候调用//el是写入的元素，info包含所有信息，arg是用户输入 : 后的内容，value是值el.addEventListener(info.arg, info.value);},unbind(el, info) {//随着元素的消亡，remove 监听el.removeEventListener(info.arg, info.value);}}},template: `<button v-on2:click="hi">点我</button>`,methods: {hi() {console.log("hi");}}}).$mount("#app");

1.3 指令的作用

主要用于 DOM 操作
1.Vue实例/组件（也就是 new Vue）用于数据绑定、事件监听、DOM更新
2.Vue指令主要目的就是原生DOM操作
——对DOM的操作也就是获取元素，然后对其进行操作，v-x也可以获取元素，然后对元素进行操作，并且更加简单，写到哪个元素上就相当于获取了哪个元素
减少重复
1.减少某个经常使用的DOM操作，就可以封装为指令
2.如果某个DOM操作比较复杂，也可以封装为指令

2.mixins 混入

混入就是复制
目的：减少重复
1.directives 的作用是减少DOM操作的重复
2.mixins 的作用是减少构造选项（data、methods、钩子）的重复

2.1 例子

假设要在每个组件上添加 name 和 time
1.name是记录名字，time是记录时间
在 created 、beforeDestory时打出提示，并且报出存活时间
一共五个组件怎么做？
方法一：给每个组件添加data和钩子，一共五次
方法二：使用 mixins 减少重复
思路：
重复多次的代码就放到同一个文件中，然后调用它

2.2 步骤

新建一个log.js文件，把重复的代码放进一个对象

const log = {//组件1中的代码data() {return {name: undefined,time: undefined};},created() {if(!this.name){throw new Error("need name")}this.time = new Date();console.log(`${this.name}出生了`);},beforeDestory(){const now = new Date();console.log(`${this.name}死亡了，共生存了${now - this.time}`);}
};export default log;

在Child1.vue中引入log
mixins:[log]：把log里面的data、created、beforeDestory复制到这里

<script>
import log from './mixins/log.js'
export default {data(){return {name:"Child1"}},//相当于把log.js的内容复制过来mixins:[log]
}
</script>

注意：虽然log检查 name 是在log.js文件，但mixins将其复制过来之后，就可以检查当前文件的name
智能合并：
也就是复制过来的属性（如name）和原始的属性（name）会智能合并，会自主分析以哪个为主，不用重新

3.extends 继承

目的：减少重复
和 mixins 一样，也是复制，不过是另一种写法
mixins：在需要操作的组件引入log然后mixins:[log]
步骤
1.创建一个MyVue.js文件
2.继承Vue
3.MyVuej就是Vue的扩展
4.在Child1中继承

import Vue from "vue"
const MyVue = Vue.extend({重复代码
})
export default MyVue

<script>
import MyVue from './MyVue.js'
export default {extends: MyVue,//只有一个就不需要用数组data(){return {name:"Child1"}},
}
</script>

extends是比mixins更抽象的封装

0-8 Vue进阶属性（directives、mixins、extends）相关推荐

vue中button如何改变文字的大小_Vue进阶属性
一.Directives 指令两种写法: 1.声明一个全局指令 Vue.directive('x', directiveOptions) 就可以在任何组件里使用v-x了例如:声明一个全局指令在A ...
Vue进阶（幺陆零）：el-table之show-overflow-tooltip 属性不生效
问题描述在使用el-table表格时,有时会用到show-overflow-tooltip属性,即当单元格内容不能完全显示时显示tooltip文字提示,并且单元格里的内容显示省略号.但是在ie浏览器 ...
Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性
文章目录一.混合(Mixins) 1.1 Sass混合 1.2 LESS混合 1.3 Stylus混合二.嵌套(Nesting) 三.继承(Inheritance) 3.1 Sass和Stylus ...
div滚动到指定位置 vue_【Vue 进阶】从 slot 到无渲染组件
什么是插槽插槽(slot)通俗的理解就是"占坑",在组件模板中占有位置,当使用该组件的时候,可以指定各个坑的内容.也就是我们常说的内容分发值得一提的是,插槽这个概念并不是 Vu ...
Vue 进阶系列（一）之响应式原理及实现
Vue进阶系列汇总如下,欢迎阅读. Vue 进阶系列(一)之响应式原理及实现 Vue 进阶系列(二)之插件原理及实现 Vue 进阶系列(三)之Render函数原理及实现什么是响应式Reactivit ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...
Vue进阶（幺柒零）：前端用户体验提升（四）应用 rem/em 实现字体自适应
文章目录一.前言二.em 继承的例子三.实际应用 3.1 使用 em 单位 3.2 通常不使用 em 单位控制字体大小四.使用 rem 单位五.小贴士 5.1 始终使用 rem 单位做媒体查 ...
Vue进阶（幺贰柒）：插槽详解
文章目录一.概述二.使用步骤三.何时使用插槽? 四.如何使用插槽? 五.拓展阅读一.概述插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置na ...
Vue进阶（贰零柒）：Webpack 性能优化措施汇总
文章目录一.前言二.优化方案 2.1 优化 Loader 2.2 DllPlugin 2.3 代码压缩 2.4 一些小的优化点 2.5 减少 Webpack 打包后的文件体积 2.5.1 按需加载 ...

0-8 Vue进阶属性（directives、mixins、extends）

0-8 Vue进阶属性（directives、mixins、extends）相关推荐

最新文章

热门文章