美文网首页
(六)extends 扩展实例

(六)extends 扩展实例

作者: 我拥抱着我的未来 | 来源:发表于2018-02-15 18:13 被阅读0次

    本节知识点

    • 和上节minxins有点类似,他也是扩展出来的

    使用指南

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
      <div id="app">
           <p>{{message}}</p>
          <button @click="add">增加</button>
      </div>
    </body>
    <script>
        var bbb = {
            created:function(){
                console.log("我是被扩展出来的");
            },
            methods:{
                add:function(){
                    console.log("我是扩展出来增加的方法")
                }
            }
        };
        var app = new Vue({
            el:"#app",
            data:{
                message:2
            },
            methods:{
                add:function(){
                    this.message++;
                    console.log("我是原生的方法");
                }
            },
            extends:bbb
    
    
        })
    </script>
    </html>
    
    • 这样就会发现扩展出来的add方法他不会执行了。而是执行了里面原生的了

    更改插入值得时候符号

    我们需要显示值得时候一般用{{}}
    但是有的时候需要把{{}}变成别的符号

    delimiters : ['${','}']
    

    现在我们的值就变成 ${}

    相关文章

      网友评论

          本文标题:(六)extends 扩展实例

          本文链接:https://www.haomeiwen.com/subject/ahdutftx.html