二、Vue实例对象及其属性_vue 撖寡情-CSDN博客

本文链接：https://blog.csdn.net/lvruoyu/article/details/124306792

本文深入介绍了Vue实例的创建，包括如何通过`new Vue()`初始化，设置`el`绑定DOM元素，`data`定义响应式数据，以及`methods`定义方法。同时，讨论了`computed`计算属性的缓存特性和`watch`状态监听器的使用。还提到了`filters`在模板中格式化数据的应用，展示了在插值和`v-bind`指令中使用过滤器的例子。

摘要由CSDN通过智能技术生成

01. Vue实例

Vue实例
通过new关键字实例化Vue({})构造函数
<script>
        new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            }
        })
 </script>
Vue实例配置对象
选项说明
data Vue实例数据对象
methods 定义Vue实例中的方法
components 定义子组件
computed 计算属性
filters 过滤器
el 唯一根元素
watch 监听数据变化

el唯一根标签

在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。

data初始数据

Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。

Vue实例创建之后，可以通过vm. $d a t a 访问原始数据对象。 V u e 实例也代理了 d a t a 对象上所有的属性，因此访问 v m . n a m e 相当于访问 v m .$ data.name。
<!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>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
            {{msg}}
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Vue实例创建成功"
            }
        })
    </script>
</body>
</html>

选项	说明
data	Vue实例数据对象
methods	定义Vue实例中的方法
components	定义子组件
computed	计算属性
filters	过滤器
el	唯一根元素
watch	监听数据变化

methods定义方法

methods属性用来定义方法，通过Vue实例可以直接访问这些方法
在定义的方法中，this指向Vue实例本身
定义在methods属性中的方法可以作为页面中的事件处理方法使用
当事件触发后，执行相应的事件处理方法

<!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>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
            {{msg}}
            <br>
            <button @click="showInfo()"> 单击 </button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Vue实例创建成功"
            },
            methods: {
                showInfo(){
                    this.msg = "Hello Methods"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

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>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
            {{msg}}
            <br>
            <button @click="showInfo()"> 单击 </button>
            <br>
            单价 ： {{price}} <br>
            数量 ： {{num}} <br>
            总价 ： {{totlaPrice}}
           <button @click="num++"> 单击 </button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Vue实例创建成功",
                price: 100,
                num: 3
            },
            methods: {
                showInfo(){
                    this.msg = "Hello Methods"
                }
            },
            computed: {
                totlaPrice() {
                    return this.price * this.num;
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

watch状态监听

Vue中的事件处理方法是根据用户所需自行定义的，它可以通过单击事件、键盘事件等触发条件来触发，但不能自动监听当前Vue实例的状态变化。为解决这个问题，Vue提供了watch状态监听的功能，只需要监听当前Vue实例中的数据变化，就会调用当前数据所绑定的事件处理方法。

<!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>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
            {{msg}}
            <br>
            <button @click="showInfo()"> 单击 </button>
            <br>
            单价 ： {{price}} <br>
            数量 ： {{num}} <br>
            总价 ： {{totlaPrice}} <br>
            <button @click="num++"> 单击 </button> <br>
            city :<input type="text" v-model="city">
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Vue实例创建成功",
                price: 100,
                num: 3,
                city: "shanghai"
            },
            methods: {
                showInfo(){
                    this.msg = "Hello Methods"
                }
            },
            computed: {
                totlaPrice() {
                    return this.price * this.num;
                }
            },
            watch: {
                city(newName,oldName){
                    newName = "new " + newName;
                    oldName = "old " + oldName;
                    console.log(newName,oldName);
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

filters过滤器

在前端页面开发中，通过数据绑定可以将data数据绑定到页面中，页面中的数据经过逻辑层处理后展示最终的结果。数据的变化除了在Vue逻辑层进行操作外，还可以通过过滤器来实现。过滤器常用于对数据进行格式化，如字符串首字母改大小写，格式化等。过滤器有两种使用方式：

filters过滤器--{{}}在插值语法中使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMqDXJtI-1650278010066)(Vue.js教程.assets/1650274608787.png)]

<!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>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
            {{msg}} <br>
            
            <br>
            <button @click="showInfo()"> 单击 </button>
            <br>
            单价 ： {{price}} <br>
            数量 ： {{num}} <br>
            总价 ： {{totlaPrice}} <br>
            <button @click="num++"> 单击 </button> <br>
            city :<input type="text" v-model="city">

            {{msg | toUpcase}}
            <div v-bind:id="dataId | formatId"> hello world </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Vue实例创建成功",
                price: 100,
                num: 3,
                city: "shanghai",
                dataId: "div1"
            },
            methods: {
                showInfo(){
                    this.msg = "Hello Methods"
                }
            },
            computed: {
                totlaPrice() {
                    return this.price * this.num;
                }
            },
            watch: {
                city(newName,oldName){
                    newName = "new " + newName;
                    oldName = "old " + oldName;
                    console.log(newName,oldName);
                }
            },
            filters: {
                // 将value转换成大写
                toUpcase(value){
                    return value ? value.toUpperCase() : ""
                },
                formatId(value){
                    return value ? value.charAt(1) + value.indexOf("d") : "";
                }
            }
        });
    </script>
</body>
</html>