2020-12-16

vue基础学习第二天

计算属性

使用原因：解决在模板中放入太多的逻辑会让模板过重且难以维护的。
模板应该是简单的声明式逻辑而不是一大堆难以解决的逻辑
例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

添加计算属性

1. 计算属性：看起来是一个函数，但是要当成属性来使用，它的地位类似于在data中声明的成员
   2.只在计算属性中的依赖项发生了变化 ，就会自动的触发这个计算属性
   2.1 所谓依赖项：就是在计算属性中通过this调用的data中的成员

export default {
  data () {
    return {
      msg: 'Hello World
    }
  },
  // 添加计算属性
  computed: {
  
    myfun () {
      console.log(123);
      return this.msg.split('').reverse().join('')
    }
  }
}

计算机属性和函数的区别

函数：只要你调用，就会执行，不管依赖项是否有变化（会执行多次）
计算机属性：调用会执行，存在依赖项（相同的函数只会执行一次）
详细说明可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问myfun计算属性会立即返回之前的计算结果，而不必再次执行函数。

ref和$refs

ref就相当于元素的标识,是一个唯一值
$refs可以用来获取所有拥有ref设置的元素，它是一个 对象
用途：多用于页面打开之后自动让指定的文本框获取焦点，提升用户体验

  编号:<input type="text"
             v-model="userdata.id"
             ref='userid'>
      品牌名称:<input type="text"
             v-model="userdata.brandName"
             ref='username'>


 mounted () {
    // $refs:可以获取所有拥有ref属性的元素，返回一个对象
    console.log(this.$refs)
    this.$refs.username.focus()
  }

群收款案例

需求：1.总金额输入框输入多少钱，输入框下面显示相应的价格
2.用餐参与人数平分总金额并在下方显示对应的平均价格和人的名字
3.点击删除按钮删除对应的人数的行

做法：
和平常的 js和ajax没有什么差别
1 html静态结构
2.要实现动态渲染，各先模拟出数据
3 渲染模板
4 调用相应的函数

效果图

代码

<template>
  <div id="app">
    <h2>总金额</h2>

    <input type="number"
           v-model="totalmoney">
    <br>
    <span>今天吃饭用了{{totalmoney}}元</span>

    <h2>用餐参与人</h2>

    <input type="text"
           v-model="list.name">
    <button @click="add">添加</button>

    <ul>
    //遍历list数组
      <li v-for="(value,index) in list"
          :key="index">
        <p> 第{{index}}位: {{value.name}}, </p>
        //求平均值
        <span>每个人需要支付 {{Math.ceil(counts = totalmoney/ index)}} 元</span> <button @click="del(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      totalmoney: "",//总价价钱
      names: "",//名字
      counts: 0, //求结果
      list: [{ name: "", count: "" },
      ]
    }
  },
  methods: {
  //添加功能
    add () {
    //{ ...this.list }解构
      this.list.push({ ...this.list })
    },
    //删除功能
    del (index) {
    //delete为关键字不可以用使用splice代替
    //splic(当前索引值开始，删除的个数）
      this.list.splice(index, 1)
    }
  },
}


</script>

<style>
li {
  list-style: none;
}
</style>