Vue.js 事件处理

表单输入绑定

基础用法

v-model 指令在表单 <input>、<textarea>及 <select> 元素上创建双向数据绑定。
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

vue 模板语法包括两大类

1. 插值语法 功能：
   用于解析标签体内容
   写法：{｛xxx } }，xxx是js表达式，可以直接读取到 data 中的所有区域
2. 指令语法 功能：
   用于解析标签（包括：标签属性、标签体内容、绑定事件.）
   例： <a v-bind:href="xXX"＞或筒<a：href="xXX"＞，xXX同祥要js 表式，可以接取 到 data 中的所有属性
   注：Vue 中有很多的指令，且形式都是 V-xxx，此处只是拿v-bind 举例

数据绑定的方式

单向绑定 v-bind :数据只能从 data 流向页面
双向绑定 v-model: 数据不仅能从 data 流向页面，还可以从页面流向data

事件的基本用法 事件处理

事件名	解析
v-on:xxx或 @xxx	绑定事件，其中xxx是事件名

2.事件的回调需要配置在 methods对象中，最终会在 vm上
3. methods中配置的函数，不要用箭头函数，否则 this就不是vm了
4. methods中配置的函数，都是被 Vue 所管理的函数，this的指向是vm或 组件实例对象
5. @click=“demo” 和 @click="demo（$event）”效果一致，但后者可以传参

el与data的两种写法

el 的2种写法
创建 vue 实例对象的时候配置
el 属性
先创建 vue实例，
随后再通过vm.$mount（"#root’）

data 的2种写法
对象式： data: ( }
函数式： data（）｛return｛｝｝

事件修饰符

事件	作用
.prevent	阻止浏览器默认事件
.stop	阻止冒泡事件
.once	只触发一次
.captur	捕获模式 打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发
.self	阻止自身事件促发，但不会阻止冒泡，间接性有捕获效果在冒泡事件中，点击设置了self的子类，才不会触发自身，点击设置了self本身是可以触发的
event.stopPropagation()	阻止冒泡

	
	<a href="" @click.prevent="func1()">链接</a>
        <div @click.self="func2()" class="box1">
            1
            <p @click.self.once="func3()" class="box2">
                2
                <span @click="func4()" class="box3">3</span>
            </p>
        </div>
        

v-model修饰符

修饰符	作用
.lazy	失去焦点后提交值
.numbe	有效转换"1"== 1 为数字
.trim	清除前后空格

代码演示：

	
	<form action="" method=""  @click.prevent="func()">
            姓名：<input type="text" v-model.trim="formData.userName">
           	//姓名：<input type="text" v-model.trim:value="formData.userName">
            <br>
          	年龄：<input type="number" v-model:value="formData.age"> 
            //v-model.number有效转换"1"== 1 为数字 
            年龄：<input type="number" v-model="formData.age">
            年龄：<input type="number" v-model.number="formData.ages">
            <br>
            性别：
            <label for="nan">男</label>
            <input type="radio" id="nan" name="1" v-model="formData.sex" value="1">
            <label for="nv">女</label>
            <input type="radio" id="nv" name="1" v-model="formData.sex" value="2">
            <br>
            手机号：
            <input type="tel" v-model:value="formData.iphone">
            <br>
            爱好：
            <label for="sing">唱</label>
            <input type="checkbox" id="sing" v-model="formData.like" value="sing">
            <label for="junp" >跳</label>
            <input type="checkbox" id="junp" v-model="formData.like" value="junp">
            <label for="rap">rap</label>
            <input type="checkbox" id="rap" v-model="formData.like" value="rap">
            <label for="bask">篮球</label>
            <input type="checkbox" id="bask" v-model="formData.like" value="bask">
            <br>
           	//v-model.lazy 失去焦点后提交值
            <textarea v-model.lazy="formData.other" name="" id="" cols="30" rows="10"></textarea>
            <textarea v-model="formData.others" name="" id="" cols="30" rows="10"></textarea>
            {{formData.other}}
            {{formData.others}}
            <br>
            <input type="submit" value="提交">
            <button>确定</button>
            ----------
            <div>
                <input type="text":value="val" @input="funcOne()">
            </div>
        </form>
        

使用v-model时尽量使用v-model="" 不要使用v-model:value=“”，只有在需要设置初始值才使用v-model:value=""