混入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 等动画库来实现咱们须要的动画成果。