1.7 事件处理
事件的基本使用：
- 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
<!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --> <button @click="showInfo1">点我提示信息1（不传参）</button> <!-- 主动传事件本身 --> <button @click="showInfo2($event,66)">点我提示信息2（传参）</button> </div> <script> const vm = new Vue({ el:'#root', data:{ name:'vue', }, methods:{ // 如果vue模板没有写event，会自动传 event 给函数 showInfo1(event){ // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好！') }, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好！！') } } }); </script>
Vue中的事件修饰符
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
<!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 阻止默认事件（常用） --> <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a> <!-- 阻止事件冒泡（常用） --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button> <!-- 修饰符可以连续写 --> <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> --> </div> <!-- 事件只触发一次（常用） --> <button @click.once="showInfo">点我提示信息</button> </div>
1.8 键盘事件
键盘事件语法糖：@keydown，@keyup
Vue中常用的按键别名：
- 回车 => enter
- 删除 => delete
- 退出 => esc
- 空格 => space
- 换行 => tab (特殊，必须配合keydown去使用)
<!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"> </div> <script> new Vue({ el:'#root', data:{ name:'浙江理工大学' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script>
1.9 计算属性
- 定义：要用的属性不存在，要通过已有属性计算得来
- 原理：底层借助了Objcet.defineProperty方法提供的getter和setter
- get函数什么时候执行？
- (1).初次读取时会执行一次
- (2).当依赖的数据发生改变时会被再次调用
- 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
- 备注：
- 计算属性最终会出现在vm上，直接读取使用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
计算属性完整版写法
<!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> 名：<input type="text" v-model="lastName"> 全名：<span>{{fullName}}</span> </div> <script> const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', } computed:{ fullName:{ //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') return this.firstName + '-' + this.lastName }, //set什么时候调用? 当fullName被修改时。 // 可以主动在控制台修改fullName来查看情况 set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) </script>
计算属性简写
<!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> 名：<input type="text" v-model="lastName"> 全名：<span>{{fullName}}</span> </div> <script> const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', } computed:{ fullName() { console.log('get被调用了') return this.firstName + '-' + this.lastName } } }) </script>
