Vue Extends 擴展選項用法完整實例
更新時間：2019年09月17日 09:07:25 作者：Json____
這篇文章主要介紹了Vue Extends 擴展選項用法,結合完整實例形式分析了Vue Extends 擴展選項相關使用技巧與操作注意事項,需要的朋友可以參考下
本文實例講述了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:{
//如果方法名一樣 他只觸發(fā)構造器里的方法 擴展不觸發(fā) 混入選項也一樣
add:function(){
this.num++
console.log('我是擴展出來的方法')
}
}
};
var app = new Vue({
el:'#app',
data:{
num:1
},
updated:function(){
console.log('我是構造器觸發(fā)的')
},
methods:{
add:function(){
this.num++
console.log('我是原生的方法')
}
},
//擴展不能為數(shù)組 混入是為數(shù)組
extends:extendObj
})
</script>
運行結果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
實例詳解Vue項目使用eslint + prettier規(guī)范代碼風格
這篇文章主要介紹了Vue項目使用eslint + prettier規(guī)范代碼風格,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2018-08-08
解決Electron?store的commit和dispatch不好用問題
這篇文章主要介紹了解決Electron?store的commit和dispatch不好用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue深度優(yōu)先遍歷多層數(shù)組對象方式(相當于多棵樹、三級樹)
這篇文章主要介紹了vue深度優(yōu)先遍歷多層數(shù)組對象方式(相當于多棵樹、三級樹)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了VUE簡單的定時器實時刷新的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要介紹了解決VUE的對話框el-dialog點擊外部消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Blob?對象表示一個不可變、原始數(shù)據(jù)的類文件對象，這篇文章主要介紹了vue使用blob下載文件遇到的問題記錄,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue5中的事件修飾符(style)和template，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何實現(xiàn)Toast輕提示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了Vue2 SSR 緩存 Api 數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這是一個實現(xiàn)平滑滾動的函數(shù),可以讓頁面在滾動到指定位置時產(chǎn)生緩動效果,本文給大家介紹了如何在在Vue頁面中實現(xiàn)平滑滾動功能,<BR>,文中詳細的代碼講解供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-12-12