vue基础（三）——vue实例化对象

最新推荐文章于 2023-05-10 16:32:29 发布

回首＆逝去～

最新推荐文章于 2023-05-10 16:32:29 发布

阅读量2.7k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_43957263/article/details/121741531

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

摘要

今天来分享一些vue对象中最常见的几个属性。其实前两天我们已经学过两个属性了，分别是el和data。他们的意思分别是挂载的元素和数据集合。今天我们学习我们平时最常用的Methods方法合集 和Computed 计算属性。

1、Methods方法合集

Methods和它本身的意思一样是用来定义方法的，简单来说就是来定义我们js开发时定义的函数的。

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div :class="getClass()">{{ message }}</div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "222222",
                active: "aaaaa",
                aaa: "bbb"
            },
            methods: {
                getClass: function() {
                    console.log(this)
                    return [this.active, this.aaa];
                }
            },
        });
    </script>
</body>

</html>

结果：

可以看出，在执行了getClass之后，class属性已经应用上了。这里有两点需要注意的。

1、在methods中使用data时，我加了一个this，这个this其实就是vue实例对象，通过控制台打印我们也看到了。

2、我在class中使用getClass时是加了小括号的，这意味着我们最后获得的是return后的结果，我们以后在绑定事件时，一般是不加小括号的。

2、computed计算属性

1、计算属性在写法上和methods一样

2、计算属性函数其实本质是一个属性对象，当调用属性时，会自动调用属性的get方法

3、平时主要用于数据的转化（例如算总价格，格式化时间）

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>总书价：{{ totalPirce }}</div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                books: [{
                    name: "123",
                    pirce: 111
                }, {
                    name: "123",
                    pirce: 111
                }, {
                    name: "123",
                    pirce: 111
                }, {
                    name: "123",
                    pirce: 111
                }]
            },
            computed: {
                totalPirce: function() {
                    var pirces = 0;
                    for (var i = 0; i < this.books.length; i++) {
                        pirces += this.books[i].pirce;
                    }
                    return pirces;
                }
            }
        });
    </script>
</body>

</html>

结果：

计算属性和methods的区别

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{ name }}</div>
        <div>{{ name }}</div>
        <div>{{ name }}</div>
        <div>{{ name }}</div>
        <div>{{ getname() }}</div>
        <div>{{ getname() }}</div>
        <div>{{ getname() }}</div>
        <div>{{ getname() }}</div>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                firstName: "123",
                lastName: "456"
            },
            computed: {
                name: function() {
                    console.log("11111111"); //调用四次只打印了一次111111111，属性不变的时候不会重复执行，直接返回缓存
                    return this.firstName + " " + this.lastName;
                }
            },
            methods: {
                getname: function() {
                    console.log("2222222"); //打印四次，无缓存，每次调用都要执行
                    return this.firstName + " " + this.lastName;
                }
            },
        });
    </script>
</body>

</html>

结果：