Vue3 语法

一、模板语法

1.1 插值

1.文本
<span>Message: {{ msg }}</span> 数据绑定形式文本插值
<span v-once>这个将不会改变: {{ msg }}</span> v-once使msg值改变模板不会改变

2.html字符串
<span v-html="rawHtml"></span> 将span标签替换为模板且渲染为html
data() {
	return {
	    rawHtml: '<span style="color: red">This should be red.</span>'
	  }
}
3.属性值
<div v-bind:id="dynamicId"></div>
<div v-bind:id="'list-' + id"></div>
<a v-on:click="doSomething"> ... </a>
<a v-bind:[attributeName]="url"> ... </a>动态参数
如果绑定的值是 null 或 undefined，那么该 attribute 将不会被包含在渲染的元素上。

4.显示隐藏
<p v-if="seen">现在你看到我了</p> 插入/移除 <p> 元素
<p v-show="seen">现在你看到我了</p> 改变样式使其显示隐藏

5.v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a

6.v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

1.2 Class与style

1.class切换
<div :class="{ active: isActive }"></div> //动态地切换 class
//active 这个 class 存在与否将取决于 data property

2.使用computed计算
<div :class="classObject"></div>
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
2.数组语法
<div :class="[isActive ? activeClass : '', errorClass]"></div>

3.绑定内联样式
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

1.3 条件渲染

1.v-if
<h1 v-if="awesome">Vue is awesome!</h1>//指令用于条件性地渲染一块内容,移除或增加dom。
<h1 v-if="awesome">Vue is awesome!</h1>//if...else...
<h1 v-else>Oh no 😢</h1>
2.v-else
 <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
3.v-show
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。

1.4 列表渲染

//数组
<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

//对象
<ul id="v-for-object" class="demo">
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

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

1.5 事件处理

1.事件绑定
我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 
JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"
<div id="basic-event">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
2.多事件处理器
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
  Submit
</button>

3.事件修饰符
<!-- 阻止单击事件继续冒泡 -->
<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>

4.按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right


5.系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

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

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

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

#鼠标按钮修饰符
.left
.right
.middle

1.6 表单输出绑定

1.v-model 
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
<input v-model="message" placeholder="edit me" />
2.值绑定
<input type="radio" v-model="pick" v-bind:value="a" />
<input type="radio" v-model="pick" v-bind:value="a" />
<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
3.修饰符
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
<input v-model.number="age" type="text" />
<input v-model.number="age" type="text" />