VUE学习--03＜属性计算,ES6语法＞

最新推荐文章于 2024-04-12 03:46:10 发布

cos six

最新推荐文章于 2024-04-12 03:46:10 发布

阅读量167

点赞数

分类专栏： vue学习文章标签：学习 es6 java

本文链接：https://blog.csdn.net/qq_54708796/article/details/129161887

版权

vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、计算属性(重要)

1.计算属性的简单介绍

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

{{ message.split('').reverse().join('') }}
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性一般是没有set方法,只读属性.以下均将以只读属性讲解
呆萌小新@渊洁

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script src="../js/vue.js"></script>
  <div id="app">
<!--    之前方式start-->
    <h2>{{message1}} {{message2}}</h2>
    <h2>{{message1+message2}}</h2>
    <!--    之前方式end-->
    
<!--调用方法start-->
    <h2>{{getMessage()}}</h2>
<!--调用方法end-->

<!--    计算属性模式start-->
    <h2>{{Message}}</h2>
<!--    计算属性模式end-->
  </div>


<!--vue3写法-->
<script>
    const app = Vue.createApp({
        data() {
            return{
                message1: 'Hello ',
                message2: 'World!'
            }
        },
        methods: {
            getMessage() {
                return this.message1 + ' ' +this.message2;
            }
        },
        computed: {
            Message(){
                return this.message1 + ' ' +this.message2
            }
        }
    });
    app.mount('#app')
</script>

<!--vue2写法-->
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message1: 'Hello ',
      message2: 'World!',
    },
    methods: {
      getMessage() {
        return this.message1 + ' ' +this.message2;
      }
    },
    computed: {
      Message(){
        return this.message1 + ' ' +this.message2
      }
    }
  })
</script>
</body>
</html>

计算属性的复杂运用

案例:计算菜品的总价格

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script src="../js/vue.js"></script>

  <div id="app">
    <h2>总价格: {{TotalPrice}}</h2>
  </div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      diningRoom: [
        {id: '01', name: '红烧鲤鱼', price: 39},
        {id: '02', name: '炒黄瓜', price: 19},
        {id: '03', name: '拍黄瓜', price: 9},
        {id: '04', name: '油炸黄瓜', price: 9},
      ]
    },

    computed: {
      TotalPrice(){
        let result=0;
        for (let i in this.diningRoom){
          result += this.diningRoom[i].price;
        }
        return result;
      }
    }
  })
</script>
</body>
</html>

计算属性computed和方法methods的比较

1.计算属性在调用时,不需要加小括号.
2.计算属性computed是有缓存的,而methods没有.这就意味着计算属性在使用时只用被调用一次.这可以大大提高计算机运行效率.
代码测试如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./vue-2.4.0.js"></script>
  <div id="app">
<!--    简单拼接 语法过于繁琐-->
    <h2>{{message1+' '+message2}}</h2>
<!--    通过定义methods -->
    <h2>{{getMessage()}}</h2>
    <h2>{{getMessage()}}</h2>
    <h2>{{getMessage()}}</h2>
    <h2>{{getMessage()}}</h2>
<!--通过定义computed-->
    <h2>{{message}}</h2>
    <h2>{{message}}</h2>
    <h2>{{message}}</h2>
    <h2>{{message}}</h2>
  </div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message1: 'Hello World!',
      message2: '呆萌小新@ly',
    },
    methods: {
      getMessage(){
        console.log('getMessage');
        return this.message1 + ' ' + this.message2;
      }
    },
    computed: {
      message(){
        console.log('Message');
        return this.message1 + ' ' + this.message2;
      }
    }
  })
</script>
</body>
</html>

计算属性的值不能直接被修改!
有些伙伴可能会有疑问了,既然computed这么好用,那么为啥还要methods方法.我将通过以下案例来讲解
案例:实现简单的,邮箱登录与用户登录的切换

事件监听v-on/@click

1.基本介绍
当通过methods中定义方法，以供@click调用时，需要注意参数问题︰
情况一:如果该方法不需要额外参数，那么方法后的0可以不添加。

但是注意:如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二︰如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

2. v-on的修饰符

起泡反应

vue 修饰符帮助我们提供了一些方法来处理事件：
@xxxx.stop: 阻止事件冒泡
@xxxx.prevent: 阻止默认事件.
@xxxx.navite: 监听组件根元素的原生事件
@xxxx .once: 只会触发一次

v-if v-else-if v-else

这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./vue-2.4.0.js"></script>

  <div id="app">
    <p v-if="score>90">优秀</p>
    <p v-else-if="score>70">良好</p>
    <p v-else-if="score>60">及格</p>
    <p v-else>不及格</p>
    
  </div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 46,
    },
  })
</script>

</body>
</html>

input复用引发的问题.

小问题:
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。为什么会出现这个问题呢?

问题解答:
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。即尽可能保留一致元素,修改部分不同的元素.
Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
解决方案︰
如果我们不希望ue出现类似重复利用的问题，可以给对应的input添加key并且我们需要保证key的不同.
若key值相同,DOM则不会被修改渲染.