【Vue】模板语法，事件处理器及综合案例、自定义组件、组件通信

2023-09-20 11:11:03

一、事件处理器

我们之前事件监听可以使用v-on 指令

1、事件修饰符

在Vue中我们通过由点(.)表示的指令后缀来调用修饰符，比如：

  1.   .stop：阻止事件冒泡。当事件触发时，该修饰符将停止事件进一步冒泡到父元素。相当于调用了 event.stopPropagation()
  2.   .prevent：阻止默认事件。默认情况下，某些元素会有默认的事件行为，比如<a>标签的点击跳转，使用.prevent 可以阻止默认事件的触发。相当于调用了 event.preventDefault()。
  3.   .capture：使用事件捕获模式。默认情况下，事件是在冒泡阶段处理的（即从子元素到父元素）。使用 .capture 修饰符将事件处理移到事件捕获阶段（即从父元素到子元素）。
  4.   .self：只触发当前元素本身的事件。当事件绑定在子元素上时，该修饰符只允许事件在子元素上触发，而不会触发父元素上相同事件。
  5.   .once：：只触发一次事件。使用 .once 修饰符可以确保事件只被触发一次，之后该事件监听器会自动被移除。
  <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  <!-- click 事件只能点击一次 -->
  <a v-on:click.once="doThis"></a>

2、冒泡案例(.stop)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
    .red {
        width: 400px;
        height: 400px;
        background-color: red;
    }

    .orange {
        width: 300px;
        height: 300px;
        background-color: orange;
    }

    .blue {
        width: 200px;
        height: 200px;
        background-color: blue;
    }

    .black {
        width: 500px;
        height: 500px;
        background-color: black;
    }
</style>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>冒泡事件</p>
    <div class="black" @click="black">
        <div class="red" @click="red">
            <div class="orange" @click="orange">
                <div class="blue" @click="blue">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                f200: 'f200'
            };
        },
        methods: {
            red() {
                alert("red(红色)");
            },
            orange() {
                alert("orange（橙色）");
            },
            blue() {
                alert("blue（蓝色）");
            },
            black() {
                alert("black（黑色）");
            }
        }
    })
</script>

</html>

当我们加上了.stop修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
    .red {
        width: 400px;
        height: 400px;
        background-color: red;
    }

    .orange {
        width: 300px;
        height: 300px;
        background-color: orange;
    }

    .blue {
        width: 200px;
        height: 200px;
        background-color: blue;
    }

    .black {
        width: 500px;
        height: 500px;
        background-color: black;
    }
</style>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>冒泡事件</p>
    <div class="black" @click.stop="black">
        <div class="red" @click.stop="red">
            <div class="orange" @click.stop="orange">
                <div class="blue" @click.stop="blue">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                f200: 'f200'
            };
        },
        methods: {
            red() {
                alert("red(红色)");
            },
            orange() {
                alert("orange（橙色）");
            },
            blue() {
                alert("blue（蓝色）");
            },
            black() {
                alert("black（黑色）");
            }
        }
    })
</script>

</html>

3、触发案例(.once)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>点击</p>
    <input :value="msg"/>
    <button @click="dosub">提交</button>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                msg: '偶买噶'
            };
        },
        methods: {
            dosub() {
                alert(this.msg);
            }
        }
    })
</script>

</html>

添加.once之后只能点击一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>点击</p>
    <input :value="msg"/>
    <button @click.once="dosub">提交</button>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                msg: '偶买噶'
            };
        },
        methods: {
            dosub() {
                alert(this.msg);
            }
        }
    })
</script>

</html>

4、综合案例(表单)

