Vue_(基础)Vue中的事件

　　Vue.js中文文档　　传送门

　　Vue@事件绑定
　　　　v-show：通过切换元素的display CSS属性实现显示隐藏；
　　　　v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建；
　　　　v-else：与v-if配对使用；
　　　　v-elseif：与v-if配对使用；
　　　　v-bind：属性绑定；
　　　　v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕，也就是隐藏{{}}；

　　Learn
　　　　一、event事件
　　　　二、v-show和v-if指令
　　　　三、键盘事件
　　　　四、v-bind指令 

　　项目结构

　　

　　【每个demo下方都存有html源码】

一、event事件　　传送门

　　Vue的事件：获取事件对象$event；

　　button上绑定show()方法获得Vue上的event事件

                        show(e){
                            console.log("show");
                            //获得Vue事件
                            console.log(e);
                        }
                <button @click="show($event)">click show!</button><br />

　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                           result:0
                    },
                    methods:{
                        //无参
                        show(e){
                            console.log("show");
                            //获得Vue事件
                            console.log(e);
                        },
                        //带参
                        add(a,b){
                            console.log("add");
                            this.result+=a+b;
                        }
                    }
                });
            }

        </script>
    </head>

    <body>
        <div id="Gary">
                <button @click="show($event)">click show!</button><br />
                <!--鼠标点击-->
                <button @click="add(1,2)">click add!</button>{{result}}
                <!--鼠标进入,使用修饰符once只触发一次-->
                <button @mouseenter.once="add(10,20)">enter add!</button>{{result}}
        </div>

    </body>
</html>

　　event的事件冒泡：事件会向上传播

　　　　　　　　methods:{
                        //无参
                        show(e){
                            console.log("show");
                        },
                        showA(){
                            console.log("showA");
                        },
                        showB(){
                            console.log("showB");
                        }
                    }
<div @click="showA()">
                        <div @click="showB()">
                            <button @click="show($event)">click A!</button>
                        </div>
                </div>        

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                           result:0
                    },
                    methods:{
                        //无参
                        show(e){
                            console.log("show");
                        },
                        showA(){
                            console.log("showA");
                        },
                        showB(){
                            console.log("showB");
                        }
                    }
                });
            }

        </script>
    </head>

    <body>
        <div id="Gary">
                <!--<button @click="show($event)">click show!</button><br />-->
                <!--鼠标点击-->
                <!--<button @click="add(1,2)">click add!</button>{{result}}-->
                <!--鼠标进入,使用修饰符once只触发一次-->
                <!--<button @mouseenter.once="add(10,20)">enter add!</button>{{result}}-->

        <!--事件冒泡-->
                <div @click="showA()">
                        <div @click="showB()">
                            <button @click="show($event)">click A!</button>
                        </div>
                </div>
        </div>

    </body>
</html>

Gary_event.html

　　事件冒泡：即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点

　　原生js阻止事件冒泡，需要先获取事件对象，再调用stopPropagation()方法；

　　vue事件修饰符stop，例@clikc.stop；

                      show(e){
                            console.log("show");
                            e.stopPropagation();
                        }
<button @click.stop="show($event)">click A!</button>

　　事件默认行为：网页元素，都有自己的默认行为，例如，单击超链接会跳转...

　　原生js方式需要获取事件对象，再调用preventDefault()方法；

　　在vue中则使用修饰符prevent，例@clikc.prevent

                        showLink(e){
                            e.preventDefault();
                        }
    <a href="Gary_event.html" @click.prevent="showLink($event)">click link!</a>

二、v-show和v-if指令　　传送门

　　v-show：通过切换元素的display CSS属性实现显示隐藏；

　　v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建；

                new Vue({
                    el:‘#Gary‘,
                    data:{
                           flag:true
                    }
                });
            <button @click="flag = !flag">click</button>
            <h1 v-show="flag">Hello Gary!</h1>
            <h1 v-if="flag">Hello Gary!</h1>

　　v-show是显示与隐藏，v-if是创建与销毁!!!

　　v-if、v-else、v-else-if控制流程语句

                   data:{
                           flag:true,
                           num:0
                    }
        <button @click="num=1">--1--</button>
        <button @click="num=2">--2--</button>
        <button @click="num=3">--3--</button>
        <h2 v-if="num=== 1">语文课</h2>
        <h2 v-else-if="num=== 2">数学课</h2>
        <h2 v-else>英语课</h2>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                 new Vue({
                    el:‘#Gary‘,
                    data:{
                           flag:true,
                           num:0
                    }
                });
            }

        </script>
    </head>

    <body>
        <div id="Gary">
            <button @click="flag = !flag">click</button>
            <h1 v-show="flag">Hello Gary!</h1>
            <h1 v-if="flag">Hello Gary!</h1>

        <button @click="num=1">--1--</button>
        <button @click="num=2">--2--</button>
        <button @click="num=3">--3--</button>
        <h2 v-if="num=== 1">语文课</h2>
        <h2 v-else-if="num=== 2">数学课</h2>
        <h2 v-else>英语课</h2>

         </div>
    </body>
