vue的计算属性和监听事件

vue的计算属性和监听事件

1.计算属性

1.1 getter和setter方法

每个计算属性都包括一个setter和一个getter，但是setter方法并不常用，所以可以简写，没有setter方法就只能读取，无法修改

<div id="app">
    <h2>{{getfullname1}}</h2>
    <h2>{{getfullname2}}</h2>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            firstname: "aaa",
            lastname: "bbb",
        },
        computed: {
            getfullname1: {
                get() {
                    return this.firstname + " " + this.lastname;
                },
                //包含了setter方法
                set(name) {
                    this.firstname = name;
                    const newname = name.split(" ");
                    this.firstname = newname[0];
                    this.lastname = newname[1];
                },
                
            },
            //省略了setter方法的简写
            getfullname2: function () {
                return this.firstname + " " + this.lastname;
            },
        },
    });
</script>

运行结果：

1.2计算属性的缓存

methods和computed都可以实现同样的功能，但是计算属性可以缓存，例如使用camputed渲染四次，但是控制台只会打印一下，但是使用methods渲染四次，控制台就会打印四次

<div id="app">
    <h2>{{fullname}}</h2>
    <h2>{{fullname}}</h2>
    <h2>{{fullname}}</h2>
    <h2>{{fullname}}</h2>
    <h2>{{getfullname()}}</h2>
    <h2>{{getfullname()}}</h2>
    <h2>{{getfullname()}}</h2>
    <h2>{{getfullname()}}</h2>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            firstname: "aa",
            lastname: "bb",
        },
        computed: {
            fullname() {
                console.log("computed");
                return this.firstname + " " + this.lastname;
            },
        },
        methods: {
            getfullname() {
                console.log("methods");
                return this.firstname + " " + this.lastname;
            },
        },
    });
</script>

运行结果：

2.v-on(事件监听)

2.1 传参问题

• 事件调用的方法没有参数
• 在事件定义时，写函数时省略了小括号，但是方法中有一个参数
• 如果函数需要参数，但是没有传入
• 方法定义时，我们需要event对象，同时有需要其他参数

<div id="app">
    <!-- 1.事件调用的方法没有参数 -->
    <button @click="btn1click()">按钮1</button>
    <button @click="btn1click">按钮1</button>
    <!-- 两者效果一样 -->

    <!-- 2.在事件定义时，写函数时省略了小括号，但是方法中有一个参数，这个时候
Vue会默认讲浏览器生产的event事件对象作为参数传入到方法当中 -->
    <button @click="btn2click">按钮2</button>

    <!-- 如果函数需要参数，但是没有传入，那么函数的形参为undefined -->
    <button @click="btn2click()">按钮3</button>

    <!-- 3.方法定义时，我们需要event对象，同时有需要其他参数 -->
    <button @click="btn3click(abc,$event)">按钮4</button>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            abc : 123 ,
        },
        methods:{
            btn1click(){
                console.log("btn1click");
            },
            btn2click(event){
                console.log("---",event);
            },
            btn3click(abc,event){
                console.log("---",abc,event);
            }
        }
    });
</script>

运行结果：

2.2 修饰符

• .stop：调用event.stopPropagation()

  <div id="app">
      <div @click="divclick">
          <button @click.stop="btnclick">按钮</button>
      </div>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
  
      var app = new Vue({
          el: "#app",
          data: {
  
          },
          methods:{
              btnclick(){
                  console.log("btnclick");
              },
              divclick(){
                  console.log("divclick");
              },
  
          }
  
      });
  </script>
  

• .prevent：调用event.preventDefault()，阻止表单的自动提交

  <div id="app">
      <form action="aaa">
          <input type="submit" name="" id="" value="提交" @click.prevent="submitClick()">
      </form>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
  
      var app = new Vue({
          el: "#app",
          data: {
          },
          methods:{
              submitClick(){
                  console.log("submitClick");
              },
          }
      });
  </script>
  

• .once：只触发一次回调

  <div id="app">
      <button @click.once="onceclick">按钮</button>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
  
      var app = new Vue({
          el: "#app",
          data: {
          },
          methods:{
              onceclick(){
                  console.log("onceclick");
              },
          }
      });
  </script>
  

• @keyup.enter：监听回车

  <div id="app">
      <input type="text" @keyup.enter="keyUp">
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
  
      var app = new Vue({
          el: "#app",
          data: {
          },
          methods:{
              keyUp(){
                  console.log("keyUp");
              },
          }
      });
  </script>
  

3.v-if/v-show

3.1 v-if、v-else-if、v-else

<div id="app">
    <h2 v-if="grade>90">优秀</h2>
    <h2 v-else-if="grade>80">良好</h2>
    <h2 v-else-if="grade>70">中等</h2>
    <h2 v-else-if="grade>60">及格</h2>
    <h2 v-else>不及格</h2>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            grade: 70,
        },
    });
