Vue入门学习笔记4 vue原生构造器的选项详解

最新推荐文章于 2025-04-15 11:19:37 发布

会左勾拳的螳螂

最新推荐文章于 2025-04-15 11:19:37 发布

阅读量1.9k

点赞数 2

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/RuiHe_pan/article/details/106316718

版权

这篇博客详细解析了Vue原生构造器的多个选项，包括methods、mixins、extends、watch、delimiters、computed和propsData。通过实例和应用场景，介绍了每个选项的功能和用法，如methods中函数的定义和调用，mixins的全局混入，extends的扩展选项，以及watch用于监控值变化的能力。此外，还探讨了自定义插值符和计算选项的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue入门学习笔记4 vue原生构造器的选项详解

前言：关于vue我已经更了3篇博文了，这篇是第4篇，关于Vue原生构造器选项，包括methdos、watch、mixins、extends、delimiters、computed、propsData，下面我们一一来以例子为例进行讲解。

Tip：下面的例子要注意看注解，注解才是精髓。

1、methdos Option 方法选项

应用场景：定义执行函数，例如我们写一个点击事件的add方法，此时我们就应该在method里定义。

例子描述：学习这个methods选项，我们要掌握
1、methods里的函数是如何传值的；
2、自定义组件如何调用methods里的函数；
3、构造器作用域外如何调用methods里的函数；
4、了解点击事件的event参数。

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>methdos Option 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>methdos Option 实例</h1>
    <hr>
    <div id="app">
        {
   {
   num}} <br>
        <!-- 
            1、methods传值 
            2、event 相当于原始javascript的mouse event 鼠标事件的一系列事件【了解即可】
        -->
        <p><button @click="add(2,$event)">add</button></p>
        <!-- 
            3、 自定义组件调用methods里的函数 
              .native修饰符的作用是调用原生构造器下的methods选项里的成员
        -->
        <p><btn @click.native="add(2)"></btn></p>
    </div>
    <!-- 4、 作用域外（构造器作用域外）调用构造器里的methods选项下的成员函数add -->
    <button onclick="app.add(3)">外部add</button>

    <script type="text/javascript">
        var btn = {
   
            template:`<button>组件add</button>`
        }
        var app = new Vue({
   
            el:"#app",
            data:{
   
                num : 0
            },
            components:{
   
                "btn":btn
            },
            methods:{
   
                add:function(a,event){
   
                    if(a != " "){
   
                        this.num+=a
                    }else{
   
                        this.num++
                    }
                    console.log(event)
                }
            }
        })
    </script>
</body>
</html>

2、mixins option 混入选项操作

应用场景：

当项目已经上线了，构造器已经成熟了的时候，突然接到新的需求时
当出现很多公共的方法属性时，也就是说很多构造器或者其他作用域都要调用的一些方法属性时

例子说明：
1、掌握构造器混入与全局混入的写法
2、通晓全局混入与构造器里的混入选项和原生谁先执行

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mixins option</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <!-- 
        应用场景：
        1 当项目已经上线了，构造器已经成熟了的时候&#

最低0.47元/天解锁文章