VUE学习之路（三）----选项之extends

最新推荐文章于 2024-07-11 11:58:12 发布

lxhguard

最新推荐文章于 2024-07-11 11:58:12 发布

阅读量4.7k

点赞数 1

分类专栏： VUE 文章标签： extends

本文链接：https://blog.csdn.net/ferrysoul/article/details/81450265

版权

VUE 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> extends</title>
    <script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
    <h1> extends</h1>
    <hr>
    <div id="app">
      {{ num }}
      <p><button @click="add">add</button></p>
    </div>

    

    <script>
        var extendsObj={
            updated : function(){
                console.log('我是扩展的updated');
            },
            methods:{
                //下面这个并没有被执行，如果方法名一样，只执行构造器里面的原生方法，混入跟扩展类似
                add:function(){
                    console.log('我是扩展出来的方法');
                    this.num++;
                }
            }
        }

        
        var app= new Vue({
            el:"#app",
            data : {
                num:1
            },
            methods:{
                add:function(){
                    console.log('我是原生的方法');
                    this.num++;
                }
            },
            //全局的最优先，混入的先执行，原生的后执行，下面的后执行
            updated:function(){
                console.log('我是原生的update');
            },
            //下面扩展放的是对象，而混入放的是数组 
           extends : extendsObj
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> extends</title>
    <script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
    <h1> extends</h1>
    <hr>
    <div id="app">
      ${ num }
      <p><button @click="add">add</button></p>
    </div>

    

    <script>
        var extendsObj={
            updated : function(){
                console.log('我是扩展的updated');
            },
            methods:{
                //下面这个并没有被执行，如果方法名一样，只执行构造器里面的原生方法，混入跟扩展类似
                add:function(){
                    console.log('我是扩展出来的方法');
                    this.num++;
                }
            }
        }

        
        var app= new Vue({
            el:"#app",
            data : {
                num:1
            },
            methods:{
                add:function(){
                    console.log('我是原生的方法');
                    this.num++;
                }
            },
            //全局的最优先，混入的先执行，原生的后执行，下面的后执行
            updated:function(){
                console.log('我是原生的update');
            },
            //下面扩展放的是对象，而混入放的是数组 
           extends : extendsObj,
           delimiters:['${','}']
        })
    </script>
</body>
</html>

lxhguard

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE学习之路（三）----选项之extends

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录