快捷導(dǎo)航

Vue Extends 擴(kuò)展選項(xiàng)用法完整實(shí)例

更新時(shí)間：2019年09月17日 09:07:25 作者：Json____

這篇文章主要介紹了Vue Extends 擴(kuò)展選項(xiàng)用法,結(jié)合完整實(shí)例形式分析了Vue Extends 擴(kuò)展選項(xiàng)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了Vue Extends 擴(kuò)展選項(xiàng)用法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Extends 擴(kuò)展選項(xiàng)</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue Extends 擴(kuò)展選項(xiàng)</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('我是擴(kuò)展的Update')
   },
   methods:{
     //如果方法名一樣 他只觸發(fā)構(gòu)造器里的方法 擴(kuò)展不觸發(fā) 混入選項(xiàng)也一樣
     add:function(){
       this.num++
       console.log('我是擴(kuò)展出來(lái)的方法')
     }
   }
  };
  var app = new Vue({
    el:'#app',
    data:{
      num:1
    },
    updated:function(){
      console.log('我是構(gòu)造器觸發(fā)的')
    },
    methods:{
      add:function(){
        this.num++
        console.log('我是原生的方法')
      }
    },
    //擴(kuò)展不能為數(shù)組 混入是為數(shù)組
    extends:extendObj
  })
</script>

運(yùn)行結(jié)果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

web前端vue filter 過(guò)濾器
vue的過(guò)濾器通常用在一些常見(jiàn)的文本格式化，過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。本文給大家介紹了web前端vue filter 過(guò)濾器的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2018-01-01
vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue自定義鈴聲提示音組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue中自定義一個(gè)鈴聲提示音組件的實(shí)現(xiàn)以及使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-01-01
解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue實(shí)施重新發(fā)布和軟件熱更新的經(jīng)驗(yàn)分享
在Web應(yīng)用的開(kāi)發(fā)周期中,版本管理和軟件熱更新是一個(gè)不可或缺的話題,隨著Vue.js框架的流行,越來(lái)越多的應(yīng)用程序選擇使用Vue來(lái)構(gòu)建前端,本文將探討在Vue應(yīng)用中實(shí)施重新發(fā)布和熱更新的最佳實(shí)踐,需要的朋友可以參考下
2024-09-09
axios的interceptors多次執(zhí)行問(wèn)題解決
這篇文章主要為大家介紹了axios中interceptors多次執(zhí)行問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
vue 優(yōu)化CDN加速的方法示例
這篇文章主要介紹了vue 優(yōu)化CDN加速的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下
2021-07-07
vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來(lái)的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)，在子組件上顯示不出來(lái)，本文給大家分享兩種解決方案幫助大家解決這個(gè)問(wèn)題,需要的朋友可以參考下
2023-08-08
vue中使用vee-validator完成表單校驗(yàn)方案
vee-validator是一種基于vue模板的輕量級(jí)校驗(yàn)框架。本文主要討論的是vee-validator校驗(yàn)方案，感興趣的朋友跟隨小編一起看看吧
2019-11-11