文档:内置指令 | Vue.js (vuejs.org)
1.v-on,给元素绑定事件监听器
<!-- 方法处理函数 --> <button v-on:click="doThis"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 点击事件将最多触发一次 --> <button v-on:click.once="doThis"></button>
2.v-model,在表单输入元素或组件上创建双向绑定
<p>Message is: {{ message }}</p> <input v-model="message" placeholder="edit me" />
3.v-show,基于表达式值的真假性,来改变元素的可见性
<h1 v-show="ok">Hello!</h1>
ok:是bool值
4.v-if,基于表达式值的真假性,来条件性地渲染元素或者模板片段
<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>
5.v-for,基于原始数据多次渲染元素或模板块
<div v-for="(item, index) in items"></div> <div v-for="(value, key) in object"></div> <div v-for="(value, name, index) in object"></div>
<div v-for="item in items" :key="item.id">{{ item.text }} </div>
6.computed(),接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。
const count = ref(1) const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2
7.watch(),侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。
侦听一个 getter 函数:
const state = reactive({ count: 0 }) watch(() => state.count,(count, prevCount) => {/* ... */} )
侦听一个 ref:
const count = ref(0) watch(count, (count, prevCount) => {/* ... */ })
8.键盘鼠标修饰符
keydown: 键盘按下事件
keyup: 键盘的抬起事件
import { ref } from 'vue'; let message = ref("")// 定义一个回车键事件函数 const enterHandler = ()=> {console.log("你敲击了回车键") }<p>回车事件:</p><input v-model="message" placeholder="请输入值" @keyup.enter="enterHandler" /><input v-model="message" placeholder="请输入值" @keydown.enter="enterHandler" />
其它事件@keyup.delete,@keyup.tab,@keyup.ctrl,@keyup.ctrl.enter
按住ctrl鼠标点击事件:
<button type="button" @click.ctrl="v++">点我</button>
鼠标左击:@click.left
鼠标右击:@click.right 或 @contextmenu.prevent
<textarea @click.right="rightHandler" oncontextmenu="return false">这里面有些内容</textarea>
oncontextmenu="return false" :禁用弹窗