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

2024-09-27 05:33:51

本文实例讲述了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>

运行结果：

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

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

详解Vue.js iview实现树形权限表（可扩展表）

问题: 需要一个可折叠的权限管理系统,用表格展示. 主要用的iView组件库,有Table(表格),Tree(树形控件),Collapse(折叠面板)看起来比较符合意思深入查看Table相关范例,发现有个通过给 columns 数据设置一项,指定 type: 'expand',即可开启扩展功能可以考虑但也只是展开详细内容,如需树形结构,则需要render自定义去渲染,挺麻烦的.再去看看element UI,也没有什么比较好的选择. 过程: 第一步,先构建根节点的数据表,后台返回JSON
vue-cli扩展多模块打包的示例代码

场景在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而vue-cli默认只提供了单入口打包,所以就想到对vue-cli进行扩展实现首先得知道webpack是提供了多入口打包,那就可以从这里开始改造新建build/entry.js const path = require('path') const fs = require('fs') const moduleDir = path.resolve(__dirname, '../src/module
详解VUE 对element-ui中的ElTableColumn扩展

公司有一个新的需求,点击ElTableColumn的头部可以进行搜索,这个功能同事已经做出来了,但是使用有些不方便,自己就打算封装成一个组件,学习一下. ElTableColumn本来是这个样子的: 要做成的是这个样子: 我直接就放代码了,挨着挨着说明太多了. 代码的结构: 组件  <template> <el-table-column v-if="visible" :formatter="
vue组件实现可搜索下拉框扩展

本文实例为大家分享了vue组件实现可搜索下拉框的具体代码,供大家参考,具体内容如下一.效果二.代码 dropdown-ext.vue <template> <div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show"> <div class="search-module clearfix" v-show="
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

ElementUI2.0的表格的扩展: elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢? <el-table empty-text="正在加载中..." :data="contentList" style="width: 100%" @sort-change="sort" class="pro-table-item" too
详解如何写出一个利于扩展的vue路由配置

前言从历往经验来看,开发一个新项目,往往在刚开始部署项目,到项目的正式交付,以及交付后的后续维护,功能增强等过程,都需要对项目的一些已有结构和逻辑进行调整. 因此,如果有些内容刚建项目时不考虑好未来的可扩展性,后续调整会很麻烦. 这里先来说,在vue项目中,如何写路由配置,更利于未来可扩展. vue-router的基本配置为了方便新学者的阅读与理解.先来看一下最基本的路由是如何配置的 // 0. 导入Vue和VueRouter脚本,如果使用模块化机制编程,要调用 Vue.use(VueRou
详解vue mixins和extends的巧妙用法

vue提供了mixins.extends配置项,最近使用中发现很好用. 混合mixins和继承extends 看看官方文档怎么写的,其实两个都可以理解为继承,mixins接收对象数组(可理解为多继承),extends接收的是对象或函数(可理解为单继承). 继承钩子函数 const extend = { created () { console.log('extends created') } } const mixin1 = { created () { console.log('mixin1
详解Vue 中 extend 、component 、mixins 、extends 的区别

new Vue().component 首先我们来约定一个选项对象 baseOptions,后面的代码会用到. let options = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }, created(){ conso
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单

今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装 npm install rightmenu --save-dev 开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)
使用Vue开发自己的Chrome扩展程序过程详解

前言浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序.它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等. 好消息是浏览器扩展并不难写.可以用你已经熟悉的 Web 技术(HTML.CSS 和 JavaScript)创建 -- 就像普通网页一样.但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方. 在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展.这个扩展程序的 JavaScript 部分,我
详解Vue2.0组件的继承与扩展

前言本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/extends和extend的用法. 一.slot 1.默认插槽和匿名插槽 slot用来获取组件中的原内容,此方式用于父组件向子组件传递"标签数据".有的时候为插槽提供默认的内容是很有用的,例如,一个<my-hello> 组件可能希望这个按钮的默认内容是"如果没有原内容,则显示该内容",但是同时允许用户覆写为别的内容. <body> <div id=&qu

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

相关推荐

随机推荐