VUE框架计算属性的实际使用和简写形式------VUE框架

Dear 丶 2024-02-17 11:33 8阅读 0赞

> ###  ###
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <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">
>             <h1>{
>         {msg}}</h1>
>             <input type="text" v-model:value="info"/>
>             <br>
>             
>             <h1>反转的信息:{
>         {reInfo()}}</h1>
>             <h1>计算属性的实现:{
>         {hehe}}</h1>
>             <h1>计算属性的简写:{
>         {reverseInfo}}</h1>
>         </div>
>         <script>
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Heelo",
>                     info : ""
>                 },
>                 methods : {
>                     reInfo()
>                     {
>                         return this.info.split('').reverse().join('');
>                     }
>                 },
>                 // 什么是VUE的计算属性
>                 // 使用VUE的原有属性,经过一系列计算运算后,最终得到了一个全新的属性叫做计算属性
>                 // VUE的原有属性,data对象当中的属性叫做VUE的原有属性
>                 // 全新的属性生成后,就与data中的属性无关了,新的属性有自己的属性名和属性值
>                 // 计算属性怎么写
>                 // 计算属性有缓存机制,可以从缓存内获取,不需要每次调用方法去获得,提高了效率
>                 computed : {
>                     // 完整写法,set不需要才可以使用简写方式
>                     hehe : {
>                         // 可以编写set和get方法
>                         // 当读取计算属性的值的时候,get方法自动调用
>                         // 第一个访问时机,第一次访问,第二次时计算属性管理的属性改变也会调用
>                         // 这里同样不能写为箭头函数,因为箭头函数的this指向window对象
>                         get()
>                         {
>                             console.log("GET方法");
>                             // console.log(this === vm);
>                             return this.info.split('').reverse().join('');
>                         },
>                         // 但修改计算属性值的时候,调用set方法
>                         set(val)
>                         {
>                             console.log("SET方法");
>                             // console.log(this === vm);
>                             // 怎么修改计算属性的值
>                             // 计算属性变化取决于计算属性关联的原属性的值
>                             // 所以我们修改原始属性就好了
>                             this.info = val;
>                         }
>                     },
>                     reverseInfo()
>                     {
>                         return this.info.split('').reverse().join('');
>                     }
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <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">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> <input type="text" v-model:value="info"/>
> 
> <br>
> 
> 
> 
> <h1>反转的信息:\{ \{reInfo()\}\}</h1>
> 
> <h1>计算属性的实现:\{ \{hehe\}\}</h1>
> 
> <h1>计算属性的简写:\{ \{reverseInfo\}\}</h1>
> 
> </div>
> 
> <script>
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Heelo",
> 
> info : ""
> 
> \},
> 
> methods : \{
> 
> reInfo()
> 
> \{
> 
> return this.info.split('').reverse().join('');
> 
> \}
> 
> \},
> 
> // 什么是VUE的计算属性
> 
> // 使用VUE的原有属性,经过一系列计算运算后,最终得到了一个全新的属性叫做计算属性
> 
> // VUE的原有属性,data对象当中的属性叫做VUE的原有属性
> 
> // 全新的属性生成后,就与data中的属性无关了,新的属性有自己的属性名和属性值
> 
> // 计算属性怎么写
> 
> // 计算属性有缓存机制,可以从缓存内获取,不需要每次调用方法去获得,提高了效率
> 
> computed : \{
> 
> // 完整写法,set不需要才可以使用简写方式
> 
> hehe : \{
> 
> // 可以编写set和get方法
> 
> // 当读取计算属性的值的时候,get方法自动调用
> 
> // 第一个访问时机,第一次访问,第二次时计算属性管理的属性改变也会调用
> 
> // 这里同样不能写为箭头函数,因为箭头函数的this指向window对象
> 
> get()
> 
> \{
> 
> console.log("GET方法");
> 
> // console.log(this === vm);
> 
> return this.info.split('').reverse().join('');
> 
> \},
> 
> // 但修改计算属性值的时候,调用set方法
> 
> set(val)
> 
> \{
> 
> console.log("SET方法");
> 
> // console.log(this === vm);
> 
> // 怎么修改计算属性的值
> 
> // 计算属性变化取决于计算属性关联的原属性的值
> 
> // 所以我们修改原始属性就好了
> 
> this.info = val;
> 
> \}
> 
> \},
> 
> reverseInfo()
> 
> \{
> 
> return this.info.split('').reverse().join('');
> 
> \}
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>