VUE学习之常用指令2

1.key的作用

对于列表循环时，如果不用key，会导致出现文不对题的情况，比如添加列表条目后循环出来的列表有单选框时，不使用key会导致选中者错位；例如：

<div id="app">
        <label>新老师: <input type="text" v-model="name"></label>
        <button @click="add">增加</button>
        <ul>
        //开始选中第二个，如果这里不用key，添加条目后选中的将会是第三个
            <li v-for="item of list" :key="item.id">
                <input type="radio" name="name">
                {{item.id}}--{{item.name}}
            </li>
        </ul>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     const vm = new Vue({
        el: '#app',
        data: {
           name: '',
           list: [
            { id: 3, name: "赵老师" },
            { id: 2, name: "钱老师" },
            { id: 1, name: "孙老师" },
           ]
        },
        methods: {
            add(){
                this.list.unshift({ id: this.list.length+1, name:this.name });
            }
        },
     });
    </script>

---

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

<div id="app">
      // v-if: 元素是否添加到页面中,不添加时相当于css中visibility: hidden，dom结构中没有痕迹
      <!-- 单分支 -->
      <p v-if="flag">{{msg}}</p>
      <button
        @click="flag = !flag"
        v-text="tips = flag ? `隐藏` : `显示`"
      ></button>
      <!-- 多分支 -->
      <p v-if="point > 1000 && point < 2000">{{grade[0]}}</p>
      <p v-else-if="point >= 2001 && point < 3000">{{grade[1]}}</p>
      <p v-else-if="point >= 3001 && point < 4000">{{grade[2]}}</p>
      <p v-else-if="point >= 4000">{{grade[3]}}</p>
      <p v-else>{{grade[4]}}</p>
      // v-show: 元素是否显示出来(元素已经在dom结构中);相当于css中的display:none
      <!-- v-show: -->
      <p v-show="status">祝大家薪资越来越高</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: document.querySelector("#app"),
        data() {
          return {
            msg: "古德猫宁",
            flag: true,
            tips: "隐藏",
            point: 4500,
            grade: [
              "白银",
              "黄金",
              "铂金",
              "钻石",
              "青铜",
            ],
            status: true,
          };
        },
      });
    </script>

---

3. todolist：键盘修饰符

    <div class="app">
      <-- 使用了键盘修饰符: enter -->
      <input type="text" @keyup.enter="submit($event)" />
      <ul v-if="list.length > 0">
        <li v-for="(item,index) of list" :key="index">{{item}}</li>
      </ul>
    </div>
    <script>
      const vm = new Vue({
        el: document.querySelector(".app"),
        data() {
          return {
            list: [],
          };
        },
        // 事件方法
        methods: {
          submit(ev) {
            this.list.unshift(ev.target.value);
            ev.target.value = null;
            //如果不用键盘修饰符，这里将需要判断是否按下Enter键
            // if (ev.key === "Enter") {
            //   this.list.unshift(ev.target.value);
            //   ev.target.value = null;
            // }
          },
        },
      });
    </script>

---

4. 生命周期

vue实例从创建到销毁的全过程；vue生命周期是函数,为每个周期提供了一个编程接口/钩子,开放出来供用户自定义。

<div id="app">{{words}}</div>
    <script>
      const vm = new Vue({
        el: document.querySelector("#app"),
        data() {
          return {
            words: "古德那艾特",
          };
        },
        // 实例创建之前,data不能用,el不可用
        beforeCreate() {
          console.log("实例创建前:", this.$el, this.words);//实例创建前: undefined undefined
        },
        // 实例创建完成，data能用,el不可用
        created() {
          console.log("实例创建完成:", this.$el, this.words);//实例创建完成: undefined 大家晚上吃了吗?
        },
        //   挂载完成, 类似于"load",data,el都可用
        mounted() {
          console.log("挂载创建完成:", this.$el, this.words);//挂载创建完成: <div id="app"> 大家晚上吃了吗?
        },
        // 更新完成，只有进行更新时updated才会执行
        updated() {
          console.log("更新完成 data.words =", this.words);
        },
      });
      vm.words = "how are you";//更新操作
    </script>

---

5. v-model:计算属性

<div class="app">
      <p>
        数量:
        <input type="number" v-model="num" style="width: 5em" min="0" />
      </p>
      <p>单价: {{price}} 元</p>
      <p>金额: {{amount}} 元</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: document.querySelector(".app"),
        data() {
          return {
            num: 0,
            price: 50,
            res: 0,
          };
        },
        // 计算属性: 最终会和data合并,所以不要和data中已有属性重名
        computed: {
          //   访问器属性有getter/setter
          // 计算属性默认是getter
          amount: {
            get() {
              return this.num * this.price;
            },
            set(value) {
              console.log(value);
              if (value > 1000) this.price = 40;
            },
          },
        },
      });
    </script>

---

6. watch：侦听器属性；计算属性能完成的功能,侦听器几乎都可以完成；侦听器属性与计算属性最大的区别就是随时监听元素。

<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: document.querySelector(".app"),
        data() {
          return {
            num: 0,
            price: 50,
            res: 0,
            max: 100,
          };
        },
        // 侦听器属性
        watch: {
          // 侦听的是某一个属性的值的变化,它的属性名与data中要监听的属性同名
          num(newValut, oldValue) {
            //newValut为变化后的新值，oldValue是变化之前的旧值
            this.res = newValut * this.price;
            // 监听库存
            if (newValut >= 10) {
              this.max = newValut;
              alert("每人限购10个");
            }
          },
        },
      });
    </script>

---

使用VUE前记得先导入库