extends及delimiters选项

最新推荐文章于 2024-01-20 23:56:40 发布

bug的生产者

最新推荐文章于 2024-01-20 23:56:40 发布

阅读量137

点赞数

分类专栏： 3.Vue的选项

3.Vue的选项专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.扩展的先执行，原生的后执行
2.扩展的方法和原生的方法相同时，扩展的方法不执行
3.只能有一个扩展
在这里插入图片描述

<!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 src="../assets/js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>extends</h1>
    <hr />
    <div id="app">
        <p>{{num}}</p>
        <p><button @click="add" >点我增加</button></p>
    </div>
    <script>
        var extendObj={
            updated(){
                console.log('我是扩展的updated')
            },
            methods:{
                add(){
                    console.log('我是扩展出来的方法')
                    this.num++
                }
            }
        }
        var app = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods:{
                add(){
                    console.log('我是原生的方法')
                    this.num+=1
                }
            },
            updated(){
                console.log('我是原生的updated')
            },
            extends:extendObj
        })
    </script>
  </body>
</html>

4.delimiters----改变插值的符号

<!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 src="../assets/js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>extends</h1>
    <hr />
    <div id="app">
        <p>${num}</p>
        <p><button @click="add" >点我增加</button></p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods:{
                add(){
                    this.num+=1
                }
            },
            delimiters:['${','}']
        })
    </script>
  </body>
</html>

bug的生产者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extends及delimiters选项

1.扩展的先执行，原生的后执行2.扩展的方法和原生的方法相同时，扩展的方法不执行3.只能有一个扩展<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-w...
复制链接

扫一扫

专栏目录