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" :禁用弹窗
标签:02,count,Vue,const,鼠标,keyup,指令,ref,函数 From: https://www.cnblogs.com/MingQiu/p/18263077