• vue模板语法（下集）

    事件处理器

    Vue模板语法中的事件处理器是指在Vue组件中绑定DOM事件，当事件发生时执行相应的方法或表达式。常见的事件包括点击事件@click、输入事件@input、鼠标移入事件@mouseover等等。

    事件监听可以使用v-on 指令

      2.1 事件修饰符

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


         
         
         
         

         
         
    ...

         
         
    ...

         
         

      全部的按键别名：
              .enter
          .tab
          .delete (捕获 "删除" 和 "退格" 键)
          .esc
          .space
          .up
          .down
          .left
          .right
          .ctrl
          .alt
          .shift
          .meta      

     注1：什么是事件冒泡?
               见“事件冒泡模型.png” 

      ## demo3.1.html
      2.2 按键修饰符
          Vue允许为v-on在监听键盘事件时添加按键修饰符：

         
         

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

       

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    6. 			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    7. 		<title>事件处理器</title>
    8. 		<style type="text/css">
    9. 			.one{
    10. 				background-color: red;
    11. 				height: 400px;
    12. 				width: 400px;
    13. 			}
    14. 			.two{
    15. 				background-color: blue;
    16. 				height: 300px;
    17. 				width: 300px;
    18. 			}
    19. 			.three{
    20. 				background-color: pink;
    21. 				height: 200px;
    22. 				width: 200px;
    23. 			}
    24. 			.four{
    25. 				background-color: yellow;
    26. 				height: 100px;
    27. 				width: 100px;
    28. 			}
    29. 		</style>
    30. 	
    31. 	</head>
    32. 	<body>
    33. 		<div id="app">
    34. 			<dvi class="one"@click.stop="fun1">
    35. 				<div class="two"@click.stop="fun2">
    36. 				  <div class="three"@click.stop="fun3">
    37. 					  <div class="four"@click.stop="fun4"></div>
    38. 					  </div>
    39. 				</div>	  
    40. 			</dvi>
    41. 				<p>提交答案</p>
    42. 						<button @click.once="dosub">提交</button>
    43. 						<p>按键修饰符</p>
    44. 						<input v-on:keyup.enter="dosub" />
    45. 		</div>	
    46. 				
    47. 		<script type="text/javascript">
    48. 		new Vue({
    49. 			el:"#app",
    50. 			data(){
    51. 				return{
    52. 					msg:'hello  小B 你相信光吗？',
    53. 					};
    54. 			},
    55. 			methods:{
    56. 				fun1(){
    57. 					alert("fun1")
    58. 				},
    59. 				fun2(){
    60. 					alert("fun2")
    61. 				},
    62. 				fun3(){
    63. 					alert("fun3")
    64. 				},
    65. 				fun4(){
    66. 					alert("fun4")
    67. 				},
    68. 					dosub(){
    69. 									alert("已做完，提交答案");
    70. 								}
    71. 			}
    72. 		});
    73. 		
    74. 		</script>
    75. 	
    76. 	</body>
    77. </html>

    Vue表单

    Vue表单是一种用于收集用户输入信息的Web表单，它基于Vue框架的数据双向绑定特性，可以使开发者更加简单和方便地管理表单数据。Vue表单提供了一系列的组件，比如文本输入框、下拉列表、单选框、复选框等，开发者可以根据需要在界面上选择合适的组件，同时使用Vue的模板语法进行组件的渲染和绑定。

    Vue表单中的组件通常由两部分组成，一部分是表单对象，用来表示表单的数据结构和验证规则，另一部分是表单控件，用来实现界面上的输入和操作行为。在Vue中，表单对象可以通过data选项或computed属性来定义，同时通过v-model指令与表单控件进行双向数据绑定，实现数据的自动更新。除此之外，Vue表单还提供了一些常用的验证规则和自定义验证函数，开发者可以根据需要进行使用和扩展。

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    6. 		<title>表单</title>
    7. 	</head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<h1>标题</h1>
    11. 			<ul>
    12. 				<li>
    13. 					<p>vue表单</p>
    14. 					<label>姓名：</label><input v-model="uname" /><br />
    15. 					<label>密码：</label><input v-model="upwd" type="password" /><br />
    16. 					<!-- 将用户的输入值转为 Number 类型 -->
    17. 					<label>年龄：</label><input v-model.number="age" /><br />
    18. 					<label>性别：</label>
    19. 					<input type="radio" v-model="sex" name="sex" value="1" />男
    20. 					<input type="radio" v-model="sex" name="sex" value="0" />女<br />
    21. 					<label>爱好：</label>
    22. 					<div v-for="h in hobby">
    23. 						<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
    24. 					</div>
    25. 					<label>类别：</label>
    26. 					<select v-model="type">
    27. 						<option value="-1">===请选择===</option>
    28. 						<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
    29. 					</select><br />
    30. 					<label>备注：</label>
    31. 					<textarea v-bind:value="mark"></textarea><br />
    32. 					确认<input type="checkbox" v-model="flag" />
    33. 					<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
    34. 				</li>
    35. 			</ul>
    36. 		</div>
    37. 	</body>
    38. 	<script type="text/javascript">
    39. 		new Vue({
    40. 			el: '#app',
    41. 			data() {
    42. 				return {
    43. 					uname: null,
    44. 					upwd: null,
    45. 					age: 10,
    46. 					sex: 1,
    47. 					hobby: [{
    48. 						id: 1,
    49. 						name: '洗脚'
    50. 					}, {
    51. 						id: 2,
    52. 						name: '看飞机'
    53. 					}, {
    54. 						id: 3,
    55. 						name: '上网'
    56. 					}],
    57. 					hobbies: [],
    58. 					types: [{
    59. 						id: 1,
    60. 						name: '男'
    61. 					}, {
    62. 						id: 2,
    63. 						name: '其他'
    64. 					}, {
    65. 						id: 3,
    66. 						name: '女'
    67. 					}],
    68. 					type: null,
    69. 					mark: '。。。',
    70. 					flag: false
    71. 				}
    72. 			},
    73. 			computed: {
    74. 				show: function() {
    75. 					return !this.flag;
    76. 				}
    77. 			},
    78. 			methods: {
    79. 				doSubmit: function() {
    80. 					console.log('doSubmit')
    81. 					var obj = {
    82. 						uname: this.uname,
    83. 						upwd: this.upwd,
    84. 						age:this.age+10,
    85. 						sex: this.sex,
    86. 						hobbies:this.hobbies,
    87. 						type: this.type,
    88. 						mark: this.mark,
    89. 					}
    90. 					console.log(obj);
    91. 				}
    92. 			}
    93.  
    94. 		})
    95. 	</script>
    96. </html>

    总的来说，Vue表单的优点是它具有简单易用、数据双向绑定、验证规则灵活和可扩展性强等特点，适合于快速开发和维护大量的响应式表单

    组件通信

    Vue的组件通信是指不同组件之间进行数据和事件的传递的过程。在Vue中，

    组件通信主要包括以下几种方式：

    父子组件通信：

    父组件可以通过props向子组件传递数据，子组件可以通过$emit事件向父组件发送数据。

    兄弟组件通信：

    兄弟组件通信需要通过共同的父组件来传递数据，可以通过props和$emit事件来实现。

    跨级组件通信：

    跨级组件通信也需要通过共同的父组件来传递数据，可以通过provide和inject实现，在父组件中提供数据，在后代组件中使用inject获取数据。

    使用全局事件总线：

    使用Vue实例作为事件总线，通过$on、$emit、$off等方法来实现组件之间的数据传递。

    使用Vuex来进行状态管理：

    Vuex是Vue官方推荐的状态管理库，可以将共享的状态抽离出来，放到单独的store中，供所有组件使用，可以通过调用store中的方法来实现数据的传递和状态管理。

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 	</body>
    9. </html>
    10. <!DOCTYPE html>
    11. <html>
    12. 	<head>
    13. 		<meta charset="utf-8">
    14. 		<title></title>
    15. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    16. 	</head>
    17. 	<body>
    18. 		<!-- 定义边界 -->
    19. 		<div id="app">
    20. 			<!-- 定义组件不能用驼峰命名 -->
    21. 			<!-- 需求是：当引用一个myButton，也页面上一个独特标记按钮 -->
    22. 			<my-button m="刘文"></my-button>
    23. 			<my-button m="刘鑫"></my-button>
    24. 			
    25. 			<!-- <button onclick=""></button> -->
    26. 		</div>
    27. 	</body>
    28. 	<script type="text/javascript">
    29. 		Vue.component('my-button', {
    30. 			// props是定义组件中的变量的
    31. 			props:['m'],
    32. 			// template代表了自定义组件在页面上显示的类容
    33. 			template:'',
    34. 			data:function(){
    35. 				return {
    36. 					n:1
    37. 				}
    38. 			},
    39. 			methods:{
    40. 				incrn(){
    41. 					this.n++;
    42. 				}
    43. 			}
    44. 		});
    45. 		// 绑定边界	ES6具体体现
    46. 		new Vue({
    47. 			el: '#app',
    48. 			data() {
    49. 				return {
    50. 				};
    51. 			}
    52. 		})
    53. 	</script>
    54. </html>

     

    总的来说，Vue的组件通信提供了多种方式，根据不同的场景和需求可以选择合适的方式来实现组件之间的数据和事件的传递。

  • 相关阅读:
    智谱API调用
    uni-app 5小时快速入门 8 页面配置(下)
    Webpack 学习笔记
    【Dive into Deep Learning / 动手学深度学习】第十章 - 第三节：注意力评分函数
    Nginx之Openresty基本使用解读
    聊聊logback的ThresholdFilter
    抽象一个通用的配置冲突解决方案
    Pytorch学习笔记（二）官方60min入门教程之自动微分
    nginx配置IP白名单
    【Unity3D赛车游戏优化篇】【九】Unity中如何让汽车丝滑漂移？
  • 原文地址：https://blog.csdn.net/djssubddbj/article/details/133066849