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) returnconsole.log(e.target.value)
}
}

Vue中常见的按键别名：

    回车 => enter删除 => delete退出 => esc空格 => space换行 => tab (配合keydown使用)上 => up下 => down左 => left右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebeb-case(短横线命名)
系统修饰键(用法特殊)： shift, ctrl, alt, meta(win)
1. 配合keyup使用，按下修饰键的同时，再按下其他的键，随后释放其他键，事件才会被触发
  
  @keyup.ctrl | @keyup.ctrl.y 可以链式
2. 配合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 = 13var vm = new Vue({el: '#app',methods: {show(e){if(e.keyCode !== 13) returnconsole.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函数什么时候执行？
1. 初次读取时会执行一次
2. 当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
1. 计算属性最终会出现在vm上，直接读取使用即可
2. 如果计算属性要被修改，那必须写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指向vmreturn this.firstName + '-' + lastName},// set有什么作用？ 当每次修改fullName时，就会调用setset(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}}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/208081.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！