60秒带你了解Vue2.0的选项

最新推荐文章于 2024-01-09 17:39:44 发布

三杯温开水

最新推荐文章于 2024-01-09 17:39:44 发布

阅读量193

点赞数

分类专栏：知识总结文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_47024018/article/details/115251323

版权

知识总结专栏收录该内容

37 篇文章 4 订阅

订阅专栏

快速了解Vue选项

首先我们要先了解一下Vue的构造器有哪些？常见的有propsData、computed、methods、watch、mixins、extends ，接下来我们一起学习一下它们的使用和作用。

1、propsData

propsData 是用来传递数据，使用全局的扩展器可以利用propsData进行传递数据，我们自定义一个header标签，然后使用Vue中的extend扩展构造器，往构造器中传递我们的数据，然后通过new来挂载，传递我们的数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>propsData option 实例</title>
    <script src="../assets/js/vue.min.js"></script>
</head>

<body>
    <h1>propsData option 实例</h1>
    <hr>
    <header>

    </header>

    <script type="text/javascript">
        var header_a = Vue.extend({
            template: `<p>{{message}}-{{a}}</p>`,
            data: function() {
                return {
                    message: 'Hello , I am header!'
                }
            },
            // 外面挂载，这边插值
            props: ['a']
        });
        // header_a() 是一个函数，必须有括号； mount，不是mouth
        new header_a({
            propsData: {
                a: 1
            }
        }).$mount("header");
    </script>
</body>

</html>

这里有一点需要注意一下，就是new 后面跟的是函数，需要加括号，然后就是 $mount ，容易打错，写成mouth。

2、computed

computed的作用主要是对原来的数据进行改造然后进行输出，改造格式的编辑、大小写转换、排序等。最常见的就是我们写博客的时候，时间越早的越往后排，越晚的越往前排。下面我们看看两个例子：
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed 实例</title>
    <script src="../assets/js/vue.min.js"></script>
</head>

<body>
    <h1>computed 实例</h1>
    <hr>
    <div id="app">
        <p> {{newPrice}}</p>
        <ul>
            <li v-for="item in reversNews">
                {{item.title}} -- {{item.data}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var newsList = [{
            title: '1111111111111',
            data: '2021 / 3 / 26'
        }, {
            title: '2222222222222222',
            data: '2021 / 3 / 27'
        }, {
            title: '333333333333333333333',
            data: '2021 / 3 / 28'
        }, {
            title: '444444444444444444444',
            data: '2021 / 3 / 29'
        }, {
            title: '55555555555555555555555',
            data: '2021 / 3 / 30'
        }]
        var app = new Vue({
            el: '#app',
            data: {
                price: 100,
                newsList: newsList
            },
            computed: {
                newPrice: function() {
                    return this.price = '￥' + this.price + '元';
                },
                // 倒序排序
                reversNews: function() {
                    return this.newsList.reverse();
                }
            }
        })
    </script>
</body>

</html>

第一个就是改造一个price，通过computed中确立一个函数，然后进行修改，通过拼接的方式输出 “ ￥100元”
在这里插入图片描述
第二个就是一个ul的排序问题，我们重新定义一个函数，然后通过reverse()这个方法来实现倒叙排序(日期越后的越靠前)，这边创建一个newsList的数组，注意：里面的title和data是字符串，需要加引号。

3、methods

methods我们使用的很多，比如鼠标点击事件、鼠标失去焦点事件等我们使用methods方法来体现。我们通过一个例子来看看，点击按钮，商品数量+1的操作。然后我们在通过一个原生js的 native方式进行挂载，使其按钮也可以操作商品数量，最后一个就是外部调用，通过调用声明的变量名来执行方法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>methods 实例</title>
    <script src="../assets/js/vue.min.js"></script>
</head>

<body>
    <h1>methods 实例</h1>
    <hr>
    <div id="app">
        商品数量：{{a}}
        <p><button @click="add(2)">增加商品数量</button></p>

        <!-- 经常使用原生js native 进行挂载 -->
        <p>
            <btn @click.native="add(2)"></btn>
        </p>
    </div>

    <!-- 外部调用的话使用的是： 声明变量.方法名 -->
    <button onclick="app.add(3)">外部add</button>

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

</html>

4、watch

watch在Vue中是监控数据的意思，数据在程序中时刻变换，我们可以使用这个watch来进行监控，对其简单的案例进行了解watch的使用，本次使用的是通过温度的变化进行动态加载出对应的值，通过数组的方式进行查询。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch option 实例</title>
    <script src="../assets/js/vue.min.js"></script>
</head>

<body>
    <h1>watch option 实例</h1>
    <hr>
    <div id="app">
        <p>今日温度： {{wendu}}</p>
        <p>穿衣建议： {{chuanyi}}</p>
        <p>
            <button @click="shenggao()">升高温度</button>
            <button @click="jiangdi()">降低温度</button>
        </p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                wendu: 14,
                chuanyi: '夹克长裙'
            },
            methods: {
                shenggao: function() {
                    this.wendu += 5;
                },
                jiangdi: function() {
                    this.wendu -= 5;
                }
            },
            // 通过温度升高降低进行改变
            watch: {
                wendu: function(newVal, oldVal) {
                    if (newVal >= 26) {
                        this.chuanyi = '短袖';
                    } else if (newVal < 26 && newVal > 0) {
                        this.chuanyi = '夹克衣'
                    } else {
                        this.chuanyi = '棉衣羽绒服'
                    }
                }
            }
        })
    </script>
</body>

</html>

运行后的效果图
在这里插入图片描述
变化后的效果图：

5、mixins

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。在下述代码中，我们对Vue中的生命周期和JavaScript的生命周期做了一个对比，结论:Vue在前执行，原生的(JavaScript)后执行。
代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mixins 混入实例</title>
    <script src="../assets/js/vue.min.js"></script>
</head>

<body>
    <h1>mixins 混入实例</h1>
    <hr>
    <div id="app">
        {{num}}
        <p><button @click="add">add</button></p>
    </div>

    <script type="text/javascript">
        // Vue 中的生命周期是前执行，原生的是后执行

        var addConsole = {
            // 这里的updated是生命周期
            updated: function() {
                console.log('数据发生变化，变成了' + this.num);
            }
        };


        // 全局Vue
        Vue.mixin({
            updated: function() {
                console.log("我是全局的混入");
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function() {
                    this.num++;
                }
            },
            // 原生的updated
            updated: function() {
                console.log("我是原生的updated");
            },


            // 混入addConsole
            mixins: [addConsole]
        })
    </script>
</body>

</html>

为了区分其执行顺序，还加了一个全局的变量：看看执行结果：
点击add的按钮的时候，执行顺序: **全局 --> Vue --> 原生 **
在这里插入图片描述

6、extends

extends扩展和mixins很像,不同点是extends传入的是对象写法,而mixins是数组写法。需要注意：在 Vue.extend() 中它必须是函数。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>extends 混入实例</title>
    <script src="../assets/js/vue.min.js"></script>
</head>

<body>
    <h1>extends 混入实例</h1>
    <hr>
    <div id="app">
        <!-- {{num}} -->

        <!-- 这个是delimiters 的实现方法，解决插值有冲突的时候修改 -->
        ${num}
        <p><button @click="add">add</button></p>
    </div>

    <script type="text/javascript">
        // 这是扩展
        var extendsObject = {
            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: extendsObject,
            delimiters: ['${', '}']



        })
    </script>
</body>

</html>