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" ...
随机推荐
- 漫长的旅途--C++primer学习-命名空间以及类的自动转换和强制转换
C++用名称空间来控制名称的作用域: 1不同命名空间的同名变量可以同时存在,不会发生冲突 2命名空间不能出现在代码块中 3我们用作用域运算符::,使用空间名来限定名称,最常用的std::cout 4u ...
- 从0到1搭建k8s集群系列1：安装虚拟机及docker
前言 本系列文章记录了本人学习k8s集群搭建的过程,从k8s基本组件的安装.到部署mysql服务到k8s集群.部署web项目到k8s集群以及安装可视化界面管理工具kuboard. 因为k8s的组件安装 ...
- 整理分布式锁：业务场景&分布式锁家族&实现原理
1.引入业务场景 业务场景一出现: 因为小T刚接手项目,正在吭哧吭哧对熟悉着代码.部署架构.在看代码过程中发现,下单这块代码可能会出现问题,这可是分布式部署的,如果多个用户同时购买同一个商品,就可能导 ...
- 使用 rabbitmq 的场景?
1.服务间异步通信 2.顺序消费 3.定时任务 4.请求削峰
- forward和redirect的区别？http状态码301,302分别代表什么？
一.forward和redirect的区别 从地址栏显示来说:forward是服务器内部重定向,客户端浏览器的网址不会发生变化:redirect发生一个状态码,告诉服务器去重新请求那个网址,显示的的新 ...
- 常见算法的时间复杂度（大O计数法）
定义 对于不同的机器环境而言,确切的单位时间是不同的,但是对于算法进行多少个基本操作(即花费多少时间单位)在规模数量级上却是相同的,由此可以忽略机器环境的影响而客观的反应算法的时间效率. 对于算法 ...
- Effective Java —— 覆盖equals时总要覆盖hashCode
本文参考 本篇文章参考自<Effective Java>第三版第十一条"Always override hashCode when you override equals&quo ...
- c++中的printf、和cout和cin后面跟指针的问题
printf里面打印指针的问题 而在c语言中,使用printf只需要使用不同的格式就可以区分打印出是字符串还是指针变量的值: cout和cin后面跟指针的问题 cout<<mm 和cin& ...
- 什么是pandas
- H5优化：canonical标签该如何正确使用
对一组内容完全相同或高度相似的网页,通过使用Canonical标签可以告诉搜索引擎哪个页面为规范的网页,能够规范网址并避免搜索结果中出现多个内容相同或相似的页面,帮助解决重复内容的收录问题,避免网站相 ...