</html>

Gary_v-show.html

三、键盘事件

　　Vue的键盘事件：@keydown：按下、@keypress：按住、@keyup：抬起

　　以下分别是几种不同的键盘按键提交方式

　　　　　　　　methods:{
                        onEnter(e){
                            if(e.keyCode==13){
                                console.log("原生js-按下回车");
                            }
                        },
                        newOnEnter(){
                            console.log("Vue-按下回车")
                        },
                        onKeyAUp(){
                            console.log("抬起了按键A")
                        }
                    }
            <!--原生js方式-->
            <input type="text" placeholder="onEnter" @keydown="onEnter($event)"/>    <br />
            <!--vue提供方式-->
            <input type="text" placeholder="newOnEnter  13" @keydown.13="newOnEnter($event)"/>    <br />
            <!--vue提供内置按键别名方式-->
            <input type="text" placeholder="newOnEnter  enter" @keydown.enter="newOnEnter($event)"/><br />
            <!--其它按键别名-->
            <input type="text" placeholder="keyup onKeyAUp" @keyup.a="onKeyAUp"/><br />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                 new Vue({
                    el:‘#Gary‘,
                    data:{

                    },
                    methods:{
                        onEnter(e){
                            if(e.keyCode==13){
                                console.log("原生js-按下回车");
                            }
                        },
                        newOnEnter(){
                            console.log("Vue-按下回车")
                        },
                        onKeyAUp(){
                            console.log("抬起了按键A")
                        }
                    }
                });
            }

        </script>
    </head>

    <body>
        <div id="Gary">

            <!--原生js方式-->
            <input type="text" placeholder="onEnter" @keydown="onEnter($event)"/>    <br />
            <!--vue提供方式-->
            <input type="text" placeholder="newOnEnter  13" @keydown.13="newOnEnter($event)"/>    <br />
            <!--vue提供内置按键别名方式-->
            <input type="text" placeholder="newOnEnter  enter" @keydown.enter="newOnEnter($event)"/><br />
            <!--其它按键别名-->
            <input type="text" placeholder="keyup onKeyAUp" @keyup.a="onKeyAUp"/><br />
         </div>
    </body>
</html>

Gary_event-keyboard.html

四、v-bind指令　　传送门

　　v-bind：属性绑定，动态地绑定一个或多个特性，或一个组件 prop 到表达式

　　将Vue官网logo图片地址存放到Vue的data数据域中

　　　　　　　　data:{
                           imgUrl:"https://cn.vuejs.org/images/logo.png",
                           Mywidth:"200px",
                           Myheight:"200px"
                    },
            <!--错误写法-->
             <img src="imgUrl"  width="Mywidth"  :height="Myheight" /><hr />
             <img v-bind:src="imgUrl"  v-bind:width="Mywidth"   v-bind:height="Myheight" /><hr />
             <!--简写-->
             <img :src="imgUrl" :width="Mywidth"  :height="Myheight"/><hr />

　　使用错误的语法会取不到Vue数据域中图片src的地址

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>

            window.onload = () =>{
                new Vue({
                    el:‘#Gary‘,
                    data:{
                           imgUrl:"https://cn.vuejs.org/images/logo.png",
                           Mywidth:"200px",
                           Myheight:"200px"
                    },
                    methods:{

                    }
                });
            }

        </script>
    </head>

    <body>
        <div id="Gary">
            <!--错误写法-->
            <img src="imgUrl"  width="Mywidth"  :height="Myheight" /><hr />
             <img v-bind:src="imgUrl"  v-bind:width="Mywidth"   v-bind:height="Myheight" /><hr />
             <!--简写-->
             <img :src="imgUrl" :width="Mywidth"  :height="Myheight"/><hr />
        </div>

    </body>
</html>

Gary_v-bind.html

　　v-bind处理class与style样式

