vue自定义指令和混入mixin和开发插件

最新推荐文章于 2022-09-28 20:38:03 发布
最新推荐文章于 2022-09-28 20:38:03 发布
阅读量395 收藏
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/108329333
版权

vue自定义指令和混入mixin

vue自定义指令

vue官网自定义指令

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>

  <h2>自定义指令</h2>
  <div id="app">
  
     <!-- 使用指令 v-xxx  -->
    <input type="text" v-autofocus:username.navtive.stop="true">

    <!-- v-pre  不解析语法 -->
    <div v-pre>{{ username }}</div>
    
    <!-- v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，
         这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。-->
    <div v-cloak>{{ username }}</div>
    
    <!-- v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
         这可以用于优化更新性能。-->
    <div v-once>{{ username }}</div>
    
  </div>
  <script>
    /*
      自定义指令
      1、全局指令 
        Vue.directive(name, options)
      2、局部指令
        directives:{name: options} //options:{function | object}

      3、钩子函数参数
        el:指令所在的元素节点
        binding：
          1、name：指令名
          2、value：指令值
          3、expression：字符串形式的指令表达式
          4、modifiers：指令修饰符
        
    */
    // 全局自定义指令
    Vue.directive('autofocus', {
      // 初始化时执行 （默认）
      bind(el, binding) {
        // el:指令所在的元素节点 这里是input
        // binding：指令的信息
        console.log('el=', el)
        console.log('binding=', binding)
      },
      // 元素插入页面时执行
      inserted(el, binding) {
        el.focus()
      }
    })

    // 局部自定义指令
    Vue.component('myform', {
      data() { },
      directives: {
        autofocus: {
          bind(el, binding) { },
          inserted() { },
        }
      }
    })

    const vm = new Vue({
      el: '#app',
      data: {
        username: 'fqniu'
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

vue的混入mixin

vue官网混入mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <h2>混入</h2>
  <div id="app">
    <coma>
      <com1></com1>
      <com2></com2>
    </coma>
  </div>
  
  <script>
    /*
      mixin 混入
        1、全局 Vue.mixin(options)
        2、局部 mixins:[minxin1,minxin2,...]
        同名配置：
          data -> 保留组件自己的配置  注意：不会改为混入的数据
          template -> 会覆盖自己的配置
          生命周期函数 都会执行一遍，不会覆盖
      注意点：
        全局注册一个混入，会影响后面所有创建的每个 Vue 实例/组件（影响较大，一般用于插件编写）
    */

    // 全局混入
    Vue.mixin({
      data() {
        return {
          qty: 10
        }
      },
      methods: {
        getData() {
          console.log('getData', this.name) // 依次打印 root coma coma1 coma2
        }
      },
      created() {
        this.getData();
      }
    });

    // 局部混入
    const myMixin = {
      data() {
        return {
          type: 'myMixin',
          name: 'myMixin'
        }
      },
      mounted() {
        console.log('myMixin mounted') // 打印两次 myMixin mounted
      }
    }
    
    // 全局组件
    Vue.component('coma', {
      data() {
        return {
          name: 'coma',
        }
      },
      template: `<div>
       <h4 @click="getData">{{name}}-> {{qty}}</h4>
       <coma1></coma1>
       <coma2></coma2>
      </div>`,
      components: {
        coma1: {
          data() {
            return {
              name: 'coma1'
            }
          },
          mixins: [myMixin],
          template: `<div>{{name}}</div>`
        },
        coma2: {
          data() {
            return {
              name: 'coma2'
            }
          },
          template: `<div>{{name}}</div>`
        }
      }
    });

    const vm = new Vue({
      el: '#app',
      data: {
        name: 'root'
      },
      mixins: [myMixin],
      mounted() {
        console.log('root mounted=', this.name) // 打印 root mounted= root
      }
    })
  </script>
</body>

</html>

依次执行的函数打印
在这里插入图片描述

vue开发插件

vue官网插件开发
在这里插入图片描述

 /**
    * 定义插件
      * 插件可以是一个对象（必须提供 install 方法）。也可以是一个函数，它会被作为 install 方法。
         并把 Vue 作为参数传入
    * 使用插件：Vue.use(plugin)
        * 调用Vue.use()方法，内部会自动执行install
 */

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  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() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：


// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})
也可以传入一个可选的选项对象：

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

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)
牛先森家的牛奶
关注
专栏目录
前端常见面试题目|2nextTick,vue自定义指令，单页面应用，keep-alivedata为什么是一个函数而不是对象，mixin,子组件可以直接改变父组件的数据吗
VAN
04-21 82
在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一般需要对DOM元素进行底层操作时使用，尽量只用来操作 DOM展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新；如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用 change事件，回调中修改vue数据;（1）自定义指令基本内容。
(精华2020年5月16日更新) vue实战篇 mixin插件开发
热门推荐
一点一滴
05-16 1万+
插件开发以vue-router为例 import Vue from 'vue' // import VueRouter from 'vue-router' import VueRouter from '../MYRouter/index.js' Vue.use(VueRouter)// 执行install方法 const routes = [ { path:'/', redirect:'/goods' }, { path: '/goods', name: 'g
【Vue】混入 & 插件 & 插槽
Superman_H的博客
04-14 438
# 混入 (混合) - 用于代码的复用，分为：局部混合 & 全局混合 - 一个 [混入对象] 可以包含任意组件选项 - 当组件使用 [混入对象] 时，所有 [混入对象] 的选项将被 “混合” 进入该组件本身的选项 ## 局部混合 > #### 第一步：定义 js 文件 - 创建 mixin 文件夹、创建 index.js 文件；在 JS 文件中，定义需要复用的数据，并暴露出去 ```js export const mixMethods = { methods: {
混入和自定义指令(写一个类似于:style的自定义指令)
qq_42014236的博客
01-20 233
混入[Mixin] 什么是混入 混入的出现，其更好的解释就是对组件中可复用的功能进行管理，简单来说，假设是三个组件A,B,C，他们每个组件中都有同样的data中的属性，且属性值也一致，那么我们可以将这些重复的东西装入混入中进行管理，哪里需要用，我们就将混入的东西导入到已有的组件中即可，这样一来，即使没有在data中定义这些属性，我也可以使用它（前提是我导入了混入，并正确使用了他）。当然混入不仅...
VUE可复用：混入mixin、插件、自定义指令directive
Beatingworldline的博客
06-07 334
官方例子 +自己的理解： 一、混入-mixin： 使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 例如:当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 1、同名数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 2、同名钩子函数将合并为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。 全局混入：混入也可以进行全局注册，一旦使用，它将影响每一个之后创建的 Vue 实例 理解：相当于复用的mixin对引用者进行了合理的合并扩充 区别于im
vue3.0从入门到进阶(二)混入与指令入门与理解
峰会路转的博客
09-05 501
学习vue的同学对于混入(mixin)，和指令(directive)的运用应该比较少，他们也是数据的传输的几种方式之一。 首先我们来看下混入是什么样的实现。 为什么要使用混入 就是为了实现多个组件之间有相同的方法，实现复用，少写重复的代码。 在第一节的基础上，我们创建一个混入的对象 //创建一个混入 const myMixin = { created() { this.hello() }, methods: {
使用vue中的混入mixin优化表单验证插件问题
10-16
总结来说，混入mixin在Vue开发中是一个非常有用的特性，它不仅可以帮助我们解决表单验证插件中遇到的问题，还能够使我们的组件结构更加清晰、易于维护。通过实例代码和文章内容的理解，我们可以看到如何利用mixin来...
Vue自定义指令与插件开发
## 1.1 什么是Vue自定义指令与插件开发 在Vue.js中，自定义指令与插件开发是一种扩展Vue功能和增加Vue组件行为的方式。自定义指令可以用于操作DOM元素，为其添加特定功能或响应特定事件。而插件则是一组功能的集合...
Vue学习---插件和混入
weixin_53027472的博客
09-28 786
Vue学习，定义和使用插件，混入。
Vue中插件的使用和混入的使用
Machoul的博客
03-30 439
Vue中混入和插件的使用 vue中的ref属性 被用来给元素或子组件注册引用信息（id的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 使用方式： 打标识：直接加在标签体上 获取：this.$refs.xxx <template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">输
Vue之Mixins(混入)的使用方法
10-16
主要介绍了Vue之Mixins(混入)的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue_mixin混入与插件
黑猫几绛的博客
10-11 688
引言 在写代码的时候，我们常常会遇到功能大致相同的代码段。对于组件可以抽象出来调用，但是面对代码那就是cv了。比如下面这个例子，在methods方法中可以看到，两个不同组件有着完全一致的showName方法。 解决办法 在Vue2中官方提供了一个解决办法：Mixin混入技术。 首先在App.vue的同级目录下创建mixin.js export const mixin = { methods: { showName: function(){ a.
自制vue组件通信插件:教你如何用mixin写插件
sinat_33366288的博客
07-08 876
csdn的md编译器不好用，详情访问该文章，绝对精华https://segmentfault.com/a/1190000015554464
Vue编写时的一些注意事项（8）（--全局混入 以及 --自定义指令）
weixin_43910427的博客
02-27 317
1.mixin 全局混入 整个项目都需要用到的方法等这样的可以进行mixin ,但不要滥用，更不要将mixin里面的名字与组件里面的重复 · import Vue from 'vue' var mixin = { methods:{ like(){ console.log('like') }, } } Vue.mixin(mixin) 这样，...
[Vue] 28.混入与自定义指令：Mixin混入的基础语法（1）
u014627255的博客
07-03 199
Vue mixin混入基础
混入mixin和自定义插件
panda_pan9527的博客
08-01 421
混入mixin 什么叫做混入？ 将组件的选项中的一部分分离出去，单独管理 方式有两种 局部混入 mixins 【 推荐 】 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
复习Vue20、函数式组件和混入(mixin)
tinglis的博客
03-02 308
复习Vue20、函数式组件和混入(mixin) 20.1、函数式组件 组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法时，可以将组件标记为functional.这意味它无状态（没有响应式数据），也没有实例（没有this上下文） 因为只是函数，所以渲染的开销相对来说，较小。 函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。 20.2 混入（mix
实现vue-router插件
cm_xiaomo的博客
10-20 450
一、需求分析 作为一个插件存在：需要实现vueRouter类及install方法； 实现两个全局组件： router-link用于路由跳转，router-view用于展示组件内容； 监控url变化：监听hashchange事件和load事件； 展示对应url内容： 创建一个响应值，当它改变时，展示对应的组件内容。 二、准备工作 创建一个vue项目，安装vue-router 改造router/index.js文件，增加一个路由，用于跳转，如下 export default new Router({
关于Vue自定义指令、mixin和插件的封装
qq_40566547的博客
12-19 452
​ 最近由于转前端，刚好学到了Vue，写一下自己的一些心得（注：无Vue基础），博客基于Vue2.x mixin mixin，官方解释为混入，抽离公共逻辑，然后在适当需求下，将mixin和vue实例进行混合，达到逻辑重用的目的，官方文档全局混入。 注：被混入的实例对象部分方法、数据等可能会被影响 mixin的内容和组件实例一样，组件有的配置，mixin都有，如果遇到mixin和组件实例部分属性或方法冲突，则会取组件实力的方法或属性。 全局监听scroll事件的mixin 下面这个简单的全局监听scroll事
总结vue2的常用指令、常用模板语法、生命周期、数据渲染、事件绑定、自定义指令、混入、插件的作用的使用方法
最新发布
03-23
自定义指令可以使用Vue.directive()方法进行注册，可以用于操作DOM、事件等。混入可以使用Vue.mixin()方法进行注册，可以将多个组件共用的逻辑进行封装。插件可以使用Vue.use()方法进行注册，可以扩展Vue的功能，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值