Vue的学习v-on和event

最新推荐文章于 2022-08-16 16:48:29 发布

捡黄金的少年

最新推荐文章于 2022-08-16 16:48:29 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_43288858/article/details/104968479

版权

事件处理：v-on

完整格式： v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)”
缩写格式： @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意： @ 后面没有冒号
event ：函数中的默认形参，代表原生 DOM 事件
当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入
作用：用于监听 DOM 事件
v-on:click="xx"其中xx是method中的方法也就是说点击button，触发v-on:click然后触动methods中的方法
在这里插入图片描述
event传参

效果入下

事件修饰符

.stop 阻止单击事件继续传播 event.stopPropagation()
.prevent 阻止事件默认行为 event.preventDefault()
.once 点击事件将只会触发一次

.stop使用
在这里插入图片描述
.prevent的使用

.once的使用

按键修饰符
格式： v-on:keyup.按键名或 @keyup.按键名
常用按键名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
下面以回车和空格键举例
在这里插入图片描述

表单数据双向绑定v-model

单向绑定：数据变，视图变；视图变（浏览器控制台上更新html），数据不变；上面的都是单向绑定
双向绑定：数据变，视图变；视图变（在输入框更新），数据变；
基础用法
v-model 指令用于表单数据双向绑定，针对以下类型：
text 文本
textarea 多行文本
radio 单选按钮
checkbox 复选框
select 下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

     <div id="app">
               <form action="#"@submit.prevent="submitform">//submit.prevent阻止事件的发生跳转到methods下面的submitform方法
                  姓名(文本)：<input type="text" v-model="name">
                   <br><br>
                  性别(单选按钮)：
                       <input name="sex" type="radio" value="1" v-model="sex" />男
                       <input name="sex" type="radio" value="0" v-model="sex"/>女
                   <br><br>
                  技能(多选框)：
                       <input type="checkbox" name="skills" value="java" v-model="skills">Java开发
                       <input type="checkbox" name="skills" value="vue"  v-model="skills">Vue.js开发
                       <input type="checkbox" name="skills" value="python"  v-model="skills">Python开发
                   <br><br>
                  城市(下拉框)：
                   <select name="citys" v-model='city'>
                       <option v-for="c in citys":value="c.code">{{c.name}}</option>
                   </select>
                   <br><br>
                  说明(多行文本)：<textarea cols="30" rows="5" v-model='esc'></textarea>
                   <br><br>
                   <button type="submit" >提交</button>
               </form>
           </div>

    
           
       
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
    var vm=    new Vue({
            el:'#app',
            data:{
                name:'',
                sex:'0',//默认选中男
                // 默认选中VueJS
                skills:['vue'],
                city:'sh',
                citys:[
                    {code:'bj',name:'北京'},
                    {code:'sh',name:'上海'},
                    {code:'gz',name:'广州'}
                ],
                esc:'1111111'
            },
            methods: {
                submitform:function(){
                    // 发送ajax请求异步处理
                 alert(  this.name+','+this.sex+','+this.skills+','+this.city+','+this.esc) 
                }
            },
        })
    </script>
    
</body>
</html>

捡黄金的少年

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习v-on和event

事件处理：v-on完整格式： v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)”缩写格式： @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意： @ 后面没有冒号event ：函数中的默认形参，代表原生 DOM 事件当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入作用：用于监听 DOM 事件v-on:cli...
复制链接

扫一扫