search

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

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

CC
CC原创
2021年01月19日 18:49:31573浏览

注意事项

  • 写v-for必须要写key
  • 写法：写v-for时设置:key=”唯一值”
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>key的作用</title>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.   </style>
  15. </head>
  17. <body>
  18.   <div id="app">
  19.     <ul>
  20.       <li v-for="(item,name,index) of list" :key="item.index">
  21.         <input type="radio" name="name">
  22.         {{item.id}}、{{item.name}}
  23.       </li>
  24.     </ul>
  25.     <input type="submit" value="提交答案" @click.prevent='handle'>
  26.   </div>
  27.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  28.   <script>
  29.     const vm = new Vue({
  30.       el: '#app',
  31.       data() {
  32.         return{    list: [
  33.           { id: "a", name: "天蓬老师" },
  34.           { id: "b", name: "灭绝老师" },
  35.           { id: "c", name: "西门老师" },
  36.           { id: "d", name: "郭靖老师" },
  37.         ]}
  38.       },
  39.       methods: {
  40.         handle() {
  41.           console.log(this.list);
  42.         }
  43.       },
  44.     });
  45.   </script>
  46. </body>
  48. </html>

v-if应用于数据渲染

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>key的作用</title>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.   </style>
  15. </head>
  17. <body>
  18.   <div id="app">
  19.     <button @click='flag=!flag' v-text="tips = flag ? `隐藏答案` : `显示答案`"></button>
  20.     <span v-if="flag">{{msg}}</span>
  21.   </div>
  22.   </div>
  23.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  24.   <script>
  25.     const vm = new Vue({
  26.       el: '#app',
  27.       data() {
  28.         return {
  29.           msg: "A",
  30.           flag: "ture",
  31.           tips: "隐藏当"
  32.         }
  33.       },
  34.       methods: {
  35.         handle() {
  36.           console.log(this.list);
  37.         }
  38.       },
  39.     });
  40.   </script>
  41. </body>
  43. </html>

键盘修饰符

按钮提交enter事件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>key的作用</title>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.   </style>
  15. </head>
  17. <body>
  18.   <div id="app">
  19.     <button >提交</button>
  20.     <input type="text" @keyup.enter="submit($event)" />
  21.     <p  v-if="list.length > 0">
  22.       <span v-for="(item,index) of list" :key="index">
  23.         {{item}}
  24.     </p>
  25.     </span>
  26.   </div>
  27.   </div>
  28.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  29.   <script>
  30.     const vm = new Vue({
  31.       el: '#app',
  32.       data() {
  33.         return {
  34.           list: []
  35.         };
  36.       },
  37.       methods: {
  38.         submit(ev) {
  39.           this.list.unshift(ev.target.value);
  40.           ev.target.value = null;
  41.         }
  42.       },
  44.     });
  45.   </script>
  46. </body>
  48. </html>

vue框架生命周期

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>生命周期</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">{{words}}</div>
  11.     <script>
  12.       // vue实例从创建到销毁的全过程
  13.       // 像一个人从出生到死亡的完整流程
  14.       // vue生命周期是函数,为每个周期提供了一个编程接口/钩子,开放出来供用户自定义
  16.       const vm = new Vue({
  17.         el: document.querySelector("#app"),
  18.         data() {
  19.           return {
  20.             words: "大家晚上吃了吗?",
  21.           };
  22.         },
  24.         // 实例创建之前,data不能用,el不可用
  25.         beforeCreate() {
  26.           console.log("实例创建前:", this.$el, this.words);
  27.         },
  28.         // 实例创建之后
  29.         created() {
  30.           console.log("实例创建完成:", this.$el, this.words);
  31.         },
  32.         //   挂载完成, 类似于"load"
  33.         mounted() {
  34.           console.log("挂载创建完成:", this.$el, this.words);
  35.         },
  36.         // 更新完成
  37.         updated() {
  38.           console.log("更新完成 data.words =", this.words);
  39.         },
  40.       });
  42.       vm.words = "大家早上好";
  43.     </script>
  44.   </body>
  45. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>计算属性</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <p>
  12.         数量:
  13.         <!-- <input
  14.           type="number"
  15.           v-model="num"
  16.           style="width: 5em"
  17.           min="0"
  18.           @change="calc"
  19.         /> -->
  21.         <input type="text" v-model="num" />
  22.       </p>
  23.       <p>单选题: {{price}} 分</p>
  24.       <!-- <p>金额: {{num * price}} 元</p> -->
  25.       <!-- <p>金额: {{res}} 元</p> -->
  26.       <!-- <p>金额: {{res}} 元</p> -->
  27.       <!-- 计算属性,本质上就是原生的访问器属性 -->
  28.       <p>单选题总分: {{amount}} 分</p>
  29.     </div>
  30.     <script>
  31.       const vm = new Vue({
  32.         el: document.querySelector(".app"),
  33.         data() {
  34.           return {
  35.             num: 0,
  36.             price: 2,
  37.             res: 0,
  38.           };
  39.         },
  40.         // 计算属性: 最终会和data合并,所以不要和data中已有属性重名
  41.         computed: {
  42.           //   amount() {
  43.           //     return this.num * this.price;
  44.           //   },
  46.           //   访问器属性有getter/setter
  47.           // 计算属性默认是getter
  48.           amount: {
  49.             get() {
  50.               return this.num * this.price;
  51.             },
  52.           },
  53.         },
  54.         // methods: {
  55.         //   calc() {
  56.         //     this.res = this.num * this.price;
  57.         //   },
  58.         // },
  59.       });
  61.       vm.amount = 1001;
  62.     </script>
  63.   </body>
  64. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>侦听器属性</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <p>
  12.         <input
  13.           type="number"
  14.           v-model="num"
  15.           style="width: 5em"
  16.           min="0"
  17.           :max="max"
  18.         />
  19.       </p>
  20.       <p>单价: {{price}} 元</p>
  21.       <p>金额: {{res}} 元</p>
  22.     </div>
  23.     <script>
  24.       const vm = new Vue({
  25.         el: document.querySelector(".app"),
  26.         data() {
  27.           return {
  28.             num: 0,
  29.             price: 50,
  30.             res: 0,
  31.             max: 100,
  32.           };
  33.         },
  34.         // 侦听器属性
  35.         watch: {
  36.           // 侦听的是某一个属性的值的变化,它的属性名与data中要监听的属性同名
  37.           num(newValut, oldValue) {
  38.             console.log(newValut, oldValue);
  39.             // this.res = this.num * this.price;
  40.             this.res = newValut * this.price;
  42.             // 监听库存
  43.             if (newValut >= 20) {
  44.               this.max = newValut;
  45.               alert("库存不足,请补货");
  46.             }
  47.           },
  48.         },
  49.       });
  51.       // key: 主要是为了弥补列表渲染时,自动触发diff算法
  52.       // v-if, v-else-if, v-show: 条件渲染
  53.       // 键盘修饰符
  54.       // 计算属性: 相当于原生的访问器属性
  55.       // 侦听器属性: 监听数据对象的变化
  56.       // 用计算属性完成的功能,侦听器几乎都可以完成
  57.     </script>
  58.   </body>
  59. </html>
上一条：VUE的条件渲染，计算属性，侦听器演练，比较计算属性与侦听器之间的区别下一条：Vue自学：父子组件通信-父传子props
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议