Vue中事件与表单处理

    methods: {

        fn () {

            this.content = '新内容'

        }

    }

})

设置事件处理程序后，可以从参数中接收事件对象

var vm = new Vue({

el: "#app",

data: {

    content: "新内容"

},

method: {

    fn (event) {

        console.log(event)

    }

}

})

在视图中可以通过 `$event` 访问事件对象

<p> {{ content }} </p>

<button v-on:click="fn(content, $event)">按钮</button>

[]( )表单输入绑定

================================================================



> v-model 指令



用于给 `<input>、<textarea>、<select>` 元素设置双向数据绑定



[]( )输入框绑定

---------------------------------------------------------------



> 表单数据绑定



输入框分为单行输入框 input 与多行输入框

<p> input内容为：{{ value1 }} </p>

<input type="text" v-model="value1">



<p> input内容为：{{ value2 }} </p>

<textare v-model="value2">

[]( )单选按钮绑定

----------------------------------------------------------------



单选按钮的双向数据绑定方式如下

<p> radio 数据为：{{ value3 }} </p>

<input type="radio" id="one" value="1" v-model="value3">

<label for="one">选项一</label>

<p> radio 数据为：{{ value3 }} </p>

<input type="radio" id="two" value="2" v-model="value3">

<label for="two">选项二</label>

[]( )复选框绑定

---------------------------------------------------------------



复选框绑定分为单个选项与多个选项两种情况，书写方式不同

<p> 单个 checkbox 选择的数据为：{{ value4 }} </p>

<input type="checkbox" id="item" value="选项内容" v-model="value4">

<label for="item">选项</label>



<p> 多个 checkbox 选择的数据为：{{ value5 }} </p>

<input type="checkbox" id="one" value="选项一内容" v-model="value5">

<label for="one">选项一</label>

<input type="checkbox" id="two" value="选项二内容" v-model="value5">

<label for="two">选项二</label>

[]( )选择框绑定

---------------------------------------------------------------



选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同

<p> 单选 select 数据为：{{ value6 }} </p>

<select v-model="value6">

    <option value="">请选择</option>

    <option value="1">选项一</option>

    <option value="2">选项二</option>

    <option value="3">选项三</option>

</select>



<p> 多选 select 数据为：{{ value7 }} </p>

<select v-model="value7" multiple>

    <option value="1">选项一</option>

    <option value="2">选项二</option>

    <option value="3">选项三</option>

</select>

[]( )v-model 指令小结

----------------------------------------------------------------------



*   input 输入框：绑定字符串值

*   textarea 输入框：绑定字符串值

*   radio：绑定字符串值

*   checkbox：单个绑定布尔值，多个绑定数组

*   select：单选绑定字符串，多选绑定数组



[]( )修饰符

=============================================================



修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作



[]( )事件修饰符

---------------------------------------------------------------



### []( )prevent 修饰符



用于阻止默认事件行为，相当于 `event.preventDefault()`

<a @click.prevent="fn" href="https://kaiwu.lagou.com/">链接</a>

<a @click.prevent href="https://kaiwu.lagou.com/">链接</a>

### []( )stop 修饰符



用于阻止事件传播，相当于 `event.stopPropagation()`

Vue.js 中允许修饰符进行连写，例如：@click.prevent.stop

### []( )once 修饰符



用于设置事件只会触发一次

<button @click=“fn”>按钮1

<button @click.once=“fn”>按钮2

[]( )按键修饰符

---------------------------------------------------------------



按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式



特殊按键指的是键盘中类似 `esc、enter、delete` 等功能按键，为了更好的兼容性，应首选内置别名

<input type="text" @keyup="fn"> -->

<input type="text" @keyup.49="fn">

<input type="text" @keyup.a="fn">



<input type="text" @keyup.esc="fn">



<input type="text" @keyup.a.b.c="fn">

[]( )系统修饰符

---------------------------------------------------------------



系统按键指的是 `ctrl、alt、shift`等按键
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/70cb3a77c5dde79e7c802fbe33dce81a.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/7b14ae2c42b4815ad9a3d283a934beb3.png)

![](https://img-blog.csdnimg.cn/img_convert/34f5ac340d299d2c1ff9d7c62843511b.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
-------------------



系统按键指的是 `ctrl、alt、shift`等按键
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中...(img-htCX9Ki8-1715675768523)]

[外链图片转存中...(img-rqb1ePhy-1715675768523)]

[外链图片转存中...(img-SB2FI96w-1715675768524)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**