一、 事件的处理
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中的数据一样)
