vue3 笔记

hghh
267 阅读4分钟

模板语法

动态参数

可以在指令参数中使用 JavaScript 表达式，方法是用方括号括起来：

<a :[attributeName]="url"></a>
<!-- 此处attributeName将动态评估为 JavaScript 表达式，其评估值将用作参数的最终值。
例如，attributeName值为"href"，则此绑定将等效于v-bind:href -->

同样，您可以使用动态参数将处理程序绑定到动态事件名称：

<a v-on:[eventName]="doSomething"></a>
<!-- 当eventName的值为 时"focus"，v-on:[eventName]将等价于v-on:focus -->

computed 和 watch

computed

默认情况下，computed 仅限于 getter，但是也可以提供 setter：

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

当运行this.fullName = 'John Doe'，setter 将被调用，并且this.firstName 和 this.lastName将相应地更新。

类和样式绑定

绑定 HTML 类

vue 允许使用下列方式绑定类：

// 相当于 <div class="static active"></div>
<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }" 
></div>

<div :class="classObj"></div>

<div :class="[isActive ? activeClass : '', errorClass]"></div>

<div :class="[{ active: isActive }, errorClass]"></div>

computed: {
    classObject() {
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal'
        }
    }
}

data() {
  return {
    isActive: true,
    hasError: false
  }
}

绑定内联样式

vue 允许用驼峰或者 '-' 的方式添加内联样式，如下：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

<div :style="styleObject"></div>

<div :style="[baseStyles, overridingStyles]"></div>

data() {
  return {
      styleObject: {
          color: 'red',
          fontSize: '13px'
      },
      baseStyles: {
          color: 'green',
          fontSize: '20px'
      },
      overridingStyles: {
          backgroundColor: 'red'
      }
  }
}

自动加前缀

当使用需要前缀的 CSS 属性时，在 :style 中，Vue 会自动添加相应的前缀。Vue 通过在运行时检查当前浏览器支持哪些样式属性来做到这一点。如果浏览器不支持特定属性，则将测试各种带前缀的变体以尝试找到受支持的变体。

多个值

可以为样式属性提供多个（带前缀的）值的数组，这只会呈现浏览器支持的数组中的最后一个值。如下，将 display: flex 为支持无前缀 flexbox 版本的浏览器呈现。

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

v-for

在 v-for 使用数值

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div id="range" class="demo">
  <span v-for="n in 10" :key="n">{{ n }} </span>
</div>

在 v-for 使用对象

v-for 也可以用来遍历一个对象，可以提供三个参数，如下：

<li v-for="(value, name, index) in myObject">
    {{ index }}、{{ name }}: {{ value }}
</li>

data() {
    return {
        myObject: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2020-03-22'
        }
    }
}
// 结果为：
// 1、title：How to do list in Vue
// 2、author：Jane Doe
// 3、publishedAt：2020-03-22

显示过滤/排序后的结果

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。这时，可以创建一个计算属性，来返回过滤或排序后的数组。

<li v-for="n in evenNumbers" :key="n">{{ n }}</li>

data() {
  return {
    numbers: [ 1, 2, 3, 4, 5 ]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(number => number % 2 === 0)
  }
}

在计算属性不适用的情况下 ，可以使用方法：

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)" :key="n">{{ n }}</li>
</ul>

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

v-for 和 v-if 一起使用

当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量，这时，可以把 v-for 移到 <template> 中

<!-- 报错：todo 未定义 -->

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

<!-- 可改为 -->
<template v-for="todo in todos" :key="todo.name">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

事件处理

内联处理器中的方法

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn(message, event) {
    // 现在可以访问到原生事件
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

多事件处理器

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<button @click="one($event), two($event)">
  Submit
</button>

methods: {
  one(event) {
    // 第一个事件处理器逻辑...
  },
  two(event) {
   // 第二个事件处理器逻辑...
  }
}

事件修饰符

  • .stop：阻止事件冒泡
  • .prevent：阻止默认事件发生
  • .capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件
  • .self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响
  • .once：设置事件只触发一次
  • .passive：用于对DOM的默认事件进行性能优化
  • .native：在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。

按键别名

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl
  • .alt
  • .shift
  • .meta

注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- Ctril 被按下时，即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

表单输入绑定

修饰符

  • .lazy：默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

    <!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />

  • .number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

    <input v-model.number="age" type="number" />

  • .trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg" />
avatar
文章
阅读
粉丝