• Vue模板语法下集（03）

    今日份分享内容

    一、事件处理器 

    1、阻止单击事件冒泡 

     2、只点击一次

     3、按键修饰符

     二、Vue自定义组件

    1、组件简介 

    2、自定义组件

     ①父传子（父组件 传参 给 子组件）

    ②子传父（子组件 传参 给 父组件）

    三、表单综合案例

    首先让我们来把页面搭建完毕，页面效果如图：

     页面代码块展示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>1、事件处理器title>
    7. 		<style type="text/css">
    8. 			.red{
    9. 				width: 400px;
    10. 				height: 400px;
    11. 				background-color: red;
    12. 			}
    13. 			.yellow{
    14. 				width: 300px;
    15. 				height: 300px;
    16. 				background-color: yellow;
    17. 			}
    18. 			.blue{
    19. 				width: 200px;
    20. 				height: 200px;
    21. 				background-color: blue;
    22. 			}
    23. 			.green{
    24. 				width: 100px;
    25. 				height: 100px;
    26. 				background-color: green;
    27. 			}
    28. 			
    29. 		style>
    30. 	head>
    31. 	<body>
    32. 		
    33. 		<div id="app">
    34. 			<div class="red" @click="red">
    35. 				<div class="yellow"  @click="yellow">
    36. 					<div class="blue"  @click="bule">
    37. 						<div class="green"  @click="green">div>
    38. 					div>
    39. 				div>
    40. 			div>
    41. 		div>
    42. 		<script type="text/javascript">
    43. 			new Vue({
    44. 				el:'#app',
    45. 				data(){
    46. 					return{
    47. 						msg:'hello,我是一杯咖啡！'
    48. 					}
    49. 				},
    50. 				methods:{
    51. 					red(){
    52. 						alert('red');
    53. 					},
    54. 					yellow(){
    55. 						alert('yellow');
    56. 					},
    57. 					bule(){
    58. 						alert('bule');
    59. 					},
    60. 					green(){
    61. 						alert('green');
    62. 					}
    63. 				}
    64. 			})
    65. 		script>
    66. 	body>
    67. html>

    那么现在就正式进入今日的分享内容吧！ 

    一、事件处理器 

    1、阻止单击事件冒泡 

     页面解析图：四个div嵌套而成 

    如上图、代码所示，是由四个div标签嵌套而成的，四个div标签对应了四个颜色也分别对应了四个点击事件，点击不同的颜色会出现不同的弹出内容，由于使用div一个套着一个的，也就是由四个正方形叠加起来了，如果我点击最上面的绿色那么也就会从上到下依次弹出绿色>蓝色>黄色>红色四个点击事件所对应的内容，那么问题来了，如果只想让所点击的绿色弹出内容应该怎么办呢？

    答案：Vue通过由点(.)表示的指令后缀来调用修饰符。

     

      .stop="doThis">

    什么是冒泡事件？ 如图所示：

      

    这样就只会触发绿色部分的点击事件了。 

     2、只点击一次

    在客户使用某个查询功能的时候，当网络缓慢的时候，下意识的可能会多次点击那个查询的按钮，对于客户而言觉得并没什么，但是对于服务端来说，就有点类似于刻意攻击，因为当每点击一次按钮，就会向后台数据发送一次请求，就会抢占服务器的资源，那么我们作为开发者应该可以怎样做呢？

    答案：Vue通过由点(.)表示的指令后缀来调用修饰符。

     

      .once="doThis">

    效果图展示：        点击确定之后就不会再弹出内容了

     3、按键修饰符

    按键修饰符顾名思义也就是跟你的键盘绑定的事件。

    例如回车键： 

    效果展示：        光标移入文本框内点击回车键就可以弹出窗口。 

    事件处理器的知识汇总 ：

    事件修饰符

     .stop

      .prevent

      .capture

      .self

      .once

      

      

      

      

      

      

      

      

      

      

    ...

      

      

    ...

      

      

    按键修饰符

    Vue允许为v-on在监听键盘事件时添加按键修饰符：

      

      

      Vue为最常用的按键提供了别名

      

      

      全部的按键别名：

      .enter

      .tab

      .delete (捕获 "删除" 和 "退格" 键)

      .esc

      .space

      .up

      .down

      .left

      .right

      .ctrl

      .alt

      .shift

      .meta      

    好啦，事件处理器这一节的分享内容就介绍到这里，进入第二节~

     二、Vue自定义组件

    1、组件简介 

          组件(Component)是Vue最强大的功能之一
          组件可以扩展HTML元素，封装可重用的代码
          组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

    2、自定义组件

    自定义组件是什么？

    自定义组件就是自己设置标签，然后实现它。后面我将会给大家分享如何使用别人的组件，比如之后的ElementUI里就封装了很多的组件，如果有学前端的朋友们，在自定义组件这一块是需要更加深入了解的喔！

    本次的案例：实现自定义按钮组件        Vue.component

     所以接下来有两种传参方式，给我们的自定义组件进行传值。

     ①父传子（父组件 传参 给 子组件）

     

          props是父组件用来传递数据的一个自定义属性。
          父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop" 

    ②子传父（子组件 传参 给 父组件）

     $emit是子组件用来传递数据的

    自定义组件知识总结：

     父传子：props
       子传父（触发事件）：$emit(eventName)     

    全局和局部组件

          全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。

          局部组件: new Vue({el:'#d1',components:{...}})

       注1：Vue自定义事件是为组件间通信设计   
            vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
         
            父Vue实例->Vue实例，通过prop传递数据
            子Vue实例->父Vue实例，通过事件$emit传递数据 

       注2：事件名
            不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
            建议使用“短横线分隔命名”，例如：three-click

    三、表单综合案例

    在Vue中创建 表单提交

    1. html>
    2. <html>
    3. 	<head>
    4. 		
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<meta charset="utf-8">
    7. 		<title>title>
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11. 			
    12. 			姓名：<input type="text" v-model="uname"/><br>
    13. 			密码：<input type="password" v-model="pwd"/><br>
    14. 			年龄：<input type="text" v-model="age"/><br>
    15. 			性别：<input type="radio" name="sex" checked="checked"/>男
    16. 				<input type="radio" name="sex"/>女<br>
    17. 			爱好：
    18. 			<div v-for="l in likes">
    19. 				<input v-model="hobby" type="checkbox" :value="l.id"/>{{l.name}}
    20. 			div><br>
    21. 			英语等级：
    22. 			<select v-model="selectedVal">
    23. 				<option v-for="e in englishs" :value="e.id">{{e.name}}option>
    24. 			select><br>
    25. 			<input @click="show" type="checkbox" />
    26. 			<input v-show="showFlag" @click="sub" type="button" value="ok" />
    27. 			<div>div>
    28. 		div>
    29. 	body>
    30. 	<script type="text/javascript">
    31. 		new Vue({
    32. 			el:'#app',
    33. 			data() {
    34. 				return {
    35. 					uname:null,
    36. 					pwd:null,
    37. 					age:null,
    38. 					sex:1,
    39. 					likes:[ //爱好的数据源
    40. 						{id:1,name:'篮球'},
    41. 						{id:2,name:'足球'},
    42. 						{id:3,name:'桌球'},
    43. 						{id:4,name:'乒乓球'}
    44. 					],
    45. 					englishs:[ //英语的数据源  下拉框
    46. 						{id:1,name:'优'},
    47. 						{id:2,name:'良'},
    48. 						{id:3,name:'差'}
    49. 					],
    50. 					hobby:[],//用来存放选中的爱好  比如1,3
    51. 					selectedVal:0,
    52. 					showFlag:false
    53. 				}
    54. 			},
    55. 			methods:{
    56. 				show() {
    57. 					this.showFlag = true;
    58. 				},
    59. 				sub(){
    60. 					// 后续都是json数据交互,向后台提交json对象
    61. 					var obj = {
    62. 						uname:this.uname,
    63. 						pwd:this.pwd,
    64. 						age:this.age,
    65. 						sex:this.sex,
    66. 						hobby:this.hobby,
    67. 						level:this.selectedVal
    68. 					}
    69. 					console.log(obj);
    70. 				}
    71. 			}
    72. 		})
    73. 	script>
    74. html>

    运行结果： 

     今日分享内容到此结束，希望对您有所帮助喔~

    预告下期内容：【Vue路由】

    我们下期再见！ ！！

  • 相关阅读:
    Dubbo client can not supported string message
    如何防止重复提交订单？
    pytest（二）框架实现一些前后置（固件，夹具）的处理，常用三种
    半个月时间把MySQL重新巩固了一遍，梳理了一篇几万字 “超硬核” 文章！
    后渗透之流量转发实验
    x86-7-页式管理（Paging）
    第二周 生活随笔——记录平凡生活中的唯一瞬间
    【python】（十三）python内置库——time、datetime
    史上最全的NLP中的数据增强方法！
    【第7天】SQL进阶-插入记录（SQL 小虚竹)
  • 原文地址：https://blog.csdn.net/m0_67094505/article/details/126684649