网站首页 Vue 正文

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 
            事件注册:
                语法:
                    v-on:事件名称 = "事件函数/表达式"
                简写
                    @事件名称 = "事件函数/表达式"
         -->
         <button v-on:click="hander">点击</button>
         <hr>
         <button @click="hander">点击</button>


    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                hander(){
                    console.log('被触发了');
                }
            }
        })
    </script>

事件传参

语法:
@事件名称="事件函数(参数一,参数二,参数N)"

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 
            事件注册:
                语法:
                    v-on:事件名称 = "事件函数/表达式"
                简写
                    @事件名称 = "事件函数/表达式"
         -->
         <button v-on:click="hander">点击</button>
         <hr>
         <button @click="hander(666)">666</button>
         <button @click="hander(10*20)">乘法</button>
         <button @click="hander(10+20)">加法</button>


    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                hander(num){
                    console.log(num);
                }
            }
        })
    </script>

event

两种方法:
隐士获取:
显示获取:

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 显示获取event对象:传递固定参数$event -->
        <button @click="getEvent(10,$event,20)">获取event事件对象</button>
        <hr>
        <!-- 隐士获取event对象:传递参数$event可以省略 -->
        <button @click="getEvent1(666,777)">获取event事件对象</button>

    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                getEvent(e,num1,num2){
                    console.log(e);
                    console.log(num1,num2);
                },
                getEvent1(e,num1,num2){
                    console.log(e);
                    console.log(num1,num2);
                }
            }
        })
    </script>

阻止事件冒泡

方式一:
e.stopPropagation()
方式二:
.stop:事件修饰符
@事件名称.stop="事件函数";

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .outer{
            width:200px;
            height: 200px;
            background-color: pink;
        }
        .inner{
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <div class="outer" @click="outer">
            <!-- .stop  事件修饰符 -->
            <div class="inner" @click.stop="inner"></div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                outer(){
                    console.log('outer');
                },
                inner(e){
                    // 阻止事件冒泡
                    // e.stopPropagation()
                    console.log('inner');
                }
            }
        })
    </script>

阻止默认事件

方式一:
// 阻止默认事件
e.preventDefault()
方式二:
@contextmenu.prevent="yj"

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <a @click="stop" href="http://www.jd.com">京东</a>
        <div class="box" @contextmenu.prevent="yj"></div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                stop(e){
                    // 阻止默认事件
                    e.preventDefault()
                    console.log('点击了');
                },
                yj(e){
                    // e.preventDefault()
                    console.log('右键了');
                }
            }
        })
    </script>

捕获事件.capture

<!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .outer{
            width:200px;
            height: 200px;
            background-color: pink;
        }
        .inner{
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 事件修饰符  .capture-->
        <div class="outer" @click.capture="outer">
            <!-- .stop  事件修饰符 -->
            <div class="inner" @click="inner"></div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                outer(){
                    console.log('outer');
                },
                inner(){
                    console.log('inner');
                }
            }
        })
    </script>

事件修饰符

.stop #阻止事件冒泡

.prevent    #阻止默认事件

.capture    #事件捕获

.self           #是元素本身才触发

.once   #只触发一次

self

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:300px;
            height: 300px;
            background-color: brown;
        }
        .outer{
            width:200px;
            height: 200px;
            background-color: pink;
        }
        .inner{
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
       <div class="box" @click="box">
           <!-- 是事件源本才触发 -->
        <div class="outer" @click.self="outer">
            <div class="inner" @click="inner"></div>
        </div>
       </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                box(){
                    console.log('box');
                },
                outer(){
                    console.log('outer');
                },
                inner(e){
                  
                    console.log('inner');
                }
            }
        })
    </script>

.once

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:300px;
            height: 300px;
            background-color: brown;
        }
        .outer{
            width:200px;
            height: 200px;
            background-color: pink;
        }
        .inner{
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
       <div class="box" @click="box">
           <!-- 是事件源本才触发 -->
        <div class="outer" @click.self="outer">
            <div class="inner" @click="inner"></div>
        </div>
       </div>
       <hr>
       <button @click.once="send">只触发一次</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                send(){
                    console.log('被触发了');
                },
                box(){
                    console.log('box');
                },
                outer(){
                    console.log('outer');
                },
                inner(e){
                  
                    console.log('inner');
                }
            }
        })
    </script>

