• Vue语法模板续篇

    上次与大家分享了Vue语法模板的部分，今天继续与大家分享。

    目录

    一、事件处理器

    1、事件修饰符

    2、按键修饰符

    3、冒泡事件与事件处理器

    3.1解释冒泡事件

    2、事件处理器的具体应用（.stop冒泡事件，.once只提交一次）

    二、自定义组件&组件通信

    1、vue组件

      1.1 组件简介

    1.2全局和局部组件

    1.3 props

    2、自定义组件My-button

     3、组件通信：将子组件的值传给父组件

    三、表单的综合运用 

    一、事件处理器

    1、事件修饰符

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

      .stop

      .prevent

      .capture

      .self

      .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、按键修饰符

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

      

    2.  
    3.   <input v-on:keyup.13="submit">
    4.  
    5.   Vue为最常用的按键提供了别名
    6.  
    7.   
    8.  
    9.   <input v-on:keyup.enter="submit">

      全部的按键别名：

      .enter

      .tab

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

      .esc

      .space

      .up

      .down

      .left

      .right

      .ctrl

      .alt

      .shift

      .meta      

    3、冒泡事件与事件处理器

    3.1解释冒泡事件

    冒泡事件就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件

    用一张图表示：

    示例：

     这四个div容器具有相同的事件，在最里面的容器中添加了.stop就能够阻止冒泡

     

    不会设置动图所以这个效果无法直观的被看见

    2、事件处理器的具体应用（.stop冒泡事件，.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. 		<title></title>
    7. 			<style>
    8. 					.red{
    9. 						width: 400px;
    10. 						height: 400px;
    11. 						background-color: red;
    12. 					}
    13. 					.orange{
    14. 						width: 300px;
    15. 						height: 300px;
    16. 						background-color: orange;
    17. 					}
    18. 					.blue{
    19. 						width: 200px;
    20. 						height: 200px;
    21. 						background-color: blue;
    22. 					}
    23. 					.pink{
    24. 						width: 100px;
    25. 						height: 100px;
    26. 						background-color: pink;
    27. 					}
    28. 				</style>
    29. 	</head>
    30. 	<body>
    31. 		
    32. 		<div id="app">
    33. 			{{msg}}
    34. 			<p>冒泡事件</p>
    35. 			<div 
    36. 			class="red" @click="red">
    37. 			<div 
    38. 			class="orange" @click="orange">
    39. 			<div 
    40. 			class="blue" @click="blue">
    41. 			<div class="pink" @click.stop="pink"></div>
    42. 			</div>
    43. 			</div>
    44. 			</div>
    45. 			<p>提交答案</p>
    46. 			<button @click.once="dosub">提交</button>
    47. 			<p>按键修饰符</p>
    48. 			<input @keyup.enter="dosub"/>
    49. 		</div>
    50. 		
    51. 		
    52. 		<script>
    53. 			new Vue({
    54. 				el:"#app",
    55. 				data(){
    56. 					return {
    57. 						msg:'小猪猪'
    58. 					};
    59. 			},
    60. 					methods:{
    61. 						red(){
    62. 							alert('red');
    63. 						},
    64. 						orange(){
    65. 							alert('orange');
    66. 						},
    67. 						blue(){
    68. 							alert('blue');
    69. 						},
    70. 						pink(){
    71. 							alert('pink');
    72. 						},
    73. 						dosub(){
    74. 							alert('提交');
    75. 						}
    76. 						
    77. 						
    78. 						
    79. 						
    80. 					}
    81. 					
    82. 					
    83. 				
    84. 				
    85. 			})
    86. 			
    87. 		</script>
    88. 	</body>
    89. </html>

    二、自定义组件&组件通信

    1、vue组件

      1.1 组件简介

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

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

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

    1.2全局和局部组件

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

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

      注册后，我们可以使用以下方式来调用组件：

          

    1.3 props

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

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

    2、自定义组件My-button

    1. <body>
    2. 		<div id="app">
    3. 			{{msg}}
    4. 			<my-button m="小猪猪" @mymethod='aaa'></my-button>
    5. 			
    6. 		</div>
    7. 		
    8. 		<script>
    9. 			Vue.component('my-button',{
    10. 				props:'m',//定义组件中的变量
    11. 				//template代表了自定义组件在页面上展示的内容
    12. 				template:'',
    13. 				data:function(){
    14. 					return{
    15. 						n:1,
    16. 					}
    17. 				},
    18. 				methods:{
    19. 					incrn(){
    20. 						this.n++;
    21. }
    22.  
    23.  
    24. 	new Vue({
    25. 				el:"#app",
    26. 				data(){
    27. 					return{
    28. 						
    29. 						msg:'小猪猪',
    30. 					}
    31. 					
    32. 				},

     3、组件通信：将子组件的值传给父组件

    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. 		
    8. 	</head>
    9. 	<body>
    10. 		<div id="app">
    11. 			{{msg}}
    12. 			<my-button m="小猪猪" @mymethod='aaa'></my-button>
    13. 			
    14. 		</div>
    15. 		
    16. 		<script>
    17. 			Vue.component('my-button',{
    18. 				props:'m',//定义组件中的变量
    19. 				//template代表了自定义组件在页面上展示的内容
    20. 				template:'',
    21. 				data:function(){
    22. 					return{
    23. 						n:1,
    24. 					}
    25. 				},
    26. 				methods:{
    27. 					incrn(){
    28. 						this.n++;
    29. 						
    30. 						var name = "熊二";
    31. 						var sex = "男";
    32. 						var age = 19;
    33. 						console.log(name);
    34. 						console.log(sex);
    35. 						console.log(age);
    36. 						
    37. 						
    38. 						this.$emit("mymethod",name,sex,age);//将子组件传递参数给父组件的关键字与自定义事件
    39. 						
    40. 					}
    41. 					
    42. 					
    43. 					
    44. 				}
    45. 				
    46. 				
    47. 			})
    48. 			
    49. 			
    50. 			new Vue({
    51. 				el:"#app",
    52. 				data(){
    53. 					return{
    54. 						
    55. 						msg:'小猪猪',
    56. 					}
    57. 					
    58. 				},
    59. 				
    60. 				methods:{
    61. 					aaa(a,b,c){
    62. 						console.log(a);
    63. 						console.log(b);
    64. 						console.log(c);
    65. 					}
    66. 				}
    67. 			})
    68. 			
    69. 			
    70. 		</script>
    71. 	</body>
    72. </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. 		
    8. 	</head>
    9. 	
    10. 	<body>
    11. 			<div id="app">
    12. 				<h1>标题</h1>
    13. 				<ul>
    14. 					<li>
    15. 						<p>vue表单</p>
    16. 						<label>姓名：</label><input v-model="uname" /><br />
    17. 						<label>密码：</label><input v-model="upwd" type="password" /><br />
    18. 						<!-- 将用户的输入值转为 Number 类型 -->
    19. 						<label>年龄：</label><input v-model.number="age" /><br />
    20. 						<label>性别：</label>
    21. 						<input type="radio" v-model="sex" name="sex" value="1" />男
    22. 						<input type="radio" v-model="sex" name="sex" value="0" />女<br />
    23. 						<label>爱好：</label>
    24. 						<div v-for="h in hobby">
    25. 							<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
    26. 						</div>
    27. 						<label>类别：</label>
    28. 						<select v-model="type">
    29. 							<option value="-1">===请选择===</option>
    30. 							<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
    31. 						</select><br />
    32. 						<label>备注：</label>
    33. 						<textarea v-bind:value="mark"></textarea><br />
    34. 						确认<input type="checkbox" v-model="flag" />
    35. 						<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
    36. 					</li>
    37. 				</ul>
    38. 			</div>
    39. 		</body>
    40. 		
    41. 		
    42. 		<script type="text/javascript">
    43. 				new Vue({
    44. 					el: '#app',
    45. 					data() {
    46. 						return {
    47. 							uname: null,
    48. 							upwd: null,
    49. 							age: 10,
    50. 							sex: 1,
    51. 							hobby: [{
    52. 								id: 1,
    53. 								name: '篮球'
    54. 							}, {
    55. 								id: 2,
    56. 								name: '足球'
    57. 							}, {
    58. 								id: 3,
    59. 								name: '象棋'
    60. 							}],
    61. 							hobbies: [],
    62. 							types: [{
    63. 								id: 1,
    64. 								name: 'A'
    65. 							}, {
    66. 								id: 2,
    67. 								name: 'B'
    68. 							}, {
    69. 								id: 3,
    70. 								name: 'C'
    71. 							}],
    72. 							type: null,
    73. 							mark: '学生备注',
    74. 							flag: false
    75. 						}
    76. 					},
    77. 					computed: {
    78. 						show: function() {
    79. 							return !this.flag;
    80. 						}
    81. 					},
    82. 					methods: {
    83. 						doSubmit: function() {
    84. 							console.log('doSubmit')
    85. 							var obj = {
    86. 								uname: this.uname,
    87. 								upwd: this.upwd,
    88. 								age:this.age+10,
    89. 								sex: this.sex,
    90. 								hobbies:this.hobbies,
    91. 								type: this.type,
    92. 								mark: this.mark,
    93. 							}
    94. 							console.log(obj);
    95. 						}
    96. 					}
    97. 		
    98. 				})
    99. 			</script>
    100. 	
    101. </html>

  • 相关阅读:
    HarmonyOS实战经验合集之ArkUI（二）
    ensp配置访问控制拓扑如何配置
    Spring Security 基础使用
    python 根据两个向量，求的之间的旋转矩阵：
    STM32 PB3 PB4 配置为普通IO口 HAL库 LL
    苹果，设计思维的“布道者”
    IP地址，子网，掩码的计算
    结合element的el-tooltip实现文本溢出进行省略，鼠标移入显示全部
    知识图谱实战应用28-基于py2neo的ICD-11疾病分类的知识图谱的查询与问答实战应用
    Spring cloud alibaba——Senta(二)
  • 原文地址：https://blog.csdn.net/m0_67477525/article/details/126697680