• Vue的模板语法（下）

    一.事件处理

    事件修饰符

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

    1. .stop：阻止事件冒泡。当一个元素触发了事件，并且该元素包含嵌套的父元素时，使用.stop修饰符可以防止事件被传递到祖先元素。

    2. .prevent：阻止默认事件。当一个元素上触发了某个事件，使用.prevent修饰符可以阻止浏览器执行默认的事件行为。

    3. .capture：使用事件捕获模式。默认情况下，Vue中的事件监听器是通过事件冒泡模式处理的，即从子元素冒泡到父元素。但是使用.capture修饰符可以将事件监听器绑定到捕获阶段，即从父元素捕获到子元素。

    4. .self：只当事件在指定元素自身触发时触发。当一个元素包含子元素，并且绑定了相同的事件处理函数时，使用.self修饰符可以确保事件只在元素自身触发时才执行处理函数。

    5. .once：只触发一次事件。当绑定了.once修饰符的事件被触发后，监听器将自动解绑，以确保处理函数只执行一次。

     代码演示：

    1. <!DOCTYPE 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. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    7. 		<title>事件处理</title>
    8. 		<style type="text/css">
    9. 			.one{
    10. 				background-color: red;
    11. 				height: 400px;
    12. 				width: 400px;
    13. 			}	.two{
    14. 				background-color: yellow;
    15. 				height: 300px;
    16. 				width: 300px;
    17. 			}	.three{
    18. 				background-color: pink;
    19. 				height: 200px;
    20. 				width: 200px;
    21. 			}	.four{
    22. 				background-color: green;
    23. 				height: 100px;
    24. 				width: 100px;
    25. 			}
    26. 			
    27. 			
    28. 		</style>
    29. 	</head>
    30. 	<body>
    31. 		<div id="app">
    32. 	<div class="one" @click="fun1">
    33. 		<div class="two" @click="fun2">
    34. 			<div class="three" @click="fun3">
    35. 				<div class="four" @click.stop="fun4"></div>
    36. 			</div>
    37. 		</div>
    38. 		
    39. 	</div>
    40. 	<input :value="msg"/>
    41. 	<button @click="clickme">点我</button>
    42. 	 <form @submit.prevent="submitForm">
    43. 	    <button type="submit">提交</button>
    44. 	  </form>
    45.  <div @click.capture="parentClick">
    46.     <button @click="childClick">点击我</button>
    47.   </div>
    48.   <div @click.self="parentClick">
    49.       <button @click="childClick">点击我</button>
    50.     </div>
    51. 		</div>
    52. 		<script type="text/javascript">
    53. 			new Vue({
    54. 			el:'#app',
    55. 			data(){
    56. 				return {
    57. 					msg:'你好'
    58. 				};
    59. 			},
    60. 			methods:{
    61. 				fun1(){
    62. 					alert("fun1")
    63. 				},fun2(){
    64. 					alert("fun2")
    65. 				},fun3(){
    66. 					alert("fun3")
    67. 				},fun4(){
    68. 					alert("fun4")
    69. 				},
    70. 				clickme(){
    71. 					console.log(this.msg)
    72. 				},
    73. 				 submitForm() {
    74. 				      console.log("表单提交事件");
    75. 				    },
    76. 					parentClick() {
    77. 					      console.log("父元素点击事件");
    78. 					    },
    79. 					    childClick() {
    80. 					      console.log("子元素点击事件");
    81. 					    }
    82. 			}
    83. 			})
    84. 		</script>
    85. 	</body>
    86. </html>

    效果：

     二.表单的综合案例

    代码：

    1. <!DOCTYPE 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. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    7. 		<title>表单中和案例</title>
    8. 	</head>
    9. 	<body>
    10. 		<div id='app'>
    11. 			姓名：<input name="name" v-model="name"/><br />
    12. 			密码：<input type="password" v-model="pwd"><br />
    13. 			性别：<span v-for="s in sexList">
    14. 				<input type="radio" name="sex" v-model="sex" :value="s.id" >{{s.name}}
    15. 			</span><br />
    16. 			籍贯：<select name="myAddr" v-model="myAddr">
    17. 				<option v-for="a in address" :value="a.id" >{{a.name}}</option>
    18. 			</select><br />
    19. 			爱好：
    20. 			<span v-for="h in hobby">
    21. 				<input type="checkbox" name="myLikes" v-model="myLikes" :value="h.id" >{{h.name}}
    22. 			</span><br />
    23. 			个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea>
    24. 			<br />
    25. 			同意：<input type="checkbox" v-model="ok" /><br />
    26. 			<button v-show="ok" @click="dosub">提交</button>
    27. 		</div>
    28. 		<script type="text/javascript">
    29. 			new Vue({
    30. 			el:'#app',
    31. 			data(){
    32. 				return {
    33. 					name:'小威',
    34. 					pwd:'123665',
    35. 					sexList:[
    36. 					{name:'男',id:1},
    37. 					{name:'女',id:2},
    38. 					{name:'阴阳人',id:3}	],	
    39. 					sex:1,
    40. 					hobby:[{name:'洗浴',id:1},
    41. 					{name:'保健',id:2},
    42. 					{name:'按摩',id:3},
    43. 					{name:'spa',id:4}
    44. 					],
    45. 					myLikes:[],
    46. 					address:[{name:'福建',id:1},
    47. 					{name:'湖南',id:2},
    48. 					{name:'湖北',id:3},
    49. 					{name:'台湾',id:4}
    50. 					],
    51. 					myAddr:null,
    52. 					sign:null,
    53. 					ok:false
    54. 				};
    55. 			},
    56. 			methods:{
    57. 				dosub(){
    58. 					var obj={};
    59. 					obj.name=this.name;
    60. 			        obj.pwd=this.pwd;
    61. 					obj.sex=this.sex;
    62. 					obj.address=this.myAddr;
    63. 					obj.love=this.myLikes;
    64. 					obj.sign=this.sign;
    65. 					console.log(obj)
    66. 				}
    67. 			}
    68. 			})
    69. 		</script>	
    70. 	</body>
    71. </html>

     效果：

    三.组件通信 

    1 组件介绍及定义


            Vue组件是Vue.js框架中的核心概念之一，它允许开发者将页面拆分为可重用、独立的模块。组件可以包含自己的模板、样式和逻辑，使得代码更加模块化、可维护和可复用。

          除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围又分为：全局指令/局部指令

    组件的定义：组件可以通过Vue.component()方法或Vue实例的components选项进行定义。组件的定义包括组件的名称、模板、数据、方法等。

    局部定义
     

    1.    <script>
    2.         new Vue({
    3.             el: '#xw',
    4.             components: {
    5.                 "my-button": {
    6.                     template: ""
    7.                 }
    8.             }
    9.         })
    10.     </script>


    全局定义
     

    1. Vue.component('my-button', {
    2.  
    3.     //用来传值的自定义属性
    4.     props:['title'],
    5.     
    6.     //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    7.     template: '',
    8.  
    9.     //注意：在自定义的组件中需要使用函数来定义data
    10.     data: function() {
    11.         return {
    12.             xxx: 0
    13.         }
    14. })

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

    • 父Vue实例->子Vue实例，通过prop传递数据
    • 子Vue实例->父Vue实例，通过事件传递数据

    组件传参

    父 传 子

    注意：props定义属性时采用的是驼峰命名法，而在html中使用时需要对应的变为短横线命名法！！

    1. !DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>父传子title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="xw">
    11. 			<ul>
    12. 				<li>
    13. 					
    14. 					<p>vue组件p>
    15. 					
    16. 					<my-button m="肖少爷">my-button>
    17. 				li>
    18. 			ul>
    19. 		div>
    20. 	body>
    21. 	<script>
    22. 		var vm = new Vue({
    23. 			el: "#xw",
    24. 			components: {
    25. 				'my-button': {
    26. 					props: ['m'],
    27. 					template: '',
    28. 					data() {
    29. 						return {
    30. 							n: 0
    31. 						};
    32. 					},
    33. 					methods: {
    34. 						doClickMyButton() {
    35. 							this.n++;
    36. 						}
    37. 					}
    38. 				}
    39. 			}
    40. 		});
    41. 	script>
    42.  
    43. html>


    子 传 父 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>子传父title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    8. 	head>
    9. 	<body>
    10. 		<div id="xw">
    11. 			<ul>
    12. 				<li>
    13. 					
    14. 					<p>vue组件p>
    15. 					
    16. 					<my-button m="邓正伟" @three-click="getParam">my-button>
    17. 				li>
    18. 			ul>
    19. 		div>
    20. 	body>
    21. 	<script>
    22. 		var vm = new Vue({
    23. 			el: "#xw",
    24. 			components: {
    25. 				'my-button': {
    26. 					props: ['m'],
    27. 					template: '',
    28. 					data() {
    29. 						return {
    30. 							n: 0
    31. 						};
    32. 					},
    33. 					methods: {
    34. 						doClickMyButton() {
    35. 							this.n++;
    36. 							if (this.n % 3 == 0) {
    37. 								// 触发自定义组件定义的事件，这里可以传递任意个参数
    38. 								// 但是触发的事件绑定的函数要与参数个数一致
    39. 								this.$emit('three-click', this.n, 'https://blog.csdn.net/Justw320', '无英韶');
    40. 							}
    41. 						}
    42. 					}
    43. 				}
    44. 			},
    45. 			methods: {
    46. 				getParam(a, b, c) {
    47. 					console.log(a, b, c);
    48. 				}
    49. 			}
    50. 		});
    51. 	script>
    52.  
    53. html>

  • 相关阅读:
    Rollup(3): Rollup-plugin-vue 编写我们第一个组件并发布使用
    GCC Rust获批将被纳入主线代码库，或将于GCC 13中与大家见面
    常见的协议的协议号及端口
    【漏洞复现-webmin-命令执行】vulfocus/webmin-cve_2019_15107
    一小时掌握vim基础用法
    C++多态与虚拟：Objects 实例化（Objects Instantiation）探究
    SQLite 3.44.0 发布！
    hibernate源码（1）--- schema创建
    我月入160刀的app，朋友要5万块买走，卖不卖？
    【Spring全家桶1】Spring框架相关概念
  • 原文地址：https://blog.csdn.net/weixin_72997875/article/details/133066204