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 相关文章推荐
早该知道的7个JavaScript技巧
Mar 27 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
javascript模拟命名空间
Apr 17 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
javascript的理解及经典案例分析
May 20 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
webpack打包多页面的方法
Nov 30 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中获取时间的下一周下个月的方法
2014/03/18 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python读写unicode文件的方法
2015/07/10 Python
Python对文件操作知识汇总
2016/05/15 Python
python实时监控logstash日志代码
2020/04/27 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
职业生涯规划书前言
2014/04/15 职场文书
会计系毕业生求职信
2014/05/28 职场文书
践行三严三实心得体会
2014/10/13 职场文书
研究生个人学年总结
2015/02/14 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android