需要注意的是复选框v-model="hobbyMax"中的hobbyMax使用数组来接收

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <label>姓名：</label><input v-model="username"/><br/>
    <label>密码：</label><input v-model="pwd" type="password"/><br/>
    <!-- 将用户的输入值转为 Number 类型 -->
    <label>年龄：</label><input v-model.number="age" type="number"/><br/>
    <label>性别：</label>
    <div v-for="s in sexMax">
        <input type="radio" v-model="sex" name="sex" v-bind:value="s.id"/>{{s.name}}<br/>
    </div>
    <label>爱好：</label>
    <div v-for="h in hobby">
        <input type="checkbox" v-model="hobbyMax" v-bind:value="h.id"/>{{h.name}}
    </div>
    <label>类别：</label>
    <select v-model="type">
        <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
    </select><br/>
    <label>备注：</label>
    <!--    v-bind:value="info"-->
    <textarea v-model="info"></textarea><br/>
    确认<input type="checkbox" v-model="flag"/>
    <input type="submit" v-bind:disabled="show" v-on:click="doSubmit"/>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                username: null,
                pwd: null,
                age: 10,
                sex: 1,
                sexMax: [{id: 1, name: "男"}, {id: 2, name: "女"}, {id: 3, name: "其他"}],
                hobby: [
                    {
                        id: 1,
                        name: '篮球'
                    },
                    {
                        id: 2,
                        name: '唱'
                    },
                    {
                        id: 3,
                        name: '跳'
                    },
                    {
                        id: 4,
                        name: 'rap'
                    }],
                hobbyMax: [],
                types: [
                    {
                        id: 1,
                        name: '职业人'
                    },
                    {
                        id: 2,
                        name: '学生'
                    },
                    {
                        id: 3,
                        name: '社会人'
                    }],
                type: null,
                info: '请输入你的个性签名',
                flag: false
            }
        },
        computed: {
            show: function () {
                return !this.flag;
            }
        },
        methods: {
            doSubmit: function () {
                var obj = {
                    username: this.username,
                    pwd: this.pwd,
                    age: this.age,
                    sex: this.sex,
                    hobbyMax: this.hobbyMax,
                    type: this.type,
                    info: this.info,
                }
                console.log(obj);
            }
        }

    })
</script>
</html>

效果演示

二、自定义组件

1、 vue组件

 1.1、组件简介

      组件(Component)是Vue最强大的功能之一

      组件可以扩展HTML元素，封装可重用的代码

      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  1.2、 全局和局部组件

  • 全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
  • 局部组件: new Vue({el:'#d1',components:{...}})

      注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

  1.3 props

      props是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

   1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods

        以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

   2：当我们定义这个 <button-counter> 组件时，你可能会发现它的data并不是像这样直接提供一个对象

  

      data: {

          count: 0

        }

        取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

        data: function () {

          return {

            count: 0

          }

        }

 

    3：定义组件名的方式有两种

         短横线分隔命名(建议使用)

         Vue.component('my-component-name', { /* ... */ })，

引用方式：<my-component-name>

         首字母大写命名

       

  Vue.component('MyComponentName', {  ...  })，
    引用方式： <my-component-name>和<MyComponentName>都是可接受的  

    4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，

         camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

       

  props: ['postTitle'],<my-tag post-title="hello!"></my-tag>

    5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

         希望每个 prop 都有指定的值类型  

       props: {

           title: String,

           likes: Number,

           isPublished: Boolean,

           commentIds: Array,

           author: Object,

           callback: Function,

           contactsPromise: Promise // or any other constructor

         }

2、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <!-- 定义组件不能用驼峰命名 -->
    <!-- 需求是：当引用一个myButton，也页面上一个独特标记按钮 -->
    <my-img></my-img>
    <my-button m="卡拉米"></my-button>

    <!-- <button onclick=""></button> -->
</div>
</body>
<script type="text/javascript">
    Vue.component('my-button', {
        // props是定义组件中的变量的
        props: ['m'],
        // template代表了自定义组件在页面上显示的类容
        template: '<button v-on:click="incrn">我被{{m}}点击{{n}}次</button>',
        data: function () {
            return {
                n: 1
            }
        },
        methods: {
            incrn() {
                this.n++;
            }
        }
    });
    Vue.component('my-img', {
        // template代表了自定义组件在页面上显示的类容
        template: '<img style="width: 100px;height: 100px;" src="https://ts1.cn.mm.bing.net/th/id/R-C.b0ea268fa1be279d112489ce83ad4696?rik=qItsh%2fBiy33hlg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215009.jpg&ehk=S6PLWamt%2bMzQV8uO9ugcU5d5M19BpXtCpNz2cRJ7q9M%3d&risl=&pid=ImgRaw&r=0">',
    });
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {};
        }
    })
</script>

</html>

三、组件通信

1. 自定义事件

  1.    监听事件：$on(eventName)
  2.    触发事件：$emit(eventName)

   1.1、Vue自定义事件是为组件间通信设计  

        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

  1.         父Vue->子Vue，通过prop传递数据
  2.         子Vue->父Vue，通过事件传递数据

   1.2、事件名

        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

        建议使用“短横线分隔命名”

