02_Vue常用的一些指令
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" ：禁用弹窗
