Vue-mixins选项

Mixins用于:

  1.已经写好了构造器,还要增加方法或者临时的活动时使用的方法,用混入能减少源代码的污染。

  2.公用方法,用混入的方法可以减少代码量,实现代码重用。(使用全局混入)

执行顺序:全局混入 > 构造器之外的混入 > 原生的混入

原生中:

         updated:function(){
console.log("这是原生")
}

构造器之外的混入:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="vueMixins">
<h2>Vue-mixins选项</h2>
<div>
<p>{{num}}</p>
<p><button @click="add()" >增加</button></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var addNews={ //后来的内容用变量接收
updated:function(){
console.log("你好啊,地球");
}
}
var app=new Vue({
el:"#vueMixins",
data: {
num: 16,
}, methods: {
add:function(){
this.num++;
},
},
mixins: [ addNews ] // 把上面的变量在这里应用
});
</script>
</body>
</html>
全局混入:
 <script>

     Vue.mixin({
updated:function(){
console.log("这是全局混入");
}
})
var app=new Vue({
el:"#vueMixins",
data: {
num: 16,
},
methods: {
add:function(){
this.num++;
},
} });
</script>

Vue-mixins选项的更多相关文章

  1. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  2. Vue mixins(混入)

    建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...

  3. 【转存】Vue组件选项props

    原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过  ...

  4. _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

    _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

  5. VUE mixins(混入)

    mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用:           父组件 ...

  6. vue的选项

    这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...

  7. Vue 构造选项 - 进阶

    Directive指令:减少DOM操作的重复 Vue实例/组件用于数据绑定.事件监听.DOM更新 Vue指令主要目的就是原生DOM操作 减少重复 自定义指令 两种声明方式 方法一:声明一个全局指令 V ...

  8. vue mixins的使用

    官网传送 刚开始接触vue的时候,官网关于mixins的例子看了好几遍,发现还是不会用,包括vuex也是后来慢慢理解一点的,不过和vuex比起来.mixns还是很好理解,简单很多了 就我目前理解mix ...

  9. Vue mixins extends extend components

    mixins 调用方式: mixins: [mixin1, mixin2] 是对父组件的扩充,包括methods.components.directive等... 触发钩子函数时,先调用mixins的 ...

  10. vue mixins应用场景

    学习知识得在应用场景中去应用,这样才能真正学到东西,记忆也深刻,以后碰到类似的东西就会了. 1.在assets文件夹下创建一个js文件 // 创建一个需要混入的对象 export const mixi ...

随机推荐

  1. unreal3对象管理模块分析二

    上一篇主要记了UClass的创建,现在总结一下UObject的创建,可以从几个不同角度来理解. 从途径上看,可以根据UObject的构造函数来分个类: // Constructors. UObject ...

  2. R: data.frame 数据框的:查询位置、排序(sort、order)、筛选满足条件的子集。。

    ################################################### 问题:数据框 data.frame 查.排序等,   18.4.27 怎么对数据框 data.f ...

  3. IFrame与window对象(contentWindow)

    ref:http://blog.csdn.net/dongzhiquan/article/details/5851201 var detialIframe=document.all("det ...

  4. docker17.09.1-ce 执行systemctl resart docker重启失败的问题

    记录在实际操作中碰到的docker问题 环境信息: 安装完kolla ocata版本,并且编译成功各openstack 组件的容器镜像 [root@localhost ~]# docker --ver ...

  5. 《OD大数据实战》Mahout入门实例

    一.环境搭建 1. 下载 mahout-0.9-cdh5.3.6.tar.gz 2. 解压 3. mahout org.apache.mahout.clustering.syntheticcontro ...

  6. 洛谷P2798 爆弹虐场

    P2798 爆弹虐场 题目描述 某年某月某日,Kiana 结识了一名爆弹虐场的少年. Kiana 仗着自己多学了几年OI,所以还可以勉勉强强给这位少年 讲一些自己擅长的题.具体来说,Kiana 先给这 ...

  7. 深入解析Android Design包——Behavior

    已经说过了,在AndroidDesign包中主要有两个核心概念:一是NestedScroll,另一个就是Behavior. 相比于NestedScroll这个概念来说,Behavior分析起来会难很多 ...

  8. mysql事务锁表

    -- 查看被锁住的SELECT * FROM INFORMATION_SCHEMA.INNODB_LOCKS; -- 等待锁定SELECT * FROM INFORMATION_SCHEMA.INNO ...

  9. chapter03

    import scala.collection.mutable.ArrayBuffer /** * Created by EX-CHENZECHAO001 on 2018-03-29. */class ...

  10. Windows开机自动登录及取消自动登录的设置

    开机自动登录 1.开始菜单搜索框输入 “netplwiz” 按回车 或“Win+R”组合键打开“运行”框内输入“netplwiz” 或“运行”框内输入“control userpasswords2”( ...