v-for注意事项、键盘修饰符enter事件、vue生命周期解释、计算属性get、set、watch -

注意事项

写v-for必须要写key
写法：写v-for时设置:key=”唯一值”

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>key的作用</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(item,name,index) of list" :key="item.index">
        <input type="radio" name="name">
        {{item.id}}、{{item.name}}
      </li>
    </ul>
    <input type="submit" value="提交答案" @click.prevent='handle'>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return{    list: [
          { id: "a", name: "天蓬老师" },
          { id: "b", name: "灭绝老师" },
          { id: "c", name: "西门老师" },
          { id: "d", name: "郭靖老师" },
        ]}
      },
      methods: {
        handle() {
          console.log(this.list);
        }
      },
    });
  </script>
</body>
</html>

v-if应用于数据渲染

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>key的作用</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click='flag=!flag' v-text="tips = flag ? `隐藏答案` : `显示答案`"></button>
    <span v-if="flag">{{msg}}</span>
  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: "A",
          flag: "ture",
          tips: "隐藏当"
        }
      },
      methods: {
        handle() {
          console.log(this.list);
        }
      },
    });
  </script>
</body>
</html>

键盘修饰符

按钮提交enter事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>key的作用</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="app">
    <button >提交</button>
    <input type="text" @keyup.enter="submit($event)" />
    <p  v-if="list.length > 0">
      <span v-for="(item,index) of list" :key="index">
        {{item}}
    </p>
    </span>
  </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          list: []
        };
      },
      methods: {
        submit(ev) {
          this.list.unshift(ev.target.value);
          ev.target.value = null;
        }
      },
    });
  </script>
</body>
</html>

vue框架生命周期

vue实例从创建到销毁的全过程
出生到结束的过程（创建、运行、销毁）
生命周期钩子=生命周期函数=生命周期函数
生命周期函数
beforecreate：表示实例被创建出来之前，执行
create：data，methods可以被初始化了
mounted：：el可以挂载了，data，methods可以被初始化了
updated：更新完可以输出

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{words}}</div>
    <script>
      // vue实例从创建到销毁的全过程
      // 像一个人从出生到死亡的完整流程
      // vue生命周期是函数,为每个周期提供了一个编程接口/钩子,开放出来供用户自定义
      const vm = new Vue({
        el: document.querySelector("#app"),
        data() {
          return {
            words: "大家晚上吃了吗?",
          };
        },
        // 实例创建之前,data不能用,el不可用
        beforeCreate() {
          console.log("实例创建前:", this.$el, this.words);
        },
        // 实例创建之后
        created() {
          console.log("实例创建完成:", this.$el, this.words);
        },
        //   挂载完成, 类似于"load"
        mounted() {
          console.log("挂载创建完成:", this.$el, this.words);
        },
        // 更新完成
        updated() {
          console.log("更新完成 data.words =", this.words);
        },
      });
      vm.words = "大家早上好";
    </script>
  </body>
</html>

计算器属性
使代码更加简洁
基于data中数据做改变
get（）：取值
set( ):取值后改值
watch():监听器属性
使用时候，写函数名

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div class="app">
      <p>
        数量:
        <!-- <input
          type="number"
          v-model="num"
          style="width: 5em"
          min="0"
          @change="calc"
        /> -->
        <input type="text" v-model="num" />
      </p>
      <p>单选题: {{price}} 分</p>
      <!-- <p>金额: {{num * price}} 元</p> -->
      <!-- <p>金额: {{res}} 元</p> -->
      <!-- <p>金额: {{res}} 元</p> -->
      <!-- 计算属性,本质上就是原生的访问器属性 -->
      <p>单选题总分: {{amount}} 分</p>
    </div>
    <script>
      const vm = new Vue({
        el: document.querySelector(".app"),
        data() {
          return {
            num: 0,
            price: 2,
            res: 0,
          };
        },
        // 计算属性: 最终会和data合并,所以不要和data中已有属性重名
        computed: {
          //   amount() {
          //     return this.num * this.price;
          //   },
          //   访问器属性有getter/setter
          // 计算属性默认是getter
          amount: {
            get() {
              return this.num * this.price;
            },
          },
        },
        // methods: {
        //   calc() {
        //     this.res = this.num * this.price;
        //   },
        // },
      });
      vm.amount = 1001;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>侦听器属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div class="app">
      <p>
        <input
          type="number"
          v-model="num"
          style="width: 5em"
          min="0"
          :max="max"
        />
      </p>
      <p>单价: {{price}} 元</p>
      <p>金额: {{res}} 元</p>
    </div>
    <script>
      const vm = new Vue({
        el: document.querySelector(".app"),
        data() {
          return {
            num: 0,
            price: 50,
            res: 0,
            max: 100,
          };
        },
        // 侦听器属性
        watch: {
          // 侦听的是某一个属性的值的变化,它的属性名与data中要监听的属性同名
          num(newValut, oldValue) {
            console.log(newValut, oldValue);
            // this.res = this.num * this.price;
            this.res = newValut * this.price;
            // 监听库存
            if (newValut >= 20) {
              this.max = newValut;
              alert("库存不足,请补货");
            }
          },
        },
      });
      // key: 主要是为了弥补列表渲染时,自动触发diff算法
      // v-if, v-else-if, v-show: 条件渲染
      // 键盘修饰符
      // 计算属性: 相当于原生的访问器属性
      // 侦听器属性: 监听数据对象的变化
      // 用计算属性完成的功能,侦听器几乎都可以完成
    </script>
  </body>
</html>