Vue.js Mixins 混入使用
Mixins一般有两种用途：
1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
一、Mixins的基本用法
我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.
代码实现过程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option Demo</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num:{{ num }}</p>
<P><button @click="add">增加数量</button></P>
</div> <script type="text/javascript">
//额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.num+".");
}
}
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
mixins:[addLog]//混入
})
</script>
</body>
</html>
二、mixins的调用顺序
从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。
在上边的代码的构造器里我们也加入了updated的钩子函数：
1 updated:function(){
2 console.log("构造器里的updated方法。")
3 },
mixins数据放生变化,变化成2.
三、全局API混入方式
我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：
1 Vue.mixin({
2
3 updated:function(){
4 console.log('我是全局被混入的');
5 }
6 })
PS：全局混入的执行顺序要前于混入和构造器里的方法。
Vue.js Mixins 混入使用的更多相关文章
- vue.js mixins 使用
export default { data () { return { } }, created () { }, methods: { arrayContain (array, obj) { for ...
- 使用vue的mixins混入实现对正在编辑的页面离开时提示
mixins.ts import { Vue, Component, Watch } from "vue-property-decorator" Component.registe ...
- 小技巧|使用Vue.js的Mixins复用你的代码
Vue中的混入 mixins 是一种提供分发 Vue 组件中可复用功能的非常灵活的方式.听说在3.0版本中可能会用Hooks的形式实现,但这并不妨碍它的强大. 这里主要来讨论 mixins 如何优化我 ...
- vue.js过度&动画、混入&插件
1.vue 过度动画 1.过度 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 语法格式: < ...
- Vue.js 2.x 混入
Vue.js 2.x mixins 混入 混入(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身 ...
- Vue mixins(混入)
建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...
- _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
_ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
- Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
- （12）打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- DDOS防御----CENTOS 内核TCP参数优化
0x01 环境 attact作为攻击发起方,安装有hping server作为被攻击方,修改内核TCP参数.使用操作系统CENTOS7 0x02 步骤 一.发起攻击 修改TCP最大SYN连接数 使用a ...
- Key-Value存储系统简介
Redis是一个Key-Value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集合).这些数据类 ...
- 数据结构 - 单链表 C++ 实现
单链表 单链表的定义 typedef int ElemType; typedef struct LNode { ElemType data; LNode *next; } LNode, *LinkLi ...
- SpringBoot 开局篇
SpringBoot SpringBoot 是什么 SpringBoot 是为了简化配置文件开发的一种解决方案 SpringBoot 遵从 规范大于配置 SpringBoot 内置传统 Spring ...
- 在java web工程中jsp页面中使用kindeditor
在这之前我们用Notepad++写过kindeditor 在Java web工程里也差不多 首先我们复制之前的thml代码粘贴到工程里 然后把样式也复制进去 然后就可以运行了
- nginx静态资源服务器配置
编辑 nginx.conf server { listen 80; server_name file.youxiu326.xin; location /image/ { #访问 file.youxiu ...
- Effective Java —— 用静态工厂方法代替构造器
本文参考 本篇文章参考自<Effective Java>第三版第一条"Consider static factory methods instead of constructor ...
- Tomcat警告之“资源添加到Web应用程序[]的缓存中，因为在清除过期缓存条目后可用空间仍不足 - 请考虑增加缓存的最大空间”
原因 缓存不够,可以将其缓存调大 解决办法: 在 /conf/context.xml 的 前添加以下内容: <Resources cachingAllowed="true" ...
- Numpy非常重要有用的数组合并操作
Numpy非常重要有用的数组合并操作 背景:在给机器学习准备数据的过程中,经常需要进行不同来源的数据合并的操作. 两类场景: 给已有的数据添加多行,比如增添一些样本数据进去: 给已有的数据添加多列,比 ...
- 使用jenkins实现前端自动化打包部署（Linux版本）
我们这边好多小组觉得每次测试人员叫我们开发打包部署到某某个测试环境人工操作比较麻烦,因为他们想做到只专注于开发,不管这些琐碎的事.于是有个组长问我前端能不能用Jenkins去执行这一个固定的流程,因为 ...