1.事件处理
<script>
export default{
data(){
return{
counter:0
}
},
methods:{
// addCounter(number){传入参数
// this.counter+=number;
// }
// addCounter(e){
// this.counter++;
// console.log(e);//捕获事件
// }
addCounter(number,e){
this.counter+=number;
console.log(e);//捕获事件
}
} ,
};
</script>
<template>
<div>
<!-- 绑定事件,直接通过js代码处理 -->
<h2 @click="counter++">{{ counter }}</h2>
<!-- 绑定事件, 没有传递参数-->
<h2 @click="addCounter">{{ counter }}</h2>
<!-- 绑定参数,传递参数 -->
<h2 @click="addCounter(5)">{{ counter }}</h2>
<!-- 绑定参数,既要传递参数,也要有事件对象 -->
<h2 @click="addCounter(5,$event)">{{ counter }}</h2>
</div>
</template>
<style>
</style>
2.事件修饰符
.stop
<!-- .stop阻止事件冒泡 -->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
.prevent
<!-- pervent 阻止默认行为 -->
<form action="">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
.once
<!-- .once 只触发一次回调 -->
<button @click.once="onceClick">只触发一次once</button>
3.按键修饰符
4.v-model
4.1 v-model的使用及原理
<div>
<!-- v-model的使用 -->
<input type=" text" v-model="msg">
<h2>{{ msg }}</h2>
<!-- v-model的原理 -->
<!--
本质上是两个操作
1.v-bind绑定一个value属性
2.v-on给当前元素添加一个input事件
-->
<input type="text" :value="msg" @input="changeValue">
</div>
4.2 v-model表单控件的基本使用
<template>
<div>
<!-- 复选框 -->
<!-- 单个勾选框,v-model为布尔值 -->
<input type="checkbox" v-model=" checked">
<h2>{{ checked }}</h2>
<!-- 多个勾选框 以数组的形式进行绑定
checked:"",
fruits:[]
-->
<input type="checkbox" v-model="fruits" value="苹果">苹果
<input type="checkbox" v-model=" fruits" value="梨子">梨子
<input type="checkbox" v-model=" fruits" value="荔枝">荔枝
<input type="checkbox" v-model=" fruits" value="西瓜">西瓜
<input type="checkbox" v-model=" fruits" value="哈密瓜">哈密瓜
<h2>最喜欢的水果:{{ fruits }}</h2>
<!-- 单选框 -->
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女
<h2>{{ sex }}</h2>
<!-- 选项框 -->
<!-- 单选 -->
<select name="" id="" v-model="city">
<option value="济南">济南</option>
<option value="青岛">青岛</option>
<option value="临沂">临沂</option>
<option value="菏泽">菏泽</option>
</select>
<h2>选中的城市:{{ city }}</h2>
<!-- 多选 -->
<select name="" id="" v-model="citys" multiple>
<option value="济南">济南</option>
<option value="青岛">青岛</option>
<option value="临沂">临沂</option>
<option value="菏泽">菏泽</option>
</select>
<h2>选中的城市:{{ citys }}</h2>
</div>
</template>
4.3 v-model修饰符
<!-- 修饰符 -->
<!-- .lazy,当输入框失去焦点,在同步输入框中的数据 -->
<input type="text" v-model.lazy="msg">
<h2>{{ msg }}</h2>
<!-- .number 将输入框中的内容自动转换成数字类型 -->
<input type="text" v-model.number="counter">
<h2>{{typeof counter }}</h2>
<!-- .trim -->
<input type="text" v-model.trim="msg" @keydown="downmsg">
<h2>{{ msg }}</h2>
5.组件化开发
配置到根组件
结果:
组件是一个带有名称的可复用的实例,单独模块的封装。
为什么data是一个函数,并且要返回一个对象?
防止数据污染。
对比: