Vue Extends 扩展选项用法完整实例


Posted in Javascript onSeptember 17, 2019

本文实例讲述了Vue Extends 扩展选项用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Extends 扩展选项</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue Extends 扩展选项</h1>
<hr>
<div id="app">
  <p>
    {{num}}
  </p>
  <p><button @click="add">add</button></p>
</div>
</body>
</html>
<script>
  var extendObj={
   updated:function () {
     console.log('我是扩展的Update')
   },
   methods:{
     //如果方法名一样 他只触发构造器里的方法 扩展不触发 混入选项也一样
     add:function(){
       this.num++
       console.log('我是扩展出来的方法')
     }
   }
  };
  var app = new Vue({
    el:'#app',
    data:{
      num:1
    },
    updated:function(){
      console.log('我是构造器触发的')
    },
    methods:{
      add:function(){
        this.num++
        console.log('我是原生的方法')
      }
    },
    //扩展不能为数组 混入是为数组
    extends:extendObj
  })
</script>

运行结果:

Vue Extends 扩展选项用法完整实例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
vuex存值与取值的实例
Nov 06 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
react native 仿微信聊天室实例代码
Sep 17 #Javascript
Vue 自定义指令功能完整实例
Sep 17 #Javascript
JS扁平化输出数组的2种方法解析
Sep 17 #Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 #Javascript
uni app仿微信顶部导航条功能
Sep 17 #Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 #Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 #Javascript
You might like
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
YII框架常用技巧总结
2019/04/27 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
Python3基础之函数用法
2014/08/13 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
全球性的女装店:storets
2019/06/12 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
高三自我鉴定怎么写
2013/10/19 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
居住证明范文
2015/06/17 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
python如何读取.mtx文件
2021/04/22 Python
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis