Vue 常用指令与语法糖：v-if/v-show、v-for、v-model

method

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。

v-if vs v-show

相同点：v-if 与 v-show 都可以动态控制 dom 元素显示隐藏

手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显隐；
编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 css 切换；
编译条件：
- v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译
- v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留；
性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；
使用场景：v-if 适合运营条件不大可能改变；v-show 适合频繁切换。

需要注意的是，当一个元素默认在 css 中加了 display：none 属性，这时通过 if-show 修改为 true 是无法让元素显示的。原因是显示隐藏切换，只是会修改 element style 为 display:"" 或者 display:none,并不会覆盖掉或修改已存在的 css 属性。

使用 v-show 的话，在 vue 解析之前隐藏 DOM 的话，尽量在 style 属性里面设置 display 的值，不要在 css 文件中。如下所示

<template>
  <div class="jz">
    <div class="subJz">
      <p v-if="true" style="display: none;">我是测试文字1</p>
      <p v-show="true" style="display: none;">我是测试文字2</p>
      <p v-if="true" class="hidden">我是测试文字3</p>
      <p v-show="true" class="hidden">我是测试文字4</p>
      <p v-show="true">我是测试文字5</p>
      <p v-if="true">我是测试文字6</p>
      <p style="display: block" v-show="false">我是测试文字7</p>
      <p v-if="false" style="display: block">我是测试文字8</p>
      <p v-if="false" class="show">我是测试文字9</p>
      <p v-show="false" class="show">我是测试文字10</p>
    </div>
  </div>
</template>

<style>
  .hidden {
    display: none;
  }

  .show {
    display: block;
  }

  .jz {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid green;
    text-align: center;
  }

  .subJz {
    width: 500px;
    height: 300px;
    border: 1px solid gold;
  }
</style>

v-for 遍历

v-for 遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="(value, name, index) in myObject">
    {{ index }}. {{ name }}: {{ value }}
  </li>
</ul>

data();
{
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10',
    },
  };
}

v-for 遍历数组时可以把 in 换成 of，类似与 for of

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

<li v-for="(item, index) of items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for 与 v-if 一同使用

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

修饰符

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

<!--.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。-->
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

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

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

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发   -->
<!-- 而不会等待 `onScroll` 完成                   -->
<!-- 这其中包含 `event.preventDefault()` 的情况   -->
<div @scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

常用按键修饰符 vue 提供的别名
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right

v-model 语法糖

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText" />
等价于：
<input :value="searchText" @input="searchText = $event.target.value" />

当用在组件上时，v-model 则会这样：

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>