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

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

Blogger Information

Blog 29

fans 0

comment 0

visits 18415

Special Recommendation

More>

Related recommendations

注意事项

写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>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

python的闭包与装饰器语法糖

2021-01-06 21:40:38