Vue基础语法

模板语法

1. 文本插值

    <span>Message: {{ msg }}</span>

2. 原始 HTML

    <p>Using text interpolation: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

3. Attribute 绑定

<div v-bind:id="dynamicId"></div>
// 可简写为
<div :id="dynamicId"></div>

4. 布尔型 Attribute

<button :disabled="isButtonDisabled">Button</button>

5. 动态绑定多个值

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

<div v-bind="objectOfAttrs"></div>

6. 使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

7. 调用函数

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

条件渲染

1. v-if： 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
   消耗性能

<h1 v-if="awesome">Vue is awesome!</h1>

2. v-else:

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

3. v-show: 如果为false，只是通过css隐藏元素; 会在 DOM 渲染中保留该元素

列表渲染

1. v-for: 指令基于一个数组来渲染一个列表

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高
以便它可以跟踪每个节点的标识,要为每个元素对应的块提供一个唯一的 key

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

事件处理

v-on可简写为简写为 @, 简写为 v-on:click="handler" 或 @click="handler"

1. 事件修饰符
   .stop
.prevent
.self
.capture
.once
.passive

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

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

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

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

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

TIPS
使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。
因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，
而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

2. 按键修饰符

    <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
    <input @keyup.enter="submit" />

按键别名
.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

系统按键修饰符
.ctrl
.alt
.shift
.meta

表单输入绑定

<input v-model="text">

可以将多个复选框绑定到同一个数组或集合的值

    <div>Checked names: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>

修饰符

1. .lazy
   默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。
   你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

2. .number
   让用户输入自动转换为数字

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

3. .trim
   自动去除用户输入内容中两端的空格

<input v-model.trim="msg" />