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" ...
随机推荐
- 【技术干货】华为云FusionInsight MRS的自研超级调度器Superior Scheduler
Superior Scheduler是一个专门为Hadoop YARN分布式资源管理系统设计的调度引擎,是针对企业客户融合资源池,多租户的业务诉求而设计的高性能企业级调度器. Superior Sch ...
- 从零开始，开发一个 Web Office 套件（14）：复制、粘贴、剪切、全选
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- Springmvc入门基础(一) ---基于idea创建demo项目
Springmvc是什么 Springmvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得出来,如下图: Springmvc处理流程 ---- ...
- Java 中 interrupted 和 isInterrupted 方法的区别？
interrupt interrupt 方法用于中断线程.调用该方法的线程的状态为将被置为"中断"状态. 注意:线程中断仅仅是置线程的中断状态位,不会停止线程.需要用户自己去监 视 ...
- Numpy求解线性方程组
Numpy求解线性方程组 对于Ax=b,已知A和b,怎么算出x? 1. 引入包 2. 求解 验证
- 一、cadence元件库绘制详细步骤
一.元件库 1.打开如下图标的软件 2.勾选1选项,下次就直接打开,不用选择 3.新建库文件File-New-Library,如下图: 4.新建元件 5.绘制元件
- CSS 文本控制
one more time one more chance. 一歩重头学前端, css入门. 学习一些 CSS 文本控制的属性,防止做傻事.请大家对照下面列表检验下: 会的.不会的.似懂非懂的.笔者是 ...
- SQL之总结（一）
导游通项目之总结SQL 1.选择前面的某几个 oracle: select * from tb_article where rownum<5 order by article_id ...
- PC端免费高效的同声翻译
疫情期间上网课,对于英语听力较差或者需要观看英文视频,但实际上并没有双语字幕的这种情况下需要找一个实时的翻译工具.虽然说手机上此类软件比较多,但电脑上没有特别合适的应用可以做为一个免费实时翻译.哪怕是 ...
- ASP.NET WebAPI解决跨域问题
跨域是个很蛋疼的问题...随笔记录一下... 一.安装nuget包:Microsoft.AspNet.WebApi.Core 二.在Application_Start方法中启用跨域 1 protect ...