search

博客列表 >vue学习之路（key的作用，v-if，v-else-if，键盘修饰符，计算属性，侦听器属性）

vue学习之路（key的作用，v-if，v-else-if，键盘修饰符，计算属性，侦听器属性）

培(信仰)
培(信仰)原创
2021年02月16日 15:39:021103浏览

vue学习之路（key的作用，v-if，v-else-if，键盘修饰符，计算属性，侦听器属性）

补充v-for of ；数组遍历用v-for of，对象遍历用v-for in；关于vue挂载的语法，还有别的方式 使用new Vue({}).$mount()：

  1.     <div class="app">
  2.       <!-- v-for of 遍历数组 -->
  3.       <ul>
  4.         <li v-for="(item,index) of courses" :key="index">{{item}}</li>
  5.       </ul>
  6.       <!-- 对象只能用v-for in -->
  7.       <ul>
  8.         <li v-for="(item,index) in products" :key="index">
  9.           {{item.id}}-{{item.name}}-{{index}}
  10.         </li>
  11.       </ul>
  12.     </div>
  13.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.     <script>
  15.       const vm = new Vue({
  16.         data: {
  17.           courses: ["html5", "css3", "es6"],
  18.           products: [
  19.             { id: 1, name: "手机", price: 4599 },
  20.             { id: 2, name: "大衣", price: 499 },
  21.           ],
  22.           product: {
  23.             id: 1,
  24.             name: "手机",
  25.             price: 4599,
  26.           },
  27.         },
  28.       }).$mount(".app");
  29.     </script>

key 作用

vue在渲染元素时候，出于效率考虑，会尽可能复用已有的元素而非重新渲染，如果不希望这样，可以使用vue提供的key属性，可以让你自己决定是否要复用元素，key的值必须是唯一的

  1.     <div class="app">
  2.       <label for="">
  3.         新老师：
  4.         <input type="text" v-model="name"
  5.       /></label>
  6.       <button @click="add">增加</button>
  7.       <ul>
  8.         <li v-for="item in list" :key="item.id">
  9.           <input type="radio" />
  10.           {{item.name}}
  11.         </li>
  12.       </ul>
  13.     </div>
  14.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15.     <script>
  16.       const vm = new Vue({
  17.         el: document.querySelector(".app"),
  18.         data() {
  19.           return {
  20.             name: "",
  21.             list: [
  22.               { id: 1, name: "tp" },
  23.               { id: 2, name: "mj" },
  24.               { id: 3, name: "xm" },
  25.             ],
  26.           };
  27.         },
  28.         methods: {
  29.           add() {
  30.             this.list.unshift({id: this.list.length+1,name:this.name})
  31.           },
  32.         },
  33.       });
  34.     </script>

条件渲染：v-if,v-show

v-show不能用到template上

  1.     <div class="app">
  2.       <!-- 单分支 -->
  3.       <p v-if="flag">{{msg}}</p>
  4.       <button @click="flag = !flag" v-text="tips = flag ? `隐藏` : `显示`">
  5.         隐藏
  6.       </button>
  7.       <!-- 多分支 -->
  8.       <p v-if="point > 1000 && point < 2000">{{grade[0]}}</p>
  9.       <p v-else-if="point >= 2000 && point < 3000">{{grade[1]}}</p>
  10.       <p v-else-if="point >= 3000 && point < 4000">{{grade[2]}}</p>
  11.       <p v-else-if="point >= 4000 ">{{grade[3]}}</p>
  12.       <p v-else>{{grade[4]}}</p>
  14.       <!-- v-show -->
  15.       <p v-show="status">牛年大吉</p>
  16.     </div>
  17.     <h2 style="visibility: hidden">hello world</h2>
  18.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  19.     <script>
  20.       // v-if: 元素是否添加到页面中
  21.       // v-show:元素是否显示出来（元素已经在dom结构中）
  22.       const vm = new Vue({
  23.         el: document.querySelector(".app"),
  24.         data() {
  25.           return {
  26.             msg: "明天晴天",
  27.             flag: false,
  28.             tips: "隐藏",
  29.             point: 4000,
  30.             grade: [
  31.               "青铜会员",
  32.               "白银会员",
  33.               "黄金会员",
  34.               "钻石会员",
  35.               "仅对会员开放",
  36.             ],
  37.             status:true,
  38.           };
  39.         },
  40.       });
  41.     </script>

键盘修饰符 todolist

  1.     <!-- <input type="text" />
  2.     <ul></ul>
  3.     <script>
  4.       const input = document.querySelector('input[type="text"]');
  5.       const ul = document.querySelector("ul");
  6.       input.onkeyup = (ev) => {
  7.         if (ev.key === "Enter") {
  8.           let str = `<li>${input.value}</li>`;
  9.           ul.insertAdjacentHTML("afterbegin", str);
  10.           input.value = null;
  11.         }
  12.       };
  13.     </script> -->
  14.     <div class="app">
  15.       <input type="text" @keyup.enter="submit($event)" />
  16.       <ul v-if="list.length >0">
  17.         <li v-for="(item,index) of list" :key="index">{{item}}</li>
  18.       </ul>
  19.     </div>
  20.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  21.     <script>
  22.       const vm = new Vue({
  23.         el: document.querySelector(".app"),
  24.         data() {
  25.           return {
  26.             list: [],
  27.           };
  28.         },
  29.         methods: {
  30.           submit(ev) {
  31.             // if (ev.key === 'Enter') {
  32.             //   this.list.unshift(ev.target.value);
  33.             //   ev.target.value=null;
  34.             // }
  35.             // 使用键盘修饰符 .enter
  37.             this.list.unshift(ev.target.value);
  38.             ev.target.value = null;
  39.           },
  40.         },
  41.       });
  42.     </script>

