• Vue模板语法下

    目录

    一、事件处理器

    1.冒泡事件

    2.表单案例

     二、自定义组件

    一、事件处理器

    1.冒泡事件

    什么是冒泡事件

    stop    :阻止单击事件冒泡

    once   : 只执行一次

    v-on:keyup.键盘上任意键="事件名"   ：键盘按键事件

    v-on:submit.prevent="onSubmit"   ：提交事件不再重载页面

    案例：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    8. 	head>
    9. 	<style>
    10. 		.red{
    11. 			width: 400px;
    12. 			height: 400px;
    13. 			background-color: red;
    14. 		}
    15. 		.blue{
    16. 			width: 300px;
    17. 			height: 300px;
    18. 			background-color: skyblue;
    19. 		}
    20. 		.yellow{
    21. 			width: 200px;
    22. 			height: 200px;
    23. 			background-color: yellow;
    24. 		}
    25. 		.green{
    26. 			width: 100px;
    27. 			height: 100px;
    28. 			background-color: green;
    29. 		}
    30. 	style>
    31. 	<body>
    32. 		
    33. 		<div id="app">
    34. 			<p>冒泡事件p>
    35. 			<div class="red" @click="red">
    36. 				<div class="blue" @click.stop="blue">
    37. 						<div class="yellow" @click="yellow">
    38. 						<div class="green" @click.stop="green">div>
    39. 						div>
    40. 				div>
    41. 			div>
    42. 			<p>提交答案p>
    43. 			<button @click.once="dushi">{{btnv}}button>
    44. 			<p>按键事件p>
    45. 			<input v-on:keyup.enter="dushi2" id="in"/>
    46. 		div>
    47. 	body>
    48. 	<script type="text/javascript">
    49. 		//绑定界面
    50. 		new Vue({
    51. 			
    52. 			el:'#app',
    53. 			data(){
    54. 				return {
    55. 					btnv:'提交'
    56. 				}
    57. 			},
    58. 			methods:{
    59. 				red(){
    60. 					console.log("red");
    61. 				},
    62. 				blue(){
    63. 					console.log("blue");
    64. 				},
    65. 				yellow(){
    66. 					console.log("yellow");
    67. 				},
    68. 				green(){
    69. 					console.log("green");
    70. 				},
    71. 				dushi(){
    72. 					console.log("已做完，提交答案");
    73. 				},
    74. 				dushi2(){
    75. 					console.log("文本框");
    76. 				}
    77. 			}
    78. 		})
    79. 	script>
    80. html>

    2.表单案例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			<form v-on:submit.prevent="onSubmit">
    13. 				姓名：<input v-model="uname"/><br>
    14. 				密码：<input v-model="pwd"/><br>
    15. 				性别：<input type="radio" v-model="sex" name="sex" value="1"/>男
    16. 					<input type="radio" v-model="sex" name="sex" value="2"/>女
    17. 				<br>
    18. 				爱好：
    19. 				<span v-for="l in likes">
    20. 					<input type="checkbox" :value="l.id"/>{{l.name}}
    21. 				span><br>
    22. 				<label>成绩label>
    23. 				<select>
    24. 					<option value="-1">请选择option>
    25. 					<option v-for="l in types" :value="l.id">{{l.name}}option>
    26. 				select><br>
    27. 					确认<input type="checkbox" v-model="flag" />
    28. 				<input type="submit" v-bind:disabled="show" v-on:click="doSubmit"  value="提交"/>
    29. 					
    30. 			form>
    31. 		div>
    32. 	body>
    33. 	<script type="text/javascript">
    34. 		//绑定界面
    35. 		new Vue({
    36. 			
    37. 			el:'#app',
    38. 			data(){
    39. 				return {
    40. 					likes:[
    41. 						{id:1,name:'篮球'},
    42. 						{id:2,name:'排球'},
    43. 						{id:3,name:'桌球'},
    44. 						{id:4,name:'排球'}
    45. 					],
    46. 					types:[
    47. 						{id:1,name:'差'},
    48. 						{id:2,name:'良'},
    49. 						{id:3,name:'优'}
    50. 					],
    51. 					uname:null,
    52. 					pwd:null,
    53. 					flag:false
    54. 				}
    55. 			},
    56. 			computed: {
    57. 				show: function() {
    58. 					return !this.flag;
    59. 				}
    60. 			},
    61. 			methods: {
    62. 				doSubmit: function() {
    63. 					console.log('doSubmit')
    64. 					var obj = {
    65. 						uname: this.uname,
    66. 						pwd: this.pwd,
    67. 						age:this.age+10,
    68. 						sex: this.sex,
    69. 						likes:this.likes,
    70. 						types: this.types,
    71. 					}
    72. 					console.log(obj);
    73. 				}
    74. 			}
    75. 		})
    76. 	script>
    77. html>

     二、自定义组件

    template  ：定义

    props   ：父传子参数

    子传父

    $emit  ：1.$emit 2.自定义事件  this.$emit('事件名',参数)

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>自定义组件title>
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			
    12. 			<p>父组件  传参  给  子组件p>
    13. 			<mybutton m='zs' n='0'>mybutton>
    14. 			<p>子组件  传参  给  父组件p>
    15. 			<mybutton2 m='zs' n='0' @mymethod='xxx'>mybutton2>
    16. 		div>
    17. 	body>
    18. 	<script type="text/javascript">
    19. 		Vue.component('mybutton',{
    20. 			// template:'',
    21. 			template:'',//定义
    22. 			props:['m','n'],//父传子
    23. 			methods:{
    24. 				sub(){
    25. 					var name='张三';
    26. 					var sex="男";
    27. 					var age= 12;
    28. 					this.n++;
    29. 					console.log(name);
    30. 					console.log(sex);
    31. 					console.log(age);
    32. 				}
    33. 			}
    34. 		})
    35. 		Vue.component('mybutton2',{
    36. 			// template:'',
    37. 			template:'',//定义
    38. 			props:['m','n'],//父传子
    39. 			methods:{
    40. 				str(){
    41. 					this.n++;
    42. 					var name='张三';
    43. 					var sex="男";
    44. 					var age= 12;
    45. 					//子组件  将参数传递给父组件   的关键在于
    46. 					//1.$emit 2.自定义事件  this.$emit('事件名',.....)
    47. 					this.$emit('mymethod',{'name':name,'sex':sex,'age':age});//子传父
    48. 				}
    49. 			}
    50. 		})
    51. 		//外部组件
    52. 		new Vue({
    53. 			
    54. 			el:'#app',
    55. 			data(){
    56. 				return {
    57. 					msg:'想见你想见你想见你'
    58. 				}
    59. 			},
    60. 			methods:{
    61. 				xxx(a){
    62. 					console.log(a);
    63. 				}
    64. 			}
    65. 		})
    66. 	script>
    67. html>

     

  • 相关阅读:
    记一次频繁GC问题的排查
    sass和scss 有何区别？
    安全管理：守护数据库的堡垒（九）
    使用Docker-Java监听Docker容器的信息
    AutoTrain：在Google Colab上微调LLM最简单的方法
    JSD-2204-MyBatis小结-SLF4j日志-SpringMVC-Day05
    C++实践2：在c++20中为spdlog与fmt装配source_location
    模型训练出现NAN
    求解plc相关问题下载程序
    可衡量的项目目标怎么设定？
  • 原文地址：https://blog.csdn.net/weixin_61523879/article/details/126691225