• vue模板语法（下）

    目录

    1、事件处理器

    1.1、事件修饰符

    1.2、什么是事件冒泡

    1.3、按键修饰符

    1.4、代码

    1.4.1、样式绑定

    1.4.2、事件

    1.4.3、表单

    2、自定义组件

    3、组件通信

    1、事件处理器

    1.1、事件修饰符

    事件修饰符
    Vue通过由点(.)表示的指令后缀来调用修饰符，
    .stop
    .prevent
    .capture
    .self
    .once
    事件冒泡 -->
    a v-on:click.stop=“doThis”>

    form v-on:submit.prevent=“onSubmit”>
    <-- 修饰符可以串联 -->
    a v-on:click.stop.prevent=“doThat”>
    <-- 只有修饰符 -->
    form v-on:submit.prevent>
    <-- 添加事件侦听器时使用事件捕获模式 -->
    div v-on:click.capture=“doThis”>…
    <-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    div v-on:click.self=“doThat”>…
    <-- click 事件只能点击一次 -->
    a v-on:click.once=“doThis”>

    1.2、什么是事件冒泡

    就是会引起另外一个事件发生 

     

    1.3、按键修饰符

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

    input v-on:keyup.13=“submit”>
    Vue为最常用的按键提供了别名
    <-- 同上 -->
    input v-on:keyup.enter=“submit”>
    全部的按键别名：
    .enter
    .tab
    .delete (捕获 “删除” 和 “退格” 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

    1.4、代码

    1.4.1、样式绑定

    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. 		<style>
    8. 			.f200{
    9. 				font-size: 200px;
    10. 			}
    11. 		</style>
    12. 	</head>
    13. 	<body>
    14. 		<!-- 定义边界 -->
    15. 		<div id="app">
    16. 			<h3 :class="f200" v-bind:style="colorred">{{msg}}</h3>
    17. 		</div>
    18. 	</body>
    19. 	<script type="text/javascript">
    20. 		new Vue({
    21. 			el:'#app',
    22. 			data(){
    23. 				return {
    24. 					msg:'hello vue',
    25. 					colorred:'color:red;',
    26. 					f200:'f200'
    27. 				};
    28. 			}
    29. 		})
    30. 	</script>
    31. </html>
    32.

     

    1.4.2、事件

    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. 		<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. 			.black{
    24. 				width:100px;
    25. 				height: 100px;
    26. 				background-color: black;
    27. 			}
    28. 		</style>
    29. 	</head>
    30. 	<body>
    31. 		<!-- 定义边界 -->
    32. 		<div id="app">
    33. 			<p>冒泡事件</p>
    34. 			<div class="red" @click="red">
    35. 				<div class="orange" @click.stop="orange">
    36. 					<div class="blue" @click="blue">
    37. 						<div class="black" @click.stop="black"></div>
    38. 					</div>
    39. 				</div>
    40. 			</div>
    41. 			<p>提交答案</p>
    42. 			<button @click.once="dosub">提交</button>
    43. 			<p>按键修饰符</p>
    44. 			<input v-on:keyup.enter="dosub()" />
    45. 		</div>
    46. 	</body>
    47. 	<script type="text/javascript">
    48. 		new Vue({
    49. 			el:'#app',
    50. 			data(){
    51. 				return {
    52. 					f200:'f200'
    53. 				};
    54. 			},
    55. 			methods:{
    56. 				red(){
    57. 					alert("red");
    58. 				},orange(){
    59. 					alert("orange");
    60. 				},blue(){
    61. 					alert("blue");
    62. 				},black(){
    63. 					alert("black");
    64. 				},dosub(){
    65. 					alert("已做完，提交答案");
    66. 				}
    67. 			}
    68. 		})
    69. 	</script>
    70. </html>
    71.

    1.4.3、表单

    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: 'A'
    61. 					}, {
    62. 						id: 2,
    63. 						name: 'B'
    64. 					}, {
    65. 						id: 3,
    66. 						name: 'C'
    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>
    97.

     

    2、自定义组件

    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. 		<style>
    8. 			.f200{
    9. 				font-size: 200px;
    10. 			}
    11. 		</style>
    12. 	</head>
    13. 	<body>
    14. 		<!-- 定义边界 -->
    15. 		<div id="app">
    16. 			<!-- 定义组件不能用驼峰命名法 -->
    17. 			<!-- 需求是：当引用一个myButton,也就是页面上一个独特标记按钮 -->
    18. 			<my-button m="aa"></my-button>
    19. 			<my-button m="bb"></my-button>
    20. 			
    21. 			<!-- <button οnclick=""></button> -->
    22. 		</div>
    23. 	</body>
    24. 	<script type="text/javascript">
    25. 		// 定义全局组件的方式
    26. 		Vue.component("my-button",{
    27. 			// props是定义组件中的变量的
    28. 			props:["m"],
    29. 			// template代表了自定义组件在页面上显示的内容
    30. 			template:'',
    31. 			data:function(){
    32. 				return{
    33. 					n:1
    34. 				}
    35. 			},
    36. 			methods:{
    37. 				incrn(){
    38. 					this.n++;
    39. 				}
    40. 			}
    41. 		})
    42. 		new Vue({
    43. 			el:'#app',
    44. 			data(){
    45. 				return {
    46. 				};
    47. 			}
    48. 		})
    49. 	</script>
    50. </html>
    51.

     

    3、组件通信

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<ul>
    11. 				<li>
    12. 					<h3>{{ts}}</h3>
    13. 					<p>vue组件</p>
    14. 					<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
    15. 					<my-button m="aa" v-on:three-click="xxx"></my-button>
    16. 				</li>
    17. 			</ul>
    18. 		</div>
    19. 	</body>
    20. 	<script>
    21. 		// 定义全局组件的方式
    22. 		Vue.component('my-button', {
    23. 			props: ['m'],
    24. 			template: '',
    25. 			data: function() {
    26. 				return {
    27. 					n: 0
    28. 				};
    29. 			},
    30. 			methods: {
    31. 				doClickMyButton: function() {
    32. 					console.log('doClickMyButton方法被调用');
    33. 					this.n++;
    34. 					if (this.n % 3 == 0) {
    35. 						// 触发自定义组件定义的事件,这里可以传递任意个参数
    36. 						// 但是触发的事件绑定的函数要与参数个数一致
    37. 						this.$emit('three-click', this.n, 'http://www.javaxl.com', 'aa');
    38. 					}
    39. 				}
    40. 			}
    41. 		})
    42. 		var vm = new Vue({
    43. 			el: "#app",
    44. 			data: {
    45. 				ts: new Date().getTime()
    46. 			},
    47. 			methods: {
    48. 				// 当子组件传值父组件时,只需要在父组件的方法中定义参数即可
    49. 				xxx: function(a, b, c) {
    50. 					console.log("自定义事件绑定的函数被执行...")
    51. 					console.log(a);
    52. 					console.log(b);
    53. 					console.log(c);
    54. 				}
    55. 			}
    56. 		});
    57. 	</script>
    58. </html>
    59.

     

  • 相关阅读:
    css图片滚动
    RocketMQ 基础模型
    泡泡玛特，难成“迪士尼”
    AJAX 简介
    03 - 雷达的基本组成
    单源最短路的拓展应用
    第64步 深度学习图像识别：多分类建模误判病例分析（Pytorch）
    基于STM32和人工智能的智能家居监控系统
    【MySQL】全局锁、表级锁、行级锁
    惯性测量单元预积分原理与实现
  • 原文地址：https://blog.csdn.net/m0_65774688/article/details/126700564