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

    一、事件处理器

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

    1、事件修饰符

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

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

    2、冒泡案例(.stop)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件处理器title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8.     
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. head>
    11. <style>
    12.     .red {
    13.         width: 400px;
    14.         height: 400px;
    15.         background-color: red;
    16.     }
    17.  
    18.     .orange {
    19.         width: 300px;
    20.         height: 300px;
    21.         background-color: orange;
    22.     }
    23.  
    24.     .blue {
    25.         width: 200px;
    26.         height: 200px;
    27.         background-color: blue;
    28.     }
    29.  
    30.     .black {
    31.         width: 500px;
    32.         height: 500px;
    33.         background-color: black;
    34.     }
    35. style>
    36. <body>
    38. <div id="app">
    39.     <p>冒泡事件p>
    40.     <div class="black" @click="black">
    41.         <div class="red" @click="red">
    42.             <div class="orange" @click="orange">
    43.                 <div class="blue" @click="blue">
    44.                 div>
    45.             div>
    46.         div>
    47.     div>
    48. div>
    49. body>
    50. <script type="text/javascript">
    51.     // 绑定边界	ES6具体体现
    52.     new Vue({
    53.         el: '#app',
    54.         data() {
    55.             return {
    56.                 f200: 'f200'
    57.             };
    58.         },
    59.         methods: {
    60.             red() {
    61.                 alert("red(红色)");
    62.             },
    63.             orange() {
    64.                 alert("orange（橙色）");
    65.             },
    66.             blue() {
    67.                 alert("blue（蓝色）");
    68.             },
    69.             black() {
    70.                 alert("black（黑色）");
    71.             }
    72.         }
    73.     })
    74. script>
    75.  
    76. html>

    当我们加上了.stop修饰符

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件处理器title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8.     
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. head>
    11. <style>
    12.     .red {
    13.         width: 400px;
    14.         height: 400px;
    15.         background-color: red;
    16.     }
    17.  
    18.     .orange {
    19.         width: 300px;
    20.         height: 300px;
    21.         background-color: orange;
    22.     }
    23.  
    24.     .blue {
    25.         width: 200px;
    26.         height: 200px;
    27.         background-color: blue;
    28.     }
    29.  
    30.     .black {
    31.         width: 500px;
    32.         height: 500px;
    33.         background-color: black;
    34.     }
    35. style>
    36. <body>
    38. <div id="app">
    39.     <p>冒泡事件p>
    40.     <div class="black" @click.stop="black">
    41.         <div class="red" @click.stop="red">
    42.             <div class="orange" @click.stop="orange">
    43.                 <div class="blue" @click.stop="blue">
    44.                 div>
    45.             div>
    46.         div>
    47.     div>
    48. div>
    49. body>
    50. <script type="text/javascript">
    51.     // 绑定边界	ES6具体体现
    52.     new Vue({
    53.         el: '#app',
    54.         data() {
    55.             return {
    56.                 f200: 'f200'
    57.             };
    58.         },
    59.         methods: {
    60.             red() {
    61.                 alert("red(红色)");
    62.             },
    63.             orange() {
    64.                 alert("orange（橙色）");
    65.             },
    66.             blue() {
    67.                 alert("blue（蓝色）");
    68.             },
    69.             black() {
    70.                 alert("black（黑色）");
    71.             }
    72.         }
    73.     })
    74. script>
    75.  
    76. html>

    3、触发案例(.once)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件处理器title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8.     
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. head>
    11. <body>
    13. <div id="app">
    14.     <p>点击p>
    15.     <input :value="msg"/>
    16.     <button @click="dosub">提交button>
    17. div>
    18. body>
    19. <script type="text/javascript">
    20.     // 绑定边界	ES6具体体现
    21.     new Vue({
    22.         el: '#app',
    23.         data() {
    24.             return {
    25.                 msg: '偶买噶'
    26.             };
    27.         },
    28.         methods: {
    29.             dosub() {
    30.                 alert(this.msg);
    31.             }
    32.         }
    33.     })
    34. script>
    35.  
    36. html>

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>事件处理器title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8.     
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. head>
    11. <body>
    13. <div id="app">
    14.     <p>点击p>
    15.     <input :value="msg"/>
    16.     <button @click.once="dosub">提交button>
    17. div>
    18. body>
    19. <script type="text/javascript">
    20.     // 绑定边界	ES6具体体现
    21.     new Vue({
    22.         el: '#app',
    23.         data() {
    24.             return {
    25.                 msg: '偶买噶'
    26.             };
    27.         },
    28.         methods: {
    29.             dosub() {
    30.                 alert(this.msg);
    31.             }
    32.         }
    33.     })
    34. script>
    35.  
    36. html>

    4、综合案例(表单)

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表单title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8.     
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. head>
    11. <body>
    12. <div id="app">
    13.     <label>姓名：label><input v-model="username"/><br/>
    14.     <label>密码：label><input v-model="pwd" type="password"/><br/>
    15.     
    16.     <label>年龄：label><input v-model.number="age" type="number"/><br/>
    17.     <label>性别：label>
    18.     <div v-for="s in sexMax">
    19.         <input type="radio" v-model="sex" name="sex" v-bind:value="s.id"/>{{s.name}}<br/>
    20.     div>
    21.     <label>爱好：label>
    22.     <div v-for="h in hobby">
    23.         <input type="checkbox" v-model="hobbyMax" v-bind:value="h.id"/>{{h.name}}
    24.     div>
    25.     <label>类别：label>
    26.     <select v-model="type">
    27.         <option v-for="t in types" v-bind:value="t.id">{{t.name}}option>
    28.     select><br/>
    29.     <label>备注：label>
    30.     
    31.     <textarea v-model="info">textarea><br/>
    32.     确认<input type="checkbox" v-model="flag"/>
    33.     <input type="submit" v-bind:disabled="show" v-on:click="doSubmit"/>
    34. div>
    35. body>
    36. <script type="text/javascript">
    37.     new Vue({
    38.         el: '#app',
    39.         data() {
    40.             return {
    41.                 username: null,
    42.                 pwd: null,
    43.                 age: 10,
    44.                 sex: 1,
    45.                 sexMax: [{id: 1, name: "男"}, {id: 2, name: "女"}, {id: 3, name: "其他"}],
    46.                 hobby: [
    47.                     {
    48.                         id: 1,
    49.                         name: '篮球'
    50.                     },
    51.                     {
    52.                         id: 2,
    53.                         name: '唱'
    54.                     },
    55.                     {
    56.                         id: 3,
    57.                         name: '跳'
    58.                     },
    59.                     {
    60.                         id: 4,
    61.                         name: 'rap'
    62.                     }],
    63.                 hobbyMax: [],
    64.                 types: [
    65.                     {
    66.                         id: 1,
    67.                         name: '职业人'
    68.                     },
    69.                     {
    70.                         id: 2,
    71.                         name: '学生'
    72.                     },
    73.                     {
    74.                         id: 3,
    75.                         name: '社会人'
    76.                     }],
    77.                 type: null,
    78.                 info: '请输入你的个性签名',
    79.                 flag: false
    80.             }
    81.         },
    82.         computed: {
    83.             show: function () {
    84.                 return !this.flag;
    85.             }
    86.         },
    87.         methods: {
    88.             doSubmit: function () {
    89.                 var obj = {
    90.                     username: this.username,
    91.                     pwd: this.pwd,
    92.                     age: this.age,
    93.                     sex: this.sex,
    94.                     hobbyMax: this.hobbyMax,
    95.                     type: this.type,
    96.                     info: this.info,
    97.                 }
    98.                 console.log(obj);
    99.             }
    100.         }
    101.  
    102.     })
    103. script>
    104. 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：当我们定义这个 组件时，你可能会发现它的data并不是像这样直接提供一个对象

      

    1.       data: {
    2.  
    3.           count: 0
    4.  
    5.         }

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

    1.         data: function () {
    2.  
    3.           return {
    4.  
    5.             count: 0
    6.  
    7.           }
    8.  
    9.         }

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

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

    1.          Vue.component('my-component-name', { /* ... */ })，
    2.  
    3. 引用方式：<my-component-name>

             首字母大写命名

           

    1.   Vue.component('MyComponentName', {  ...  })，
    2.     引用方式： <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 都有指定的值类型  

    1.        props: {
    2.  
    3.            title: String,
    4.  
    5.            likes: Number,
    6.  
    7.            isPublished: Boolean,
    8.  
    9.            commentIds: Array,
    10.  
    11.            author: Object,
    12.  
    13.            callback: Function,
    14.  
    15.            contactsPromise: Promise // or any other constructor
    16.  
    17.          }

    2、案例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>组件title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8.     
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. head>
    11. <body>
    13. <div id="app">
    14.     
    15.     
    16.     <my-img>my-img>
    17.     <my-button m="卡拉米">my-button>
    18.  
    19.     
    20. div>
    21. body>
    22. <script type="text/javascript">
    23.     Vue.component('my-button', {
    24.         // props是定义组件中的变量的
    25.         props: ['m'],
    26.         // template代表了自定义组件在页面上显示的类容
    27.         template: '',
    28.         data: function () {
    29.             return {
    30.                 n: 1
    31.             }
    32.         },
    33.         methods: {
    34.             incrn() {
    35.                 this.n++;
    36.             }
    37.         }
    38.     });
    39.     Vue.component('my-img', {
    40.         // template代表了自定义组件在页面上显示的类容
    41.         template: '',
    42.     });
    43.     // 绑定边界	ES6具体体现
    44.     new Vue({
    45.         el: '#app',
    46.         data() {
    47.             return {};
    48.         }
    49.     })
    50. script>
    51.  
    52. 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、父传子

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>通信title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. head>
    9. <body>
    10. <div id="app">
    11.     <h3>父传子1h3>
    12.     <my-button m="牛马">my-button>
    13.     <h3>父传子2h3>
    14.     <my-button m="小卡拉米" n="2">my-button>
    15. div>
    16. body>
    17. <script>
    18.     // 定义全局组件的方式
    19.     Vue.component('my-button', {
    20.         props: ['m', 'n'],
    21.         template: '',
    22.         data: function () {
    23.             return {
    24.                 n: 1
    25.             };
    26.         },
    27.         methods: {
    28.             MyButton: function () {
    29.                 this.n++;
    30.             }
    31.         }
    32.     })
    33.     var vm = new Vue({
    34.         el: "#app",
    35.         data: {
    36.             msg: "999"
    37.         }
    38.     });
    39. script>
    40. html>

    2.2、子传父

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>通信title>
    6.     
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    8. head>
    9. <body>
    10. <div id="app2">
    11.     <h3>子传父h3>
    12.     
    13.     <my-buttons m="666" @getBut="getXx">my-buttons>
    14. div>
    15. body>
    16. <script>
    17.     // 定义全局组件的方式
    18.     Vue.component('my-buttons', {
    19.         props: ['m'],
    20.         template: '',
    21.         methods: {
    22.             MyButton: function () {
    23.                 let id = 123;
    24.                 let name = "天才";
    25.                 this.$emit('getbut', id, name);
    26.             }
    27.         }
    28.     })
    29.     var vm = new Vue({
    30.         el: "#app2",
    31.         data: {
    32.             msg: "666"
    33.         },
    34.         methods: {
    35.             getXx: function (a, b) {
    36.                 console.log(a);
    37.                 console.log(b);
    38.             }
    39.         }
    40.     });
    41. script>
    42. html>

  • 相关阅读:
    一文全面介绍JWT框架知识
    .Net Core 3.0 对 MongoDB 的多条件（两种）查询操作
    [构造]Repetitions Decoding Codeforces1642D
    微信开发之一键踢出群聊的技术实现
    MySQL存储过程详解与案例应用
    EPLAN_010#STEP格式_箱柜模型的定义、拼柜
    LeetCode 33. 搜索旋转排序数组
    MySQL的JDBC 编程
    “Jmeter WebSocket协议压测”，助你轻松应对高并发场景！
    vue一些知识补充
  • 原文地址：https://blog.csdn.net/weixin_74383330/article/details/133063543