2、案例

2.1、父传子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通信</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>父传子1</h3>
    <my-button m="牛马"></my-button>
    <h3>父传子2</h3>
    <my-button m="小卡拉米" n="2"></my-button>
</div>
</body>
<script>
    // 定义全局组件的方式
    Vue.component('my-button', {
        props: ['m', 'n'],
        template: '<button v-on:click="MyButton">{{m}}被点了{{n}}次</button>',
        data: function () {
            return {
                n: 1
            };
        },
        methods: {
            MyButton: function () {
                this.n++;
            }
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "999"
        }
    });
</script>
</html>

2.2、子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通信</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app2">
    <h3>子传父</h3>
    <!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
    <my-buttons m="666" @getBut="getXx"></my-buttons>
</div>
</body>
<script>
    // 定义全局组件的方式
    Vue.component('my-buttons', {
        props: ['m'],
        template: '<button v-on:click="MyButton">{{m}}被点了</button>',
        methods: {
            MyButton: function () {
                let id = 123;
                let name = "天才";
                this.$emit('getbut', id, name);
            }
        }
    })
    var vm = new Vue({
        el: "#app2",
        data: {
            msg: "666"
        },
        methods: {
            getXx: function (a, b) {
                console.log(a);
                console.log(b);
            }
        }
    });
</script>
</html>

更多推荐

NSSCTF web 刷题记录2

文章目录前言题目[广东强网杯2021团队组]love_Pokemon[NCTF2018]Easy_Audit[安洵杯2019]easy_web[NCTF2018]全球最大交友网站prize_p2[羊城杯2020]easyser[FBCTF2019]rceservice方法一方法二[WUSTCTF2020]颜值成绩查询前

SpringCLoud——服务的拆分和远程调用

服务拆分服务拆分注意事项一般是根据功能的不同，将不同的服务按照功能的不同而分开。微服务拆分注意事项不同微服务，不要重复开发相同业务微服务数据独立，不要访问其他微服务的数据库微服务可以将自己的业务暴露为接口，供其他微服务调用远程调用对于远程调用，之前我们说过，微服务之所以不能像单个服务那样互相的调用各自服务的信息，是因为

REC 系列 Visual Grounding with Transformers 论文阅读笔记

REC系列VisualGroundingwithTransformers论文阅读笔记一、Abstract二、引言三、相关工作3.1视觉定位3.2视觉Transformer四、方法4.1基础的视觉和文本编码器4.2定位编码器自注意力的文本分支文本引导自注意力的视觉分支4.3定位解码器定位query自注意力编码器-解码器自

告别加班烦恼：前端表格构建公式树的绝妙应用！

还在为满屏的公式而“内牛满面”吗？还在为长串的公式解析而发愁吗？还在定位错误的公式而苦恼吗？上班要写代码，加班还要分析这又长又臭的公式。你的发际线还好吗？本葡萄来拯救你的发际线啦！带来的不是洗发水，而是公式追踪！这一章，让本葡萄带你用前端电子表格的公式追踪构建公式树，快（解）速（救）分（你）析（的）公（脱）式（发）问题

【物联网】ROM、RAM和FLASH的区别

引言在计算机领域，我们经常听到ROM、FLASH和RAM这些术语，它们是计算机中不同类型的存储器。虽然它们都用于存储数据，但它们之间有着明显的区别。本文将详细介绍ROM、FLASH和RAM的区别，并给出具体的例子和解释。文章目录引言ROM（只读存储器）RAM（随机存储器）FLASH（闪存）总结ROM（只读存储器）ROM

【web开发】12、Django知识点回顾

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录总结、Django知识点回顾提示：以下是本篇文章正文内容，下面案例可供参考总结、Django知识点回顾安装Djangopipinstalldjango创建Django项目django-adminstartprojectmysite注意:Pychar

stm32---定时器输入捕获

一、输入捕获介绍在定时器中断实验章节中我们介绍了通用定时器具有多种功能，输入捕获就是其中一种。STM32F1除了基本定时器TIM6和TIM7，其他定时器都具有输入捕获功能。输入捕获可以对输入的信号的上升沿，下降沿或者双边沿进行捕获，通常用于测量输入信号的脉宽、测量PWM输入信号的频率及占空比。输入捕获的工作原理比较简单

新概念英语（第二册）复习——Lesson 6 - Lesson10

