关于vue.js:vue中的几个高级概念

61次阅读

共计 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 将会做以下解决：

  1. 主动嗅探指标元素是否利用了 CSS 过渡或动画，如果是，在失当的机会增加 / 删除 CSS 类名。
  2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在失当的机会被调用。
  3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡 / 动画，DOM 操作 (插入 / 删除) 在下一帧中立刻执行。(留神：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

过渡的类名

在进入 / 来到的过渡中，会有 6 个 class 切换。

  1. v-enter：定义进入过渡的开始状态。在元素被插入之前失效，在元素被插入之后的下一帧移除。
  2. v-enter-active：定义进入过渡失效时的状态。在整个进入过渡的阶段中利用，在元素被插入之前失效，在过渡 / 动画实现之后移除。这个类能够被用来定义进入过渡的过程工夫，提早和曲线函数。
  3. v-enter-to：2.1.8 版及以上 定义进入过渡的完结状态。在元素被插入之后下一帧失效 (与此同时 v-enter 被移除)，在过渡 / 动画实现之后移除。
  4. v-leave：定义来到过渡的开始状态。在来到过渡被触发时立即失效，下一帧被移除。
  5. v-leave-active：定义来到过渡失效时的状态。在整个来到过渡的阶段中利用，在来到过渡被触发时立即失效，在过渡 / 动画实现之后移除。这个类能够被用来定义来到过渡的过程工夫，提早和曲线函数。
  6. 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 等动画库来实现咱们须要的动画成果。

正文完
vue.js
发表至： vue.js
2022-10-18
 0
关于vue.js:浏览器控制台consolelog输出object-Object不能展开详情
关于vue.js:裁剪上传图片
关于vue.js:Vuejs基础内容
关于vue.js:Vercel替代方案