目录
1.事件监听：是通过v-on指令（用@符号代替）绑定事件处理程序
2.多事件的处理：对于同一个用户交互事件，需要调用多个方法进行处理
一、Vue实例的属性和方法
1.什么是vue实例：又称为Vue组件
（1）Vue2.0创建Vue组件方法
new Vue({…})
（2）Vue3.0创建Vue组件的方法
Vue.createApp({…})
2.Vue组件的属性
（1）data：是一个函数，在组件创建时会调用此函数来构建响应性的数据系统。是组件的存储属性获取该属性值的方式：
- Vue组件名.变量名
- Vue组件名.$data.变量名
- 本质是访问的同一个数据块
（2）计算属性（computed）：通常可以将存储属性的值直接渲染到html的元素上，在有些场景下存储属性的值不适合直接渲染，需要处理之后再进行渲染。在Vue中使用计算属性对数据进行再处理
注意：v-on绑定事件，若使用v-on绑定单个事件可以简写为‘@事件名’
注意：
a.存储属性主要用于数据的存取，我们可以通过赋值运算来修改它的属性值。通常，计算属性只用来取值，不会用来存值，因此计算属性默认提供的是取值方法（get方法）；计算属性也可以通过赋值进行存储数据，但是存数据的方法需要手动实现（set方法）
b.当使用计算属性时，默认调用get方法（该方法不能显式调用）
当给计算属性赋值时，调用的是set方法（该方法不能显式调用）
（3）侦听属性（属性侦听器）：可以方便的监听某个属性的变化，以完成复杂的业务逻辑。在Vue中的属性侦听器是watch
（4）定义方法的属性（methods）：在该属性下定义Vue组件的函数
3.Vue组件中的函数
（1）限流函数
a.限流：
场景1：点击按钮向服务器发起数据请求，在请求的数据回来之前多次单击按钮是无效的且会消 耗资源
场景2：页面中某个按钮会导致页面的刷新，我们需要限制用户对该按钮进行频繁的操作
b.限流函数：在指定的时间间隔内不允许重复执行同一个函数
示例：页面中有一个按钮，单击按钮后在控制台输出当前的时间，要求这个按钮的两次事件触发间隔不能小于2秒
<div id="app">
<button @click="myClick">按钮</button>
</div>
<script>
const obj = {
data(){
return {
throttle: false
}
},
methods:{
myClick(){
if(!this.throttle){
console.log(Date());
}else{
return
}
this.throttle = true
setTimeout(()=>{
this.throttle = false //2秒后throttle变为false
},2000)
}
}
}
Vue.createApp(obj).mount('#app')
</script>将限流的逻辑封装
<script>
var throttle = false
function throttleTool(ca
最低0.47元/天 解锁文章
2447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