前言在学习6-10之前，确保1-5已经可以脱口而出，否则不需要学习6-10文章目录前言Lesson6-PercyButtons原文译文单词Lesson7-Toolate原文译文单词Lesson8-Thebestandtheworst原文译文单词Lesson9-Acoldwelcome译文单词Lesson10-NotFo

数组初学者向导：使用Python从零开始制作经典战舰游戏

引言战舰游戏，一个广受欢迎的经典游戏，为玩家提供了策略与猜测的完美结合。这个游戏的核心思想是通过猜测敌方船只的位置并尝试击沉它们来赢得比赛。在这篇文章中，我们将使用Python语言和数组来构建这款游戏，让你更加了解数组的操作和实用性。1.游戏概述在战舰游戏中，每位玩家都有一个10x10的网格，可以放置5艘船只。这些船只

C语言实现三子棋游戏（详解）

目录引言：1.游戏规则：2.实现步骤：2.1实现菜单：2.2创建棋盘并初始化：2.3绘制棋盘：2.4玩家落子：2.5电脑落子：2.6判断胜负：3.源码：结语：引言：《三子棋》是一款古老的民间传统游戏，又被称为OOXX棋、黑白棋，井字棋，九宫棋等。游戏分为双方对战，双方依次在九宫格棋盘上摆放棋子，率先将自己的三个棋子连成

Linux 下的 10 个 PDF 软件

本文[1]是我们正在进行的有关Linux顶级工具系列的延续，在本系列中，我们将向您介绍最著名的Linux系统开源工具。随着互联网上越来越多地使用可移植文档格式(PDF)文件来获取在线书籍和其他相关文档，拥有PDF查看器/阅读器对于桌面Linux发行版非常重要。有几种可以在Linux上使用的PDF查看器/阅读器，它们都提

热文推荐
  1. python正则表达(06)

    python正则表达(06)文章目录python正则表达(06)1正则表达式概念2正则的三个基础方法2.1match、search、findall三个基础方法2.2re.match()函数2.2.1re.match(匹配规则，被匹配字符串)2.2.2验证是否开头匹配，match是匹配开头，后面的是不匹配2.3re.se

  2. SpringCloud Eureka搭建会员中心服务提供方-集群

    😀前言本篇博文是关于SpringCloudEureka搭建会员中心服务提供方-集群，希望你能够喜欢🏠个人主页：晨犀主页🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰如果文章有什么需要改进的地方

  3. Java基于微信小程序的电影交流平台

    博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W+、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌文章目录第一章：简介第二章、开发环境：后端：前端：数据库：三、系统详细设计3.4.1数据库概念结构设计第四章系统功能的具体实现4.1小程序端4.2管理员

  4. java基于微信小程序的讲座预约系统的研究与实现

    博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W+、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌文章目录1简介2技术栈第三章系统分析3.1初步需求分析3.2系统用例分析3.2.1公告管理用例分析3.2.2系统管理用例分析3.2.3学生信息用例分析3

  5. MyBatis快速入门

    Mybatis概述Mybatis概念MyBatis是一款优秀的持久层框架，用于简化JDBC开发MyBatis本是Apache的一个开源项目iBatis,2010年这个项目由apachesoftwarefoundation迁移到了googlecode，并且改名为MyBatis。2013年11月迁移到Github官网：ht

  6. nginx配置指南

    nginx.conf配置找到Nginx的安装目录下的nginx.conf文件，该文件负责Nginx的基础功能配置。配置文件概述Nginx的主配置文件(conf/nginx.conf)按以下结构组织：配置块功能描述全局块与Nginx运行相关的全局设置events块与网络连接有关的设置http块代理、缓存、日志、虚拟主机等

  7. Android9底部导航栏出现空白按钮问题分析

    Android9底部导航栏出现空白按钮问题分析底部导航栏的初始化进入NavigationBarView初始化:进入NavigationBarView的onFinishInflater进入NavigationBarInflaterViewNavigationBarInflaterView加载单个的button回到Navi

  8. XUI - 一个简洁而优雅的Android原生UI框架

    官网GitHub-xuexiangjys/XUI:💍AsimpleandelegantAndroidnativeUIframework,freeyourhands!(一个简洁而优雅的Android原生UI框架，解放你的双手！)XUI|💍AsimpleandelegantAndroidnativeUIframewor

  9. 【算法】相向双指针

    💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kuan的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结java核心技术点,如集合,jvm,并发编程redis,kaf