自学Vue(事件处理器、数组变化勘测、计算函数、)

事件处理器

为什么要引入事件处理器？

事件修饰符:为了让JavaScript更把中心放到逻辑上，所以Vue直接可以进行事件修饰符的使用

在Vue中我们通过由点(.)表示的指令后缀来调用修饰符，比如：

.stop：阻止事件冒泡。当事件触发时，该修饰符将停止事件进一步冒泡到父元素。相当于调用了
event.stopPropagation()
.prevent：阻止默认事件。默认情况下，某些元素会有默认的事件行为，比如A标签的点击跳转，使用.prevent
可以阻止默认事件的触发。相当于调用了 event.preventDefault()。
.capture：使用事件捕获模式。默认情况下，事件是在冒泡阶段处理的（即从子元素到父元素）。使用 .capture
修饰符将事件处理移到事件捕获阶段（即从父元素到子元素）。
.self：只触发当前元素本身的事件。当事件绑定在子元素上时，该修饰符只允许事件在子元素上触发，而不会触发父元素上相同事件。
.once：：只触发一次事件。使用 .once 修饰符可以确保事件只被触发一次，之后该事件监听器会自动被移除。

  <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  <!-- click 事件只能点击一次 -->
  <a v-on:click.once="doThis"></a>

数据变化勘测：

1.变更数据（修改原有数据）:也就是说调用这些函数的时候就会立马对于原本的数组上发生变化展示出去

push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop()
从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
shift()
移除数组中的第一个项并返回该项，同时数组的长度减1
unshift()
在数组前端添加任意个项并返回新数组长度
splice()
删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员
sort()
调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组
reverse()
用于反转数组的顺序，返回经过排序之后的数组

2.替换数据(生成新的数据)：虽然已经生成新的数组了，但是并不会立马对于原本的数组上发生变化展示出去

filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 > 》concat()
方法用于连接两个或多个数组。该方法不会改变现有的数组
slice()
方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

  <h3>数组勘测变化</h3>
  <button @click="updateList()">Buttom</button>
  <li v-for="(item,index) of names" :key="index">{{ item }}</li>

    //数组方法
    //1.变更数组2.替换数组 两种方式。
    updateList() {
      //给数组添加一个值
      //this.names.push("Gy");
      //this.names = this.names.concat(["Gy"]);

      this.names = this.names.concat(this.ages);

    }

必须是把发生变化的数组从新的赋予给数组才会展示到数组之上！

计算函数

为什么会引入？

//计算函数：
//1.因为计算函数只要加载一次就好而methods则会每次都进行调用，所以computed效率更高
//2.将复杂的逻辑直接提取到计算属性里面进行实现

  <h3>计算属性</h3>
  <p>{{itbaizhanContent}}</p>

  computed:{
    itbaizhanContent() {
      return this.names.length > 0 ? "Yes" : "No"
    }
  },