</script>

3.2 v-if、v-show

<div id="app">
    <h2 v-if="isactive" @click="change">1</h2>
    <h2 v-show="isactive" @click="change">2</h2>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isactive: true,
        },
        methods: {
            change() {
                this.isactive = !this.isactive;
            },
        },
    });
</script>

v-if是通过将整个元素删除达到隐藏的效果，v-show是通过display属性达到隐藏的效果

4.v-for

• 遍历数组
• 遍历对象

<div id="app">
    <!-- 遍历数组 -->
    <ul>
        <li v-for="(item,index) in arr">
            {{index}}.{{item}}
        </li>
    </ul>
    <!-- 遍历对象 -->
    <ul>
        <li v-for="(value,key,index) in info ">
            {{index}}.{{key}} {{value}}
        </li>
    </ul>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            arr:["aaa","bbb","ccc"],
            info:{
                name:"hh",
                age:11,
                height:1.20
            }
        },
    });
</script>

4.1 key属性：为了高效的更新虚拟的DOM

<div id="app">
    <ul>
        <li v-for="(item,index) in arr" :key="item">
            {{index}}.{{item}}
        </li>
    </ul>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            arr:["aaa","bbb","ccc"],
        },
    });
</script>

4.2数组中哪些是响应式的

• push：在数组末尾添加一个或多个元素
• pop：删除数组中最后一个元素
• shift：删除第一个元素
• unshift：在数组起始添加一个或多个元素
• splice：可以删除元素，插入元素，替换元素
• sort：为数组排序
• reverse：对数组进行反转
• set：修改数组

<div id="app">
    <ul>
        <li v-for="(item,index) in arr" :key="item">
            {{index}}.{{item}}
        </li>
    </ul> 
    <button @click="btnclick">按钮</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            arr:["aaa","bbb","ccc"],
        },
        methods:{
            btnclick(){
                this.arr.push("ddd","eee","fff");//在最后添加
                this.arr[0]="a";// 通过索引值修改第一个值，不能做到响应式
                this.arr.pop();//删除最后一个
                this.arr.shift();//第一个删除
                this.arr.unshift("aaaa","bbbb","cccc");//在第一个位置添加
                // 删除元素，插入元素，替换元素
		// 删除元素：第二个参数传入要删除几个元素的个数，如果没有传，就是删除后面所有元素
                // 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
                // 替换元素：第二个参数，表示我们要替换几个元素，后面跟的是用于替换前面的元素
                this.arr.splice(1,1);//从第一个位置删除1个元素
                this.arr.splice(1,0,'aaa');//从第一个位置插入1个元素
                this.arr.splice(1,2,'aaa','bbb');//从第一个位置开始替换2个元素
                
                this.arr.sort();//对数组排序
                this.arr.reverse();//对数组反转 
                //set(要修改的对象，索引值，修改后的值)
			   Vue.set(this.arr,0,"aaaaa");
            }
        }

    });
</script>

补充-ES6语法

1. let/var

var没有块级作用域，会导致一些问题，let是var的完善版，有块级作用域；

案例中btn1，不管点击哪个，都是显示点击最后一个，因为var定义的i没有块级作用域，它会随着for循环的改变而改变，最后读取到的都是最后一个i；btn2中，点击哪个就是显示对应的下标，

<div id="app">
    <button @click="btn1">按钮1</button>
    <button @click="btn1">按钮2</button>
    <button @click="btn1">按钮3</button>
    <button @click="btn1">按钮4</button> 
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            firstname: "aa",
            lastname: "bb",
        },
        methods: {
            btn1() {
                var btns = document.getElementsByTagName("button");
                for (var i = 0; i < btns.length; i++) {
                    btns[i].onclick = function () {
                        console.log("点了第" + i + "个按钮");
                    };
                }
            },

        });
</script>

运行结果：

<div id="app">
    <button @click="btn2">按钮1</button>
    <button @click="btn2">按钮2</button>
    <button @click="btn2">按钮3</button>
    <button @click="btn2">按钮4</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            firstname: "aa",
            lastname: "bb",
        },
        methods: {
            btn2() {
                let btns = document.getElementsByTagName("button");
                for (let i = 0; i < btns.length; i++) {
                    btns[i].onclick = function () {
                        console.log("点了第" + i + "个按钮");
                    };
                }
            },
        },
    });
</script>

运行结果：

2 const

• 一旦给const赋值之后就不能修改了
• 在使用const定义标识符时，必须赋值
• 常量的含义是指向的对象不能改变，但是可以改变变量的属性

<script>
    const person= { firstname: "aa", lastname: "bb" },
    person={};//不可以
    person.firstname="cc";//可以
</script>

3 input的复用

因为Vue在进行DOM的渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是创建新的元素

解决：添加key，当key相同表示可以复用，不同不可以复用