Vue的学习与使用（三）

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是一个函数，并且要返回一个对象？

防止数据污染。

 

 对比：