Vue学习计划-Vue2--Vue核心（三）methods和computed
Vue
1. 事件 v-on @
-
基础
-
使用 v-on:xxx或者@xxx绑定事件，其中xxx是事件名
-
事件的回调需要配置在methods对象中，最终会在vm上
-
methods中配置函数，不要用箭头函数，否则this就不是vm了
-
methods中配置函数，都是被Vue管理的函数，this指向 vm 或者 组件实例对象
-
@click="demo"和@click=demo($event)效果一致，但是后者可以传参
-
事件修饰符
-
prevent: 阻止默认事件（常用）
-
once: 事件只触发一次（常用）
-
stop: 阻止事件冒泡（常用）
-
capture: 使用事件的捕获模式 --> 给父级加
-
self: 只有event.target是当前操作的元素时才触发事件
-
passtive: 事件的默认行为立即执行，无需要等待事件回调执行完毕
-
@click.stop.prevent = 可以链式写法
注意：
- .self和.stop 都可以阻止事件冒泡，有什么区别呢？
- .stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡;
- .self 是我只让自己不冒泡，其他人我不管
<div @click = 'fatherClick'> <div @click.self="sonClick" style="padding:10px;background-color: aqua;"> <p @click="childClick">self阻止冒泡</p> </div> <div @click="sonClick" style="padding:10px;background-color: aqua;"> <p @click.stop="childClick">stop阻止冒泡</p> </div> </div>
案例：
<body>
<div id="app">
<!-- 1. 阻止默认事件： .prevent -->
<a :href="url" @click.prevent>跳转</a>
<br>
<!-- 2. 事件只触发一次： .once -->
{{ count }}
<button v-on:click.once = "count++">add</button>
<br>
<!--3. 阻止事件冒泡： .stop -->
<div @click="divClick">
<p @click.stop="pClick">冒泡事件</p>
<p @click="stopClick">冒泡事件vue之前</p>
</div>
<br>
<!-- 4. 采用事件的捕获模式 .capture -->
<div @click= 'fatherClick'>
<div @click.capture="divClick" style="padding: 20px;">
<p @click="pClick">捕获模式</p>
</div>
</div>
<br>
<!-- 5. 只有event.target是当前操作的元素时才触发事件: self -->
<div @click.self="selfClick" style="padding:10px;background-color: aqua;">
<p @click="pClick">self</p>
</div>
<hr>
<!-- #region .self 和.stop区别-->
<!--
.stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡
.self 是我只让自己不冒泡，其他人我不管
-->
<div @click = 'fatherClick'>
<div @click.self="selfClick" style="padding:10px;background-color: aqua;">
<p @click="pClick">self阻止冒泡</p>
</div>
<div @click="selfClick" style="padding:10px;background-color: aqua;">
<p @click.stop="pClick">stop阻止冒泡</p>
</div>
</div>
<br>
<!-- #endregion -->
<!-- 7.链式写法 -->
<div @click='fatherClick'>
<a :href="url" @click.stop.prevent>链式写法</a>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 1,
url:'https://www.baidu.com/'
},
methods: {
// #region
// 冒泡捕获 div标签
divClick(){
console.log('div');
},
// 冒泡捕获 p标签
pClick(){
console.log('p');
},
// 阻止冒泡事件 旧
stopClick(e){
console.log(e);
e.stopPropagation();
},
// 比较.self和.stop事件
fatherClick(){
console.log('父级');
},
// self自身事件
selfClick(e){
console.log(e.target);
},
// #endregion
},
})
</script>
</body>
- 键盘事件 @keyup @keydown
vue之前键盘事件：
@keyup = "show"
methods:{
show(e){
if(e.keyCode !== 13) return
console.log(e.target.value)
}
}
- Vue中常见的按键别名：
回车 => enter
删除 => delete
退出 => esc
空格 => space
换行 => tab (配合keydown使用)
上 => up
下 => down
左 => left
右 => right
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebeb-case(短横线命名)
- 系统修饰键(用法特殊)： shift, ctrl, alt, meta(win)
-
配合keyup使用，按下修饰键的同时，再按下其他的键，随后释放其他键，事件才会被触发
@keyup.ctrl | @keyup.ctrl.y 可以链式
-
配合keydown使用，正常触发事件
-
- 也可以使用keyCode去指定具体的按键（不推荐,被淘汰）
<input type="text" @keyup.13="clickEvent" placeholder="huiche"> - Vue.config.keyCode.自定义键名 = 键码，可以去定制按键别名(不推荐)
<input type="text" @keyup.huiche="clickEvent" placeholder="huiche">
Vue.config.keyCodes.huiche = 13
案例：
<body>
<div id="app">
<!-- vue之前键盘事件 -->
<input type="text" @keyup="show" placeholder="show">
<br>
<!-- #region 1. vue键盘别名 -->
<!-- enter事件 -->
<input type="text" @keyup.enter="clickEvent" placeholder="enter">
<br>
<!-- delete事件 -->
<input type="text" @keyup.delete="clickEvent" placeholder="delete">
<br>
<!-- esc事件 -->
<input type="text" @keyup.esc="clickEvent" placeholder="esc">
<br>
<!-- space事件 -->
<input type="text" @keyup.space="clickEvent" placeholder="space">
<br>
<!-- tab事件 -->
<input type="text" @keydown.tab="clickEvent" placeholder="tab">
<br>
<!-- up事件 -->
<input type="text" @keyup.up="clickEvent" placeholder="up">
<br>
<!-- down事件 -->
<input type="text" @keyup.down="clickEvent" placeholder="down">
<br>
<!-- left事件 -->
<input type="text" @keyup.left="clickEvent" placeholder="left">
<br>
<!-- right事件 -->
<input type="text" @keyup.right="clickEvent" placeholder="right">
<hr>
<!-- #endregion -->
<!-- 2. 未提供别名的按键 -->
<input type="text" @keyup.caps-lock="clickEvent" placeholder="caps-lock">
<input type="text" @keyup.a="clickEvent" placeholder="a">
<hr>
<!-- 3. 系统修饰符 -->
<input type="text" @keyup.shift="clickEvent" placeholder="shift">
<br>
<input type="text" @keyup.ctrl="clickEvent" placeholder="ctrl">
<br>
<input type="text" @keydown.alt="clickEvent" placeholder="alt">
<br>
<!-- 可以链式 -->
<input type="text" @keyup.ctrl.x="clickEvent" placeholder="ctrl+x">
<br>
<input type="text" @keyup.huiche="clickEvent" placeholder="huiche">
<input type="text" @keyup.40="clickEvent" placeholder="huiche">
</div>
<script>
Vue.config.keyCodes.huiche = 13
var vm = new Vue({
el: '#app',
methods: {
show(e){
if(e.keyCode !== 13) return
console.log(e.keyCode, e.target.value);
},
clickEvent(e){
console.log(e.code, e.keyCode, e.target.value);
},
},
})
</script>
</body>
2. 计算属性(computed)
- 引入： 姓名案例， 模板语法：vue官网风格指南=> 模板中简单表达式
- 定义：要用的属性不存在，要通过已有 的属性计算得来
- 原理： 利用Object.defineProperty方法提供的getter和setter
- get函数什么时候执行？
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
- 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
- 备注：
- 计算属性最终会出现在vm上，直接读取使用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算属性依赖的数据发生变化
const vm = new Vue({
el: '#APP',
data:{
firstName: '张'，
lastName: '三'
}，
computed:{
// 1. 完整写法
fullName:{
// get有什么作用？当有人读取fullName时，get就会被调用，且返回值就是fullName的值
// 计算属性有缓存
// get什么时候被调用？ 1. 初次读取数据会执行一次 2. 当依赖的数据发生改变时会被再次调用
get(){
console.log('get被调用了')
console.log(this) // this指向vm
return this.firstName + '-' + lastName
},
// set有什么作用？ 当每次修改fullName时，就会调用set
set(value){
const arr = value.split('-')
// 计算属性是依赖 firstName，lastName计算出来的，改变fullName需要把依赖的数据改变
this.firstName = arr[0]
this.lastName = arr[1]
}
},
// 2. 简写，
// 确定只是读取，不对fullName做修改，可以简写
// fullName就是计算属性的名称
fullName(){
return this.firstName + '-' + this,lastName
}
}
})
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！