按键修饰符

.enter .up .left .right .down
.13 .38 .37 .39 .40

<!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 回车 .enter -->
        <input type="text" @keydown.enter="enter" placeholder="回车">
        <!-- 回车  .13 -->
        <input type="text" @keydown.13="enter" placeholder="回车">
        <hr>
        <!-- 左键 .left -->
        <input type="text" @keydown.left="left" placeholder="左键">
        <!--  左键: .37-->
        <input type="text" @keydown.37="left" placeholder="左键">
        <hr>
        <!-- 上键 .top -->
        <input type="text" @keydown.up="top" placeholder="上键">
        <!--  上键: .37-->
        <input type="text" @keydown.38="top" placeholder="上键">
        <hr>
        <!-- 右键 .right -->
        <input type="text" @keydown.right="right" placeholder="右键">
        <!--  右键: .39-->
        <input type="text" @keydown.39="right" placeholder="右键">
        <hr>
        <!-- 下键 .down -->
        <input type="text" @keydown.down="down" placeholder="下键">
        <!--  下键: .37-->
        <input type="text" @keydown.40="down" placeholder="下键">
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                enter(){
                    console.log('enter');
                },
                left(){
                    console.log('left');
                },
                top(){
                    console.log('top');
                },
                right(){
                    console.log('right');
                },
                down(){
                    console.log('down');
                }
            }
        })
    </script>

$set用法

在vue中往数组或者对象中增加新的数据或者属性时,需要使用$set方法,并且更新视图
1.this.$set(操作的对象,下标/属性名,值/属性值)
2.Vue.set(操作的对象,下标/属性名,值/属性值)
3.arr.splice(下标,要删除的项目数,要添加到数组中的新项目);

set操作数组

this.$set(目标对象,下标,值)
Vue.set(目标对象,下标,值)

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <div>{{arr}}</div>
        <button @click="add('刘畅')">刘畅</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性
                arr:['杨志远','刘格格','王成玉'],
            },
            methods:{//方法
                add(name){
                   
                    // this.arr[3] = name;

                    // 方式一:
                    // this.$set(目标对象,下标,值)
                    // this.$set(this.arr,3,name)

                    // 方式二:
                    // Vue.set(目标对象,下标,值)
                    Vue.set(this.arr,3,name)
                    console.log(this.arr);
                }
            }
        })
    </script>

$set操作对象

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <div>{{person}}</div>
        <button @click="addSex('男')">增加性别</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性
                person:{
                    name:'王一博',
                    age:25,
                }
            },
            methods:{//方法
                addSex(sex){
                    // this.person.sex = sex;

                    // 方式一
                    // this.$set(目标对象,属性名,属性值)
                    // this.$set(this.person,'sex',sex)

                    // 方式二
                    // Vue.set(目标对象,属性名,属性值)
                    Vue.set(this.person,'sex',sex)
                    console.log(this.person);
                }
            }
        })
    </script>

$set操作数组对象

 <!-- 2.创建dom元素 -->
    <div id="app">
        <ul>
            <li v-for="(item,index)  in stars" :key="item.id">
                <div>
                    {{item.name}}=={{item.type}}
                    <button @click="changeName(index,'关晓彤')">修改name</button>
                    <button @click="changeType(index,'话剧演员')">修改type</button>
                </div>
            </li>
        </ul>
        <button @click="show">展示数据</button>
    </div>
    <script>
        let arr = [
            {id:1,name:'沈腾'},
            {id:2,name:'贾玲'},
        ]

        let vm = new Vue({
            el:'#app',
            data:{//属性
                stars:[],//明星
            },
            methods:{//方法
                show(){
                    // 往数组中的每一项中增加type类型为:喜剧演员
                    this.stars = arr;
                    this.stars.forEach(item=>{
                        item.type = '喜剧演员'
                    })
                    console.log(this.stars);
                },
                changeName(index,name){
                    // 修改数据
                    this.stars[index].name = name;
                },
                changeType(index,type){
                    // this.stars[index].type = type;
                    let obj = this.stars[index];
                    obj.type = type;
                    // 方式一 
                    // this.stars.splice(index,1,obj);

                    // 方式二
                    // this.$set(this.stars,index,obj);

                    // 方式三
                    Vue.set(this.stars,index,obj);
                    console.log(this.stars);
                }
            }
        })
    </script>

表单元素处理

input/textarea:在vue中使用v-model来实现双向数据绑定,跟value无关
radio:默认值: 当v-model绑定的初始值跟value值相等时,默认选中
chekbox:默认值: 当v-model绑定的初始值跟value值相等时,默认选中
当没有value值,表单提交默认的结果为:[null]
select:默认值: 当v-model绑定的初始值跟value值相等时,默认选中
当没有value值,表单提交默认的结果为:""

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建dom元素 -->
    <div id="app">
        <!-- 
            确认密码:rpass
            后端api:
                用户名:username
                密码:pass
                性别:sex   1:男 2:女
                爱好:hobby  ['playing','basketball','eat','readBook']
                课程:course  ['web','java','ui','bigData']
                备注:desc 
         -->
         <!-- 
            input/textarea:在vue中使用v-model来实现双向数据绑定,跟value无关
            radio:默认值:  当v-model绑定的初始值跟value值相等时,默认选中
            chekbox:默认值: 当v-model绑定的初始值跟value值相等时,默认选中
                           当没有value值,表单提交默认的结果为:[null] 
            select:默认值: 当v-model绑定的初始值跟value值相等时,默认选中        
                          当没有value值,表单提交默认的结果为:""
          -->
         <h2>欢迎注册</h2>
         <div>用户名
            <input type="text" v-model="user.username">
         </div>
         <div>密码
            <input type="password" v-model="user.pass">
         </div>
         <div>确认密码
            <input type="password" v-model="rpass">
         </div>
         <div>性别
             <!-- .number 表单修饰符 将v-model绑定的结果转为number类型 -->
            <input type="radio" v-model.number="user.sex" value="1">男
            <input type="radio" v-model.number="user.sex" value="2">女
         </div>
         <div>爱好
            <input type="checkbox" v-model="user.hobby" value="playing">打英雄联盟
            <input type="checkbox" v-model="user.hobby" value="basketball">打篮球
            <input type="checkbox" v-model="user.hobby" value="eat">吃
            <input type="checkbox" v-model="user.hobby" value="readBook">读书
         </div>
         <div>课程
             <select v-model="user.course">
                 <option value="" readonly>--请选择--</option>
                 <option value="web">web开发攻城狮</option>
                 <option value="java">java开发攻城狮</option>
                 <option value="ui">ui开发工程师</option>
                 <option value="bigData">大数据开发工程师</option>
             </select>
         </div>
         <div>备注
            <textarea v-model="user.desc" cols="30" rows="10"></textarea>
         </div>
         <div>
             <button @click="reg">注册</button>
         </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{//属性
                rpass:'123',//确认密码
                user:{
                    username:'',//用户名
                    pass:'123',//密码
                    sex:2,//性别  1:男  2:女
                    hobby:['basketball'],//爱好
                    course:'java',//课程
                    desc:'',//描述
                }
            },
            methods:{//方法
                reg(){
                    if(this.user.pass === this.rpass){
                        console.log(this.user);
                    }else{
                        alert('两次密码不一致');
                    }
                }
            }
        })
    </script>
</body>

表单修饰符

.number #将数据转为number类型
.trim #取出字符窜收尾空格
.lazy #失去光标时实现双向数据绑定

原文链接：https://blog.csdn.net/weixin_58139900/article/details/122096388

上一篇：TypeError: Cannot read propert
下一篇：【VUE】vue使用QrCode插件实现生成二维码

网站首页 Vue 正文

vue的事件处理，$set的用法和表单元素处理修饰符

事件处理

事件注册

事件传参

event

阻止事件冒泡

阻止默认事件

捕获事件.capture

事件修饰符

按键修饰符

$set用法

set操作数组

$set操作对象

$set操作数组对象

表单元素处理

表单修饰符

相关推荐