Vue extends扩展选项(类似混入)

最新推荐文章于 2024-05-21 09:36:52 发布

Lvdon9

最新推荐文章于 2024-05-21 09:36:52 发布

阅读量1.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37995109/article/details/88727345

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
    <h1>extends(和混入比较像,调用方法不一样)</h1>
    <hr>
    <div id="app">
        ${num}
         <button @click="add">增加</button>
    </div>
    <script type="text/javascript">
    	var extendsObj={
    		created(){
	    		console.log('我是扩展update');	
    		},
    		 methods:{
    		 	//和构造器里面方法名字一样,只执行构造器里面的方法
                add:function(){
                    console.log('我是被扩展出来的方法！');
                    this.num++
                }
            }
    	};
    	
        var app=new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods:{
            	add(){
            		console.log('我是原生的方法');
            		this.num++;
            	}
            },
            updated(){
	    		console.log('我是原生update');	
    		},
            extends:extendsObj,
            //修改插值
            delimiters:['${','}']
        })
    </script>
</body>
</html>

Lvdon9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue extends扩展选项(类似混入)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...
复制链接

扫一扫

专栏目录