vue3事件处理和插值的语法糖（2024-06-21）

1、事件处理

//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

2、插值

//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>