vue模版语法整理（二）

事件监听

• 在前端开发中，我们需要经常和用于交互。这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
• 在Vue中如何监听事件呢？使用v-on指令

v-on

作用：绑定事件监听器
缩写：@

v-on参数

• 当通过methods中定义方法，以供@click调用时，需要注意参数问题：

1.事件调用的方法没有参数

<div id="app">
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>
</div>

 methods: {
      btn1Click() {
        console.log("btn1Click");
      },
      }

2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法

<div id="app">
  <button @click="btn2Click">按钮2</button>
</div>

    methods: {
      btn2Click(event) {
        console.log('--------', event);
      }
    }

3.方法定义时, 我们需要event对象, 同时又需要其他参数
在调用方式, 如何手动的获取到浏览器参数的event对象: $event

<div id="app">
  <button @click="btn3Click(abc, $event)">按钮3</button>
</div>

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      abc: 123
    },
    methods: {
      btn3Click(abc, event) {
        console.log('++++++++', abc, event);
      }
    }
})

4.如果函数需要参数,但是没有传入, 那么函数的形参为undefined

   function abc(name) {
     console.log(name);
   }
   abc()

v-on修饰符

Vue提供了修饰符来帮助我们方便的处理一些事件：

• .stop - 调用 event.stopPropagation()。

  <div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按钮</button>
  </div>

• prevent - 调用 event.preventDefault()。

  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

• {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调，监听某个键盘的键帽。

 <input type="text" @keyup.enter="keyUp">

• native - 监听组件根元素的原生事件。

• once - 只触发一次回调。

<button @click.once="btn2Click">按钮2</button>

这里具体看我转的这篇文章https://blog.youkuaiyun.com/ShangMY97/article/details/105369663

条件判断

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

JavaScript的条件语句if、else、else if类似。
通过小案例来了解一下

key值的作用

• Vue在重新渲染页面的时候，会尝试复用页面上已经存在的dom， 给某个元素标签加上key值之后，Vue会认为这是页面上唯一的元素，key值不一样 重新渲染页面的时候，Vue就不会尝试复用了，此处与虚拟dom有关。
• 根据下面这个小案例来理解就是：没有key值的话我先在账户的文本框中输入内容，在切换到邮箱，里面的内容还会存在，加了key值就清空了

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="email">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
</script>

点击按钮

v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
v-if和v-show对比

• v-if当条件为false时，压根不会有对应的元素在DOM中。
• v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
• 当需要在显示与隐藏之间切片很频繁时，使用v-show
• 当只有一次切换时，通过使用v-if

v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中

<div id="app">
  <h2 v-if="isShow" id="aaa">{{message}}</h2>
</div>

v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none

 <div id="app">
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

循环遍历

v-for遍历数组

<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['smy', 'kobe', 'james', 'curry']
    }
  })
</script>

1.在遍历的过程中,没有使用索引值(下标值)

<div id="app">
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
</div>

2.在遍历的过程中, 获取索引值

<div id="app">
  <ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>
</div>

v-for遍历对象

<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      }
    }
  })
</script>

1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value

<div id="app">
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
</div>

2.获取key和value 格式: (value, key)

<div id="app">
  <ul>
    <li v-for="(value, key) in info">{{value}}-{{key}}</li>
  </ul>
</div>

3.获取key和value和index 格式: (value, key, index)

<div id="app">
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>

组件的key属性

为什么需要这个key属性呢（了解）？

• 这个其实和Vue的虚拟DOM的Diff算法有关系。
• 这里我们借用React’s diff algorithm中的一张图来简单说明一下：

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

• 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
• 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识

• Diff算法就可以正确的识别此节点
• 找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM（理解了上面我说的v-if里的key，两个意思差不多我觉得）

检测数组更新

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {}
})

methods中具体内容

1.push方法

methods: {
  btnClick() {
     this.letters.push('aaaa', 'bbbb', 'cccc')
 }
}

点击按钮后

2.pop(): 删除数组中的最后一个元素

 methods: {
      btnClick() {
         this.letters.pop();
 	  }
}    

点击按钮后

3.shift(): 删除数组中的第一个元素

methods: {
      btnClick() {
      	this.letters.shift();
      }
}

4.unshift(): 在数组最前面添加元素

methods: {
      btnClick() {
      	 this.letters.unshift('aaa', 'bbb', 'ccc')
      }
}

5.splice作用: 删除元素/插入元素/替换元素

• 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
• 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素

methods: {
      btnClick() {
      	this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
      }
}

不写mnlx就是直接删除a后三个

• 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素

methods: {
      btnClick() {
      	this.letters.splice(1, 0, 'x', 'y', 'z')
      }
}

methods: {
      btnClick() {
        const start = 2
        this.letters.splice(start)
	  }
}

methods: {
      btnClick() {
        const start = 2
        this.letters.splice(start,this.letters.length-start)
	  }
}

6.sort(),我们先打乱数组内顺序，点击按钮后重新排序

methods: {
      btnClick() {
      	this.letters.sort()
      }
}

7.reverse()逆序

methods: {
      btnClick() {
      	this.letters.reverse()
      }
}

8.set(要修改的对象, 索引值, 修改后的值)

methods: {
      btnClick() {
      	Vue.set(this.letters, 0, 'bbbbbb')
      }
}

9.sum(…num)

function sum(...num) {
    console.log(num);
  }

  sum(20, 30, 40, 50, 601, 111, 122, 33)

（以上内容根据微博“coderwhy”的vue视频课程整理）