其他的修饰符：

  1. 复习下事件修饰符
    .stop 阻止事件继续传播（冒泡）
    .prevent 阻止标签默认行为
    .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
    .self 只当在 event.target 是当前元素自身时触发处理函数
    .once 事件将只会触发一次
    .passive 告诉浏览器你不想阻止事件的默认行为

  2. v-model的修饰符
    .lazy 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
    .number 自动将用户的输入值转化为数值类型
    .trim 自动过滤用户输入的首尾空格

  3. 键盘事件的修饰符
    .enter 等效于 .13 <input v-on:keyup.13="submit"> <input @keyup.enter="submit">
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down

生命周期

  1.     <div class="app">{{words}}</div>
  2.     <script>
  3.       // vue实例从创建到销毁的全过程
  4.       // 像一个人从出生到死亡的完整流程
  5.       // vue生命周期是函数为每个阶段提供一个编程接口/钩子，开放给用户自定义
  6.       const vm = new Vue({
  7.         el: document.querySelector(".app"),
  8.         data() {
  9.           return {
  10.             words: "晚上好",
  11.           };
  12.         },
  13.         methods: {},
  14.         beforeCreate() {
  15.           console.log("实例beforeCreate：", this.$el, this.words);
  16.         },
  17.         created() {
  18.           console.log("实例created：", this.$el, this.words);
  19.         },
  20.         //挂载完成，类似 load
  21.         mounted() {
  22.           console.log("实例mounted：", this.$el, this.words);
  23.         },
  24.         //更新完成
  25.         updated() {
  26.           console.log("实例updated：", this.$el, this.words);
  27.         },
  28.       });
  29.       vm.words = "早上好";
  30.     </script>

计算属性

  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <div class="app">
  3.       <p>
  4.         数量：
  5.         <!-- <input type="number" v-model="num" min="0" @change="calc" /></p> -->
  6.         <input type="number" v-model="num" min="0" />
  7.       </p>
  8.       <p>单价：{{price}} 元</p>
  9.       <!-- <p>金额：{{num*price}} 元</p> -->
  10.       <!-- <p>金额：{{res}} 元</p> -->
  11.       <!-- 计算属性，本质上就是原生的访问器属性 -->
  12.       <p>金额：{{amount}} 元</p>
  13.     </div>
  14.     <script>
  15.       const vm = new Vue({
  16.         el: document.querySelector(".app"),
  17.         data() {
  18.           return {
  19.             num: 0,
  20.             price: 50,
  21.             res: 0,
  22.           };
  23.         },
  24.         //   计算属性：最终会和data合并，所以不要和data中已有的属性重名
  25.         computed: {
  26.           //   访问器属性有 getter/ setter
  27.           //   计算属性默认是getter
  28.           //   amount() {
  29.           //     return this.num * this.price;
  30.           //   },
  31.           amount: {
  32.             get() {
  33.               return this.num * this.price;
  34.             },
  35.             set(value) {
  36.               if (value > 1000) this.price *=.95;
  37.             },
  38.           },
  39.         },
  40.         methods: {
  41.           calc() {
  42.             this.res = this.num * this.price;
  43.           },
  44.         },
  45.       });
  46.       vm.amount = 1000;
  47.     </script>

侦听器属性

  1.     <div class="app">
  2.       <p>
  3.         数量：
  4.         <input type="number" v-model="num" min="0" :max="max" />
  5.       </p>
  6.       <p>单价：{{price}} 元</p>
  7.       <p>金额：{{res}} 元</p>
  8.     </div>
  9.     <script>
  10.       const vm = new Vue({
  11.         el: document.querySelector(".app"),
  12.         data() {
  13.           return {
  14.             num: 0,
  15.             price: 50,
  16.             res: 0,
  17.             max: 100,
  18.           };
  19.         },
  20.         // 侦听器属性
  21.         watch: {
  22.           // 侦听的是某一个属性的变化，它的属性名与data中的要侦听的属性同名
  23.           num(newVal, oldVal) {
  24.             this.res = newVal * this.price;
  25.             // 监听库存()
  26.             if (newVal >= 20) {
  27.               this.max = newVal;
  28.               alert("库存不足，请补货");
  29.             }
  30.           },
  31.         },
  32.       });
  33.       // 用计算属性完成的功能，侦听器属性几乎都能完成。
  34.     </script>

重点：计算属性，侦听器属性及应用场景

上一条：0127循环，替代语法 文本包含下一条：webuploader文件上传到哪里的问题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多