美文网首页
(六)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