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

whlong 发布于2019-08-21 16:17 / 3151人阅读

摘要：当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合自定义指令除了默认设置的核心指令和也允许注册自定义指令。

vue的复用性与组合 混合

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

当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合

var base={
    data:function(){
            return{
                visible:flase,
            };
            
        },
        methods:{
            toggle:function(){
                this.visible=!this.visible
            },
            show:function(){
                this.visible=true;
            },
            hide:function(){
                this.visible=flase;
            },
        }
};
        
var Popup={
        template:"#popup-tpl",
        mixins:[base]
    };
 var Menu={
     template:"#menu-tpl",
    mixins:[base]
 } ;

自定义指令

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

 

        组件可以扩展 HTML 元素，封装可重用的代码
        自定义指令

        自定义指令

        自定义指令

        自定义指令

        自定义指令

        自定义指令

        自定义指令

        自定义指令

开发插件

插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种：

添加全局方法或者属性，如: vue-custom-element

添加全局资源：指令/过滤器/过渡等，如 vue-touch

通过全局 mixin 方法添加一些组件选项，如: vue-router

添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

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

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.install(Vue)

Vue.use(MyPlugin)

也可以传入一个选项对象:

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止注册相同插件多次，届时只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。

然而在例如 CommonJS 的模块环境中，你应该始终显式地调用 Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require("vue")
var VueRouter = require("vue-router")
// 不要忘了调用此方法
Vue.use(VueRouter)

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

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

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

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

摘要：可复用性和组合混合混合是一种分发组件中可复用功能的非常灵活的方式。官方例子定义一个混合对象定义一个使用混合对象的组件自定义指令允许自定义指令。可复用性和组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。 showImg(https://segment...

wwolf 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
开发vue全局插件的4种方式

摘要：定义全局插件的步骤定义全局插件的插件应当有一个公开方法。这个方法的第一个参数是构造器，第二个参数是一个可选的选项对象具体种方式，写在此处里引入并使用组件内调用全局插件的种方式请谨慎使用全局混入，因为它会影响每个单独创建的实例包括第三方组件。定义全局插件的步骤 1.定义全局插件 pluginsUtil.jsVue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是...

waterc 2019-08-22 11:14 评论0 收藏0