Vue的混合、自定义指令和插件

wwolf 发布于2019-08-21 16:17 / 2620人阅读

摘要：可复用性和组合混合混合是一种分发组件中可复用功能的非常灵活的方式。官方例子定义一个混合对象定义一个使用混合对象的组件自定义指令允许自定义指令。

可复用性和组合 混合

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

在上面的例子中，我们创建了一个点击弹出框和一个滑过弹出框，因为其调用的数据和方法都是重复的，因此就定义一个混合对象，让两个不同的弹出框分别调用。

官方例子：

// 定义一个混合对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log("hello from mixin!")
    }
  }
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"

自定义指令

Vue允许自定义指令。

举个例子，现在这里有个input输入框，当页面加载时，输入框就已经获取焦点，并将输入框固定在视口的某一位置上：

Vue.directive("focus",{
    inserted:function(el){
        el.style.position="fixed";
        el.style.left="10px";
        el.style.top="10px";
        el.focus()
    }
})

这样在模板中就可以使用了

插件 插件的开发

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

var Myplugin={};
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive("my-directive", {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

使用插件

Vue.use(MyPlugin)

GPU云服务器云服务器自定义指令自定义指令实例自定义插件自定义ckeditor插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88366.html

Vue 混合、自定义指令、插件

摘要：当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合自定义指令除了默认设置的核心指令和也允许注册自定义指令。 vue的复用性与组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合 ...

whlong 2019-08-21 16:17 评论0 收藏0
Vue_Vue权威指南

摘要：效率不高，很多多余，称之为脏检查。通过索引设置数组元素并触发视图更新。解决闪烁问题自定义指令自定义指令提供一种机制将数据的变化映射为行为。 Vue特性 Vue只是聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统轻量数据绑定指令插件化架构从传统后台MVC 向REST API + 前端MV*迁移DOM是数据的一种自然映...

SimonMa 2019-08-21 14:31 评论0 收藏0
vue 基础

摘要：依的值，来决定哪个组件被渲染。不具名的内容会替换子组件中我是默认内容的默认内容另一个主要段落。这里是一些联系信息渲染结果为这里可能是一个页面标题主要内容的一个段落。 vue脚手架页面是怎么生成的？（组件注册，路由插件的使用）；主要涉及的文件： index.htmlindex.jsmain.jsAPP.vue 大致的过程就是： main.js 通过 import Vue from v...

fasss 2019-08-22 13:45 评论0 收藏0
Vue.js组件可复用性的混合(mixin)方式和自定义指令

摘要：注意，在里面，代码复用的主要形式和抽象是组件然而，有的情况下你仍然需要对纯元素进行底层操作这时候就会用到自定义指令。注册一个全局自定义指令当绑定元素插入到中。混合是什么混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。例如: var tpl1={ te...

未东兴 2019-08-21 16:17 评论0 收藏0
JS每日一题: Vue中mixin怎么理解？

摘要：两个对象键名冲突时，取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象，将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解？ mixin是为了让可复用的功能灵活的混入到当前组件中，混合的对象可以包含任意组件选项（生命周期，指令之类等等）, mixin翻译过来叫混合,高级的...

jubincn 2019-08-23 15:28 评论0 收藏0