二、Vue实例对象及其属性

最新推荐文章于 2024-05-21 10:53:41 发布
最新推荐文章于 2024-05-21 10:53:41 发布
阅读量6.4k 收藏 35
点赞数 3
分类专栏： Vue 前端 文章标签： vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lvruoyu/article/details/124306792
版权

01. Vue实例

Vue实例

通过new关键字实例化Vue({})构造函数

<script>
        new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            }
        })
 </script>

Vue实例配置对象

选项说明
dataVue实例数据对象
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访问原始数据对象。Vue实例也代理了data对象上所有的属性，因此访问vm.name相当于访问vm. data访问原始数据对象。Vue实例也代理了data对象上所有的属性，因此访问vm.name相当于访问vm.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>

在这里插入图片描述

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>
filters过滤器--在v-bind语法中使用

在这里插入图片描述

铲屎官白茶
关注
  • 3
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue2基础-Vue对象介绍
ning_xiao_xuan的博客
11-08 460
Vue2基础-Vue对象介绍
vue实例对象及其元素释意以及vue3指令
qq_63524487的博客
05-04 918
类似于创建一个对象,里面包含钩子函数,data,methods.components等vue实例的对象data 主要是用来存放数据的 Vue框架会检测data的数据变化,自动更新到html上。
Vue 对象
最新发布
翱翔-蓝天
05-21 436
在 Vue.js 中，操作对象是常见的任务之一。Vue 提供了许多方法和指令来方便地操作对象，包括动态添加属性、遍历对象、响应式更新等。以下是一些常见的对象操作及其详细说明和示例。
Vue实例的基本属性
m0_74331185的博客
12-27 1012
Vue实例的基本属性
Vue实例的常用属性 Vue实例常用方法
努力！加油！！
03-07 640
Vue学习
VUE（vue对象的简单属性）
weixin_34174132的博客
06-30 346
一：全局过滤器和局部过滤器 　　ps：不管是局部过滤器还是全局过滤器，一定都要有renturn 返回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE的过滤器</title> <...
浅析Vue实例以及生命周期
10-18
在上面的例子中，`vm`是Vue实例，`#app`是Vue实例挂载的DOM元素，`message`是存储在`data`对象中的数据。Vue实例内部有许多以"$"开头的方法和属性，如`vm.$data`和`vm.$el`，它们提供了对数据和挂载元素的访问。 ...
VUE学习项目实例.rar
03-01
这个“VUE学习项目实例”是一个涵盖前端到后端的完整示例，为初学者提供了深入理解Vue.js及其应用的良好平台。 在前端部分，Vue-mobbile-learning-master可能包含了以下关键知识点： 1. **Vue CLI**：Vue的命令行...
vue抽出组件并传值实例
10-15
在示例中，我们首先在JS文件中定义了一个名为`wifiBright`的对象，它包含一个`install`方法，然后在`main.js`中使用`Vue.use()`来全局注册： ```javascript // wifiBright.js import wifiBrightComponent from './...
vue props 单项数据流实例分享
10-15
本文将深入探讨 `vue props` 的单项数据流原理及其实践。 **什么是 Vue Props 单向数据流？** Vue 的 `props` 是一种机制，允许父组件向子组件传递数据。这个过程是单向的，意味着一旦父组件的数据传递给子组件，...
Vue学习之常用指令实例详解
10-15
创建一个Vue实例需要指定一个挂载的目标元素（通过`el`选项），以及数据对象（通过`data`选项）。例如： ```javascript let app = new Vue({ el: '#app', data: { msg: '显示的内容' } }); ``` 在这个例子...
vue实例的属性和方法
2401_84150107的博客
04-13 956
注意：当给响应式数据对象（或数组）添加新属性，视图不更新的处理方法。data:{a:{school:2,room:‘’} , // 1,声明时写arr:[50]});vm.setvma′room′82.用set(vm.a,'room'，8） // 2.用setvma′room′8//2.用set添加对于要设很多属性的话，可以替换原对象，vm.a = {…this.a,room:‘xxx’} //3 赋值新的对象(改变堆内存)
Vue实例的属性和方法
qq_36303110的博客
01-05 944
Vue实例的属性 vm.$data Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。 vm.$props 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。 vm.$el Vue实例使用的根DOM元素 vm.$options 用于当前Vue实例的初始化选项，在选项中包含自定义属性可以通过this.$options获取该自定义属性 vm.$parent 获取父实例(父组件) vm.$root 获取当前
vue对象、数组操作
amazingLiQin的博客
07-14 3417
vue中数组、对象基础操作 相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了. 如果对象已经有某个响应式属性了，没必要再$set，直接赋值。 判断对象本身有无某个属性：Object的hasOwnProperty()方法，返回一个布尔值，判断对象是否包含特定的自身（非继承...
vue创建的对象内部属性解析（持续更新）
m0_60030316的博客
01-05 337
用于标识对象是否为只读对象。
解释一下什么是vue实例
mzrxLXR的博客
08-03 4815
问题网址 : http://bbs.daxiangclass.com/?thread-76.htm vue中的实例 类似于创建一个对象,里面包含钩子函数,data,methods.components等 vue实例的对象data 主要是用来存放数据的 Vue框架会检测data的数据变化,自动更新到html上 计算属性computed 主要是用来一些比较复杂的逻辑计算 虽然{{}} 是非常便...
vue 数组，对象，对象数组
weixin_57467236的博客
10-11 4737
Vue 数组，对象数组，对象
2022-09-08 vue给对象新增属性
热门推荐
ZT1090258642的博客
09-08 1万+
解决：如果你要为一个对象添加一个属性的话，且没有在源对象里面定义这个属性，添加之后是不会。在vue代码中,只要是在data对象里定义的内容（student）,1.可以在对象中先定义你需要在使用中用到的对象，设置为空。2.使用this.$set(对象,属性,值);问题：在实例创建之后添加新的对象，然后新增属性。但是我们在对象（student）上。值会变化，但是视图不会实时变化。使用Vue.$set()
在vue中给对象扩展属性的方法
感恩、奋进、自信
05-08 7808
在vue中给对象扩展属性的方法。如下图所示给seller对象扩展一个属性id，利用立即执行函数给id赋值                                                             图1然后将从后台返回来的数据赋值给seller对象，如下图所示：                                                       ...
vue文档(重点学习).docx
02-15
vue文档(重点学习).docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铲屎官白茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值