　　　　　　　<!--普通的CSS引入-->
            一<h3 class="myColor">Vue</h3><hr />

            <!--变量引入-->
            二<h3 :class="fontColor">Vue</h3><hr />

            <!--以数组的形式 引入多个-->
            三<h3 :class="[fontColor, fontBackgroundColor]">Vue</h3><hr />
            <!--使用json 方式-->
            四<h3 :class="{myColor : flag, myBackgounrdColor : !flag}">Vue</h3><hr />

            <!--数组 + json-->
            五<h3 :class="[fontSize, {myColor : flag, myBackgounrdColor : flag}]">Vue</h3><hr />

            <!--绑定style-->
            六<h3 :style="[colorA, colorB]">Vue</h3>

　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-bind_1</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            window.onload = () => {
                let vm = new Vue({
                    el : ‘#Gary‘,
                    data : {
                        fontColor : ‘myColor‘,
                        fontBackgroundColor : ‘myBackgounrdColor‘,
                        flag : true,
                        fontSize : ‘myFontSize‘,
                        colorA : {color : ‘rgb(53, 73, 93)‘},
                        colorB : {backgroundColor : ‘rgb(65, 184, 131)‘}
                    },
                    methods : {

                    }
                });
            }
        </script>
        <style type="text/css">
            .myColor{
                color: rgb(53, 73, 93);
                text-align: center;
            }
            .myBackgounrdColor{
                background: rgb(65, 184, 131);
            }
            .myFontSize{
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="Gary">
            <!--普通的CSS引入-->
            一<h3 class="myColor">Vue</h3><hr />

            <!--变量引入-->
            二<h3 :class="fontColor">Vue</h3><hr />

            <!--以数组的形式 引入多个-->
            三<h3 :class="[fontColor, fontBackgroundColor]">Vue</h3><hr />
            <!--使用json 方式-->
            四<h3 :class="{myColor : flag, myBackgounrdColor : !flag}">Vue</h3><hr />

            <!--数组 + json-->
            五<h3 :class="[fontSize, {myColor : flag, myBackgounrdColor : flag}]">Vue</h3><hr />

            <!--绑定style-->
            六<h3 :style="[colorA, colorB]">Vue</h3>
        </div>
    </body>
</html>

Gary_v-bind_2.html

原文地址：https://www.cnblogs.com/1138720556Gary/p/10421390.html

时间： 2024-10-07 17:52:36

Vue_(基础)Vue中的事件的相关文章

Vue_(基础)Vue中的指令

Vue.js中文文档 传送门 Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀   Vue指令: v-model:数据双向绑定: v-text:以纯文本方式显示数据: v-html:可以识别HTML标签: v-once:只渲染元素或组件一次: v-pre:不进行编译,直接显示内容: v-for:对集合或对象进行遍历: 项目结构 [每个demo下方都存有html源码] Hello World入门 在浏览器中打印Hello World信息,并在Console控制台中可通过

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

（二）咋使用VUE中的事件修饰符

1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添加.stop修饰符,如下: 我们发现再次点击按钮后,事件不再冒泡,控制台只打出 2.prevent取消默认事件 .prevent等同于JavaScript的event.preventDefault(),用于取消默认事件.比如我们页面的<a href="#">标签,当用户点击时,

vue中的事件监听机制

事件监听 基础用法 监听dom事件使用v-on指令: v-on:事件类型="一个函数" .这个事件类型可以自定义. v-on 指令绑定事件后,就会监听相应的事件,并在触发时运行一些 JavaScript 代码. <div id="box1"> <button v-on:click="counter += 1">点我</button> <p>已点击 {{ counter }} 次</p>

vue中的事件监听之——v-on vs .$on

跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对照vue官网api学习并coding了相关代码,两者的用法与比较描述如下. v-on vm.$on 可监听普通dom的原生事件: 可监听子组件emit的自定义事件: 监听当前实例的自定义事件 vue官网相关说明截图: 由此可见,想监听vue实例自身自定义事件,只能用.$on并且这是vue实例的方法,

基础-JavaScript中的事件

在html中引入外部js方式: <html> <head> <script src="xxx.js"></script> </head> <body></body> </html> js中常用的事件: onclick点击事件,onfocus获取焦点,onblur失去焦点,onkeydown键被按下,onkeyup键被抬起,onkeypress键被按下或按住,nomouseup某个鼠标按键被松

vue中键盘事件

@keydown.按键对应的编码名 或者@keydown.(enter left up down right space delete tab esc ...) 组合按键 例如:同时按下ctrl+B @keydown.ctrl.66="" 原文地址:https://www.cnblogs.com/H5lcy/p/11650839.html

vue学习指南：第二篇(详细Vue基础) - Vue的指令

一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. 绑定数据 2. dom检测 3. vue 实例 靠 new 关键字实例化 vue 对象,使用 mvvm 模型 1. M modal 数据 2. v view 视图 3. vm 全称viewmodal 就是一个vue实例 4. Vue.js 是封装的一个类,参数是个 options 对象 最常用的属性

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func