vue基础知识（二）

小徐今天学习了吗
133 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。

获取事件对象

vue中获取事件对象分为两种情况，一种情况是没有传参, 通过形参接收e。另外一种情况是传参了, 通过$event指代事件对象e。

<template>
  <div id="app">
     <button @click="fn2(1, $event)">获取事件对象</button>  
    <a @click="fn" href="http://www.baidu.com">去百度</a>
    <a @click="fn2(100, $event)" href="http://www.baidu.com">去百度2</a>
  </div>
</template>

<script>
export default {
  methods: {
    fn(e) {
      e.preventDefault()
    },
    fn2(num, e) {
      e.preventDefault()
    }
  }
}
</script>

v-on 事件修饰符

vue中提供的事件修饰符主要有：

  • .prevent 阻止默认行为

  • .stop 阻止冒泡

<div id="app">
  <a @click.prevent="fn" href="http://www.baidu.com">去百度</a>
</div>

v-on 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。

  • @keyup.enter 回车
  • @keyup.esc 返回
<div id="app">
  <input type="text" @keyup="fn"> <hr>
  <input type="text" @keyup.enter="fn2">
</div>

v-model

基本使用

v-model的作用给表单元素使用, 双向数据绑定。数据变化了, 视图会跟着变。视图变化了, 数据要跟着变。输入框内容变化了(监听用户的输入, 监听input事件), 数据要跟着变。

语法: v-model='值'

v-model处理其他表单元素

v-model处理不同的表单元素, 绑定的值不同。

<!-- 文本框 -->
<input type="text" v-model="name" />
<!-- 单选框 -->
<input type="radio" value="1" v-model="isChecked" />
<input type="radio" value="2" v-model="isChecked" />
<!-- 多选框 -->
<input type="checkbox" v-model="isChecked" />
<!-- 下拉框 -->
<select v-model="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
</select>

v-model 修饰符

  1. number 如果想自动将用户的输入值, 用parseFloat转成数字类型, ，可以给 v-model 添加 number 修饰符。 如果这个值如果这个值无法转数字，则会返回原始的值。
<input v-model.number="age" type="number">
  1. trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。
 <input v-model.trim="msg">
  1. lazy 在change时而非input时更新，可以给 v-model 添加 lazy 修饰符。
<input v-model.lazy="msg">

v-text指令

更新元素的 textContent/innerText。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<h1 v-text="msg"></h1>

v-html指令

更新DOM对象的innerHTML，html标签会生效。

<h1 v-html="msg"></h1>

v-if 和 v-show

基本使用

v-show 和 v-if 功能都是用来控制盒子的显示隐藏。

  • v-show

    语法: v-show="布尔值" (true显示, false隐藏)

    原理: 实质是在控制元素的 css 样式, display: none;

  • v-if

    语法: v-if="布尔值" (true显示, false隐藏)

    原理: 实质是在动态的创建 或者 删除元素节点。

它们的应用场景:

  • 如果是频繁的切换显示隐藏, 用 v-show。

    v-if, 频繁切换会大量的创建和删除元素, 消耗性能。

  • 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if。

    v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销。

<template>
  <div id="app">
    <h1 v-show="isShow">v-show盒子-{{ msg }}</h1>
    <h1 v-if="isShow">v-if盒子-{{ msg }}</h1>
  </div>
</template>

v-else 和 v-else if

<div id="app">
  <h1 v-if="isLogin">尊敬的超级vip, 你好</h1>
  <h1 v-else>你谁呀, 赶紧登陆~</h1>

  <hr>
  
  <h1 v-if="age >= 60">60岁以上, 广场舞</h1>
  <h1 v-else-if="age >= 30">30岁以上, 搓麻将</h1>
  <h1 v-else-if="age >= 20">20岁以上, 蹦迪</h1>
  <h1 v-else>20岁以下, 唱跳rap篮球</h1>
</div>

v-for

v-for 作用是遍历对象和数组。

  1. 遍历数组 (常用)
 v-for="item in 数组名"  item每一项
 v-for="(item, index) in 数组名"  item每一项 index下标
  1. 遍历对象 (一般不用)
 v-for="(value, prop) in 对象"  value属性值, prop属性名
  1. 遍历数字。

需要注意的是：

  1. vue 的更新机制是数据变化了, vue会对比新旧 虚拟 dom的差异, 对比出差异, 进行差异化更新 (高效)

  2. 对比虚拟dom是为了提升对比效率

  3. key只是给虚拟dom添加了一个唯一的标识, 改变了同级兄弟元素的对比复用策略, 进而优化列表的渲染更新性能

总结: 一般为了优化渲染的性能, 可以在遍历列表时, 加上一个 key属性, key一般指定成 id

avatar
文章
阅读
粉丝