二、Vue实例对象及其属性

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

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

二、Vue实例对象及其属性相关推荐

实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例
实例对象的属性和原型对象中的属性重名问题 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
理解Python中的类对象、实例对象、属性、方法
class Animal(object): # 类对象age = 0 # 公有类属性__like = None # 私有类属性def __init__(self): # 魔法方法self.name = ...
vue实例中调用外部js_js文件中引用vue实例对象
原因我使用了iView的框架,想要把表格的配置提取出来,但是表格里面的操作需要用到this,所以就需要在js文件中引用vue实例. 方法 utils - local-data.js // vue实例 ...
Vue——基础(对象、属性样式操作、条件、循环、事件、绑定)
目录 vue对象 vue操作属性 vue操作样式三元运算条件渲染循环语句 click事件双向绑定数据 vue对象 1.创建: new Vue({ - }) 2.属性: 属性描述 el 需要管 ...
组件的data属性（有别于Vue实例的data属性）
转载于:https://www.cnblogs.com/JAVA-STUDYER/p/11038381.html
Vue中的vm和VueComponent的实例对象
关于vm和vc,vm为Vue的实例对象,vc为VueComponent的是对象. 一.vm 1.Vue的实例对象,以后简称vm. (1) vm的隐式原型属性指向Vue的原型对象. (2) VueCom ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
vue入门（二）---vue实例
创建一个vue实例之后,向其中传入选项对象(数据.DOM.生命周期钩子.资源.组合.其他) 数据与方法: 当数据改变时,视图会重新渲染,只有实例被创建时存在的属性才是响应式的,vm后添加的属性的改动不 ...
Vue3（撩课学院）笔记01-创建实例对象，v-for遍历，时间绑定，传参，时间修饰符，计算属性，v-if，v-show，深拷贝，v-model与各类表单的绑定
1.创建vue实例对象 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

二、Vue实例对象及其属性

01. Vue实例

二、Vue实例对象及其属性相关推荐

最新文章

热门文章