共计 5461 个字符，预计需要花费 14 分钟才能阅读完成。
混入 mixins
官网解释
混入 (mixin) 提供了一种非常灵活的形式，来散发 Vue 组件中的可复用性能。一个混入对象能够蕴含任意组件选项。当组件应用混入对象时，所有混入对象的选项将被“混合”进入该组件自身的选项。
简略的来说就是 Mixins 是咱们 能够重用 的代码块，在理论开发中，如果有些代码重复性比拟高，这时候能够思考 Mixins 这个个性。
简略的 mixin 示例
export default {data() {
return {
name: '来自 mixin 的 name',
arr: [
1,
{
arrName: '来自 mixin',
arrMixin: '来自 mixin'
},
1233
],
obj: {name: '来自 mixin', value: '来自 mixin', mixin: '只有 mixin 才有的字段'}
}
},
created() {console.log('我是 mixin 的 created---')
},
mounted() {console.log('我是 mixin 的 mounted---')
this.getInfo()},
methods: {getInfo() {console.log('我是 mixin, getInfo:', this.name)
console.log('我是 mixin 的 obj:', this.obj)
console.log('我是 mixin 的 arr:', this.arr)
}
}
}
组件中应用
import mixinDemo from './mixin.js'
export default {
name: '',
mixins: [mixinDemo],
components: {},
data() {
return {
name: '组件中的 name',
arr: [
2,
{
arrName: '来自组件的 arrName',
title: '来自组件的独有字段 title'
}
],
obj: {name: '来自组件 name', value: '来自组件 value', title: '只有组件才有的 title 字段'}
}
},
computed: {},
watch: {},
created() {console.log('--- 我是组件的 created---')
},
mounted() {console.log('--- 我是组件的 mounted---')
this.getInfo()},
methods: {getInfo() {console.log('我是组件的, getInfo:', this.name)
console.log('我是组件的 obj:', this.obj)
console.log('我是组件的 arr:', this.arr)
}
}
}
控制台后果
通过以上后果能够发现
- 生命周期钩子函数会
合并起来，都会执行。 先执行 mixins 的钩子函数 再 执行组件的钩子函数。 - data 的同名数据，要分状况探讨
如果是根本类型，会用组件的同名数据笼罩 mixin 的数据。
然而如果是对象，数据对象在外部会进行
递归合并，并在发生冲突时以 组件数据优先。相似Object.assign(mixinObj, componentObj);数组的话则间接以
组件中的数据优先
- methods 的办法也是一样，会用组件的办法笼罩 mixin 的同名办法。
- 除了下面这些，还有例如
methods、components和directives，将被合并为同一个对象。两个对象键名抵触时，取组件对象的键值对，同名的会笼罩，以组件的为优先。
全局混入
混入也能够进行全局注册。应用时分外小心！一旦应用全局混入，它将影响 每一个 之后创立的 Vue 实例。应用失当时，这能够用来为自定义选项注入解决逻辑。
混入造成的问题
用得太多的话，容易凌乱。前期保护的时候，不容易查找变量或者办法。
自定义指令 directive
简介
除了外围性能默认内置的指令 (v-model 和 v-show)，Vue 也容许注册自定义指令。留神，在 Vue2.0 中，代码复用和形象的次要模式是组件。然而，有的状况下，你依然须要对一般 DOM 元素进行底层操作，这时候就会用到自定义指令。
比方我的项目中罕用的水印性能。咱们对一个 div 范畴内增加水印款式。能够用到自定义指令。
首先看看效果图
生成水印有许多办法。咱们当初通过自定义指令的形式来操作，以便相熟自定义指令的应用。
先上代码
办法文件
function addWaterMarker(str, parentNode, font, textColor) {// 水印文字生成办法 略}
const waterMarker = {
name: 'waterMarker',
bind: function(el, binding) {addWaterMarker(binding.value, el)
},
update: function(el, binding) {if (binding.oldValue !== binding.value) {addWaterMarker(binding.value, el)
}
}
}
export default waterMarker
注册自定义指令
import Vue from 'vue'
import waterMarker from './watermark.js'
Vue.directive(waterMarker.name, waterMarker)
main.js 全局调用
import './directive.js'
组件中应用
指令须要用 v- + 指令名 形式援用
<div v-waterMarker="'我是水印'" class="wrapper"></div>
参考 vue 实战视频解说：进入学习
指令的钩子函数
一个指令定义对象能够提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保障父节点存在，但不肯定已被插入文档中)。update：所在组件的 VNode 更新时调用，然而可能产生在其子 VNode 更新之前。指令的值可能产生了扭转，也可能没有。然而你能够通过比拟更新前后的值来疏忽不必要的模板更新 (具体的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全副更新后调用。unbind：只调用一次，指令与元素解绑时调用。
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，能够用来间接操作 DOM。-
binding：一个对象，蕴含以下 property：name：指令名，不包含v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否扭转都可用。expression：字符串模式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个蕴含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{foo: true, bar: true}。
vnode：Vue 编译生成的虚构节点。移步 VNode API 来理解更多详情。oldVnode：上一个虚构节点，仅在update和componentUpdated钩子中可用。
组件中部分自定义指令
export default {
directives: {
waterMarker: {
// 以后指令的钩子函数 略
bind() {}
}
}
}
过滤器 filter
Vue 过滤器实质上是一个函数，它承受一个值，解决它，而后返回解决过的值。
过滤器能够用在两个中央：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始反对)。过滤器应该被增加在 JavaScript 表达式的尾部，由“管道 (|)”符号批示
组件中应用
<div class="btn-list">
{{btn | btnFilter}}
</div>
<div class="btn-list" :id="btn2 | btnFilter">id</div>
组件中定义过滤器
const filterList = [{ key: 1, text: '提交'},
{key: 2, text: '查看'},
{key: 3, text: '编辑'},
{key: 4, text: '删除'}
]
export default {
filters: {btnFilter(val) {return filterList.find(item => item.key === val).text
}
},
data() {
return {
btn: 1,
btn2: 3
}
}
}
全局定义过滤器
import Vue from 'vue'
Vue.filter('btnFilter', function (value) {// 逻辑代码...})
--------
// 再到 main.js 援用即可
过滤器能够 串联 应用
{{btn | btnFilter | newBtnFilter}}
上述 btn 作为参数传入到 btnFilter 中，而后持续调用 newBtnFilter，此时将以 btnFilter 的后果作为参数应用
过滤器是 JavaScript 函数，因而能够 接管参数
{{btn | btnFilter('arg1', 'arg2')}}
这里的 btnFilter 相当于是接管三个参数的函数，其中 btn 为第一个参数，‘arg1’ 为第二个参数，‘arg2’ 为第三个参数。
过渡
Vue 在插入、更新或者移除 DOM 时，提供多种不同形式的利用过渡成果。包含以下工具：
- 在 CSS 过渡和动画中主动利用 class
- 能够配合应用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中应用 JavaScript 间接操作 DOM
- 能够配合应用第三方 JavaScript 动画库，如 Velocity.js
Vue 提供了 transition 的封装组件，在下列情景中，能够给任何元素和组件增加进入 / 来到过渡
- 条件渲染 (应用
v-if) - 条件展现 (应用
v-show) - 动静组件
- 组件根节点
示例
<div class="btn-list" @click="show">
{{btn | btnFilter}}
</div>
<transition name="a">
<p v-if="isShow"> 过渡动画呀 </p>
</transition>
export default {data() {
return {isShow: true}
},
methods: {show() {this.isShow = !this.isShow}
}
}
.a-enter-active,
.a-leave-active {transition: opacity 0.5s;}
.a-enter,
.a-leave-to {opacity: 0;}
当插入或删除蕴含在 transition 组件中的元素时，Vue 将会做以下解决：
- 主动嗅探指标元素是否利用了 CSS 过渡或动画，如果是，在失当的机会增加 / 删除 CSS 类名。
- 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在失当的机会被调用。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡 / 动画，DOM 操作 (插入 / 删除) 在下一帧中立刻执行。(留神：此指浏览器逐帧动画机制，和 Vue 的
nextTick概念不同)
过渡的类名
在进入 / 来到的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前失效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡失效时的状态。在整个进入过渡的阶段中利用，在元素被插入之前失效，在过渡 / 动画实现之后移除。这个类能够被用来定义进入过渡的过程工夫，提早和曲线函数。v-enter-to：2.1.8 版及以上 定义进入过渡的完结状态。在元素被插入之后下一帧失效 (与此同时v-enter被移除)，在过渡 / 动画实现之后移除。v-leave：定义来到过渡的开始状态。在来到过渡被触发时立即失效，下一帧被移除。v-leave-active：定义来到过渡失效时的状态。在整个来到过渡的阶段中利用，在来到过渡被触发时立即失效，在过渡 / 动画实现之后移除。这个类能够被用来定义来到过渡的过程工夫，提早和曲线函数。v-leave-to：2.1.8 版及以上 定义来到过渡的完结状态。在来到过渡被触发之后下一帧失效 (与此同时v-leave被删除)，在过渡 / 动画实现之后移除。
<transition> 中的 name 对应上述类名的 v , 如：name="a" 则对应类名为 a-enter 等。如果你应用一个没有名字的 <transition>则 v- 是这些类名的默认前缀。
如此，咱们就能够通过编写不同的 css 动画款式，配合 <transition> 来达到不同的成果。
JavaScript 钩子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
此时能够在不同的钩子中，应用 Velocity 等动画库来实现咱们须要的动画成果。