• Vue模块语法下(事件处理器&自定义组件&组件通信)

                                                                    文章目录

    一、事件处理器

    事件修饰符

    二、自定义组件

    组件简介

    全局和局部组件

     props

    小结

     三、表单综合案例(vue三期博客内容综合)

    一、事件处理器

    事件修饰符

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

      .stop👀

      .prevent

      .capture

      .self

      .once

     

      

    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>title>
    7. 		<style type="text/css">
    8. 			.azure{
    9. 				height: 400px;
    10. 				width: 400px;
    11. 				background-color: azure;
    12. 			}
    13. 			.pink{
    14. 				height: 300px;
    15. 				width: 300px;
    16. 				background-color: pink;
    17. 			}
    18. 			.plum{
    19. 				height: 200px;
    20. 				width: 200px;
    21. 				background-color: plum;
    22. 			}
    23. 			.yellow{
    24. 				height: 100px;
    25. 				width: 100px;
    26. 				background-color: yellow;
    27. 			}
    28. 		style>
    29. 	head>
    30. 	<body>
    31. 		<div id="app">
    32. 			<div class="azure">
    33. 				<div class="pink">
    34. 					<div class="plum">
    35. 						<div class="yellow">div>
    36. 					div>
    37. 				div>
    38. 			div>
    39. 		div>
    40. 	body>
    41. 	<script>
    42. 		new Vue({
    43. 			el:'#app',
    44. 			data() {
    45. 				return {
    46. 					msg:'hello vue!'
    47. 				}
    48. 			}
    49. 		})
    50. 	script>
    51. html>

    我们先看一下现在html代码的运行效果

     为什么要先看这个嘞，原因是想先看一下事件冒泡的一个小问题，在实际编码中十分忌讳的一个问题，给这4个div分别绑定事件

    接下来看当前效果   内层div触发外层div事件

    像遇到这样的问题呢，我们就可以使用到阻止冒泡事件来完成

    怎么阻止嘞，只需要在点击事件前面添加冒泡事件名就好了，这样点击最内层div也不会触发外层

     

     

     

     

     

     

     

     

     

     

     

    ...

     

     

    ...

     

     

    二、自定义组件

    vue组件

    组件简介

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

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

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

    全局和局部组件

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

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

    props

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

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

       注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods以及生命周期钩子，仅有的例外是像el这样根实例特有的选项

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

    data: {

              count: 0

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

    data: function () {

              return {

                count: 0

              }

            }   

        

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

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

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

             首字母大写命名

             Vue.component('MyComponentName', { /* ... */ })，引用方式： 和都是可接受的

    在定义的按钮中没有添加任何内容，但是上输出了小坤的按钮的字样，为什么呢；原因是vue在渲染的时候，自动挂载template模板

    父组件

    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>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<p>简单组件的定义p>
    11. 			<my-button>my-button>
    12. 			<p>父组件传参给子组件p>
    13. 			
    14. 			<my-button m='zhangsan' n='3'>my-button>
    15. 		div>
    16. 	body>
    17. 	<script>
    18. 		Vue.component('my-button',{
    19. 			/* template:'', */
    20. 			template:'',
    21. 			props:['m','n']
    22. 		})
    23. 		new Vue({
    24. 			el:'#app',
    25. 			data() {
    26. 				return {
    27. 					msg:'hello vue!'
    28. 				}
    29. 			}
    30. 		})
    31. 	script>
    32. html>

     子组件    子组件将参数传递给父组件的关键在于1.$emit 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>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<p>父组件传参给子组件p>
    11. 			
    12. 			<my-button m='zhangsan' n='3' @mymethod=xxx();>my-button>
    13. 		div>
    14. 	body>
    15. 	<script>
    16. 		Vue.component('my-button',{
    17. 			template:'',
    18. 			props:['m','n'],
    19. 			methods:{
    20. 				sub(){
    21. 					var name="张三";
    22. 					var sex="男";
    23. 					var age="22";
    24. 					console.log(name);
    25. 					console.log(sex);
    26. 					console.log(age);
    27. 					this.$emit('mymethod',name,sex,age);//子组件将参数传递给父组件的关键在于1.$emit 2.自定义事件
    28. 				}
    29. 			}
    30. 		})
    31. 		//外部组件  ⬆把内部的内容传到外部来⬇
    32. 		new Vue({
    33. 			el:'#app',
    34. 			data() {
    35. 				return {
    36. 					msg:'hello vue!'
    37. 				}
    38. 			},
    39. 			methods:{
    40. 				xxx(a,b,c){
    41. 					console.log(a);
    42. 					console.log(b);
    43. 					console.log(c);
    44. 				}
    45. 			}
    46. 		})
    47. 	script>
    48. html>

     

    小结

    定义组件：template

    父传子：props     

    子传父：通过$emit注册事件名，语法this.$emit('事件名'，....)    这里一般是json对象 

     三、表单综合案例(vue三期博客内容综合)

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>多功能表单title>
    6. head>
    7. <body>
    8. <div id="app">
    9.     
    10.     <form>
    11.         姓名：<input type="text" v-model="uname"/><br>
    12.         密码：<input type="password" v-model="pwd"/><br>
    13.         性别：
    14.             <input name="sex" type="radio" checked="checked"/>男
    15.             <input name="sex" type="radio" />女<br>
    16.         爱好：
    17.         <div v-for="l in likes">
    18.             <input type="checkbox" v-model="hobby" :value="l.id">{{l.name}}
    19.         div>  <br>
    20.         英语等级：
    21.         <select v-model="selectedVal">
    22.             <option v-for="e in englishs" :value="e.id" >{{e.name}}option>
    23.         select>
    24.         
    25.         <input @click="show" type="checkbox" /><br>
    26.         
    27.         <input v-show="showFlag" type="button" @click="sub" value="提交"/>
    28.     form>
    29. div>
    31. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
    32. <script>
    33.  
    34.     //外部组件
    35.     new Vue({
    36.         el:"#app",
    37.         data() {
    38.             return {
    39.                 uname:null,
    40.                 pwd:null,
    41.                 sex:1,
    42.                 /*爱好数据源  复选框*/
    43.                 likes:[
    44.                     {id:1,name:'篮球'},
    45.                     {id:2,name:'足球'},
    46.                     {id:3,name:'卓球'},
    47.                     {id:4,name:'乒乓球'}
    48.                 ],
    49.                 /*英语等级数据源  下拉框*/
    50.                 englishs:[
    51.                     {id:1,name:'优'},
    52.                     {id:2,name:'良'},
    53.                     {id:3,name:'差'}
    54.                 ],
    55.                 /*向后台传递的数据（用来存放选中的爱好） 1,3 */
    56.                 hobby:[],
    57.                 selectedVal:0,/*用来接收下拉框选中的id*/
    58.                 showFlag:false /*没有选中按钮就不出现*/
    59.             }
    60.         },
    61.         methods:{
    62.             show(){
    63.                 this.showFlag=true;
    64.             },
    65.             sub(){
    66.                 //向后台提交Json对象 json数据交互
    67.                 var obj={
    68.                     uname:this.uname,
    69.                     pwd:this.pwd,
    70.                     sex:this.sex,
    71.                     hobby:this.hobby,
    72.                     level:this.selectedVal
    73.                 }
    74.                 console.log(obj);
    75.             }
    76.         }
    77.     });
    78.  
    79. script>
    80.  
    81. body>
    82. html>

    主要注意复选框的数据源与要传递到后台的数据，如爱好，当我们选中时，我们要传递到后台的是其选中的id，而且可能选择多个，所以我们在这就自定义一个数组来接收其值

     

    HBuilder X中快速生成html代码快捷键---tab键

     

  • 相关阅读:
    InnoDB引擎
    mysql进阶: mysql中的锁(全局锁/表锁/行锁/间隙锁/临键锁/共享锁/排他锁)
    【python学习】基础篇-常用模块-subprocess模块：创建和管理子进程
    【C++】继承 ⑨ ( 继承中成员变量同名的处理方案 )
    ElasticSearch之Quick.ElasticSearch.Furion组件的使用
    buuctf_练[羊城杯2020]easyphp
    全网最全jmeter接口测试/接口自动化测试看这篇文章就够了：跨线程组传递jmeter变量及cookie的处理
    WebRTC系列--sdp协商中的answer编解码协商过程
    网格化覆盖·智能化管控·数字化通行|公租房智能门锁有一套！
    测试人生 | 资深外包逆袭大厂测试开发：面试官的“歧视”表情深深刺痛了我
  • 原文地址：https://blog.csdn.net/weixin_67450855/article/details/126674835