一、 事件的处理
1、事件的基本使用：
1、使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
2、事件的回调需要配置在methods对象中，最终会在vm上
3、methods中的配置的函数，不要用箭头函数，否则this就不是vm了
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
5、@click='demo' 和 @click="demo($event)" 效果一致，但后者可以传参
<div id="root">
<!-- View -->
<h1>名字：{{name}}</h1>
<button v-on:click="showInfo">点我提示信息(不传参)</button>
<button @click="showInfo1(66,$event)">点我提示信息1(传参)</button>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
//创建Vue实例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '刘建军', //Model
address: '西安'
},
methods: {
showInfo(event) {
console.log(event.target.innerText);
console.log(this); //此处的this是vm
// alert(111);
},
showInfo1(number,event) {
// alert(2222);
console.log(number,event);
},
}
});
console.log(vm);
</script>
2、事件的修饰符
Vue中的事件修饰符
1、prevent : 阻止默认事件（常用）
2、stop : 阻止事件冒泡（常用）
3、once : 事件只触发一次（常用）
4、capture : 使用事件的捕获模式
5、self : 只有event.target是当前操作的元素时才触发事件
6、passive : 事件的默认行为立即执行，无需等待事件回调执行完毕
<div id="root">
<!-- View -->
<h1>名字：{{name}}</h1>
<!-- 阻止默认事件 -->
<a href="http://atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 事件只触发一次 -->
<div class="demo1">
<button @click.once="showInfo">点我提示信息</button>
</div>
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时，才触发事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!--
事件的默认行为立即执行，无需等待事件回调执行完毕
@scroll
@wheel.passive 移动端常用 做一些优化
-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
//创建Vue实例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '刘建军', //Model
address: '西安'
},
methods: {
showInfo(e) {
alert(111)
// console.log(e.target)
},
showMsg(msg) {
console.log(msg);
},
demo() {
console.log('@');
},
}
});
console.log(vm);
</script>
3、键盘事件
可以通过e.key 来查看键盘健名
console.log(e.key,e.keyCode);
1、Vue中常用的按键别名
- 回车 => enter
删除 => delete (捕获删除和退格键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2、Vue未提供别名的按键，可以使用按键原始的key值来绑定，但注意要转化为 caps-lock(短横线命名)
3、系统修饰符（用法特殊） ：ctrl、alt、shift、meta(win健)
!! 可以配合使用 .keyup.ctrl.y
(1)、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
(2)、配合keydown使用，正常触发事件
4、也可以使用keyCode去指定具体的按键 (不推荐)
5、Vue.config.keyCodes.自定义键名 = 键码。 可以定制按键别名
<div id="root">
<h1>{{name}}你好啊</h1>
<!-- 这是自己定义的一个键名(hiuche) -->
<input @keyup.hiuche="showInfo" type="text" placeholder="按下回车提示输入">
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
//自己定义一个别名按键
Vue.config.keyCodes.hiuche = 13;
//创建Vue实例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
name: '刘建军', //Model
address: '西安'
},
methods: {
showInfo(e) {
// if(e.keyCode != 13) return
console.log(e.target.value)
// 通过e.key 来查看键盘健名
console.log(e.key,e.keyCode);
},
}
});
console.log(vm);
</script>
二、计算属性和监听器
计算属性：
-
1、定义：要用的属性不存在，要通过已有的属性计算得来的
-
2、原理：底层借助了Object.defineproperty方法提供的getter和setter
-
3、 get什么时候调用？
(1)、初次读取 fullName时,会执行一次(会有缓存，多次使用时，直接从缓存读取数据)
(2)、所依赖的数据发生变化时，会被再次调用 -
4、优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便
-
5、备注：
(1)、计算属性最终会出现在vm上，直接读取即可
(2)、如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变 -
1、第一种
在methods中定义换算单位的方法
并将方法绑定到按钮上
或将方法绑定到change事件上
方法只会在失去焦点时才触发
或将方法绑定到input事件上
当你输入的时候，方法就会触发 -
2、第二种 侦听器 watch
如果data中 num 发生变化，就会自动触发这个回调函数
侦听器的本质就是回调函数
观察和响应 Vue 实例上的数据变动
当利用双向数据绑定改变data中的数据 num2
当data中数据发生改变则触发在侦听器中设置的方法(回调函数)
我们可以在这个回调函数中对数据进行修改或者使用
与第一种方式对比起来
不需要借助事件来触发，写法上更加简单 监听起来更同步 -
3、第三种 计算属性 computed
相当于是一个跟data 一样的数据形式
不同的是data中的数据 是键值对的形式
而computed中的数据是函数的形式
所以computed可以在数据使用前对其进行设置或修改
正常的数据渲染
只不过渲染的数据是在 computed中设置的函数形式的数据
这个函数形式的数据可以直接进行计算或修改
所以从视觉效果上达到一个实时侦听的效果
侦听器和计算属性的区别 ：
1、侦听器是直接侦听 data中的数据
2、如果绑定的数据发生变化自动触发，侦听器中所对应的回调函数
3、计算属性是一个函数形式的数据
它可以对某个值在使用之前进行设置或修改
函数定义完毕后 直接将函数名当做数据来使用就行
(使用方法跟 data中的数据一样)
网友评论