网站导航
> 文档中心 > 二、Vue实例对象及其属性

二、Vue实例对象及其属性

网友: 文档中心 2022-04-22 14:00:44

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>

在这里插入图片描述

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语法中使用

在这里插入图片描述

网络标签：

相关问题