• 模板语法2

    目录

    一、事件处理器

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

    ①阻止单击事件冒泡( .stop)

     ②click 事件只能点击一次(.once)

     ③按键修饰符

     二、组件及组件通信

    1、组件简介

    2、全局和局部组件

    3、简单组件

     4、父组件传参给子组件

    三、综合案例

    一、事件处理器

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

    ①阻止单击事件冒泡( .stop)

    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. 		<style type="text/css">
    8. 			.red{
    9. 				height: 400px;
    10. 				width: 400px;
    11. 				background-color: red;
    12. 			}
    13. 			.yellow{
    14. 				height: 300px;
    15. 				width: 300px;
    16. 				background-color: yellow;
    17. 			}
    18. 			.blue{
    19. 				height: 200px;
    20. 				width: 200px;
    21. 				background-color: blue;
    22. 			}
    23. 			.green{
    24. 				height: 100px;
    25. 				width: 100px;
    26. 				background-color: green;
    27. 			}
    28. 		style>
    29. 	head>
    30. 	<body>
    31. 		<div id="app">
    32. 			<div class="red" @click="red()">
    33. 				<div class="yellow" @click="yellow()">
    34. 					<div class="blue" @click="blue()">
    35. 						<div class="green" @click.stop="green">div>
    36. 					div>
    37. 				div>
    38. 			div>
    39. 		div>
    40. 	body>
    41. 	<script>
    42. 		new Vue({
    43. 			el:'#app',
    44. 			data(){
    45. 				return {
    46. 					msg:'666'
    47. 				}
    48. 			},
    49. 			methods:{
    50. 				red(){
    51. 					alert('red');
    52. 				},
    53. 				yellow(){
    54. 					alert('yellow');
    55. 				},
    56. 				blue(){
    57. 					alert('blue');
    58. 				},
    59. 				green(){
    60. 					alert('green');
    61. 				}
    62. 			}
    63. 		})
    64. 	script>
    65. html>

     ②click 事件只能点击一次(.once)

    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. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<p>发送一次p>
    11. 			<input type="text" v-model="msg" />
    12. 			<button type="button" @click.once="dianwoshishi">点我试试button>
    13. 		div>
    14. 	body>
    15. 	<script>
    16. 		new Vue({
    17. 			el:'#app',
    18. 			data(){
    19. 				return {
    20. 					msg:'666'
    21. 				}
    22. 			},
    23. 			methods:{
    24. 				dianwoshishi(){
    25. 					alert(this.msg);
    26. 				}
    27. 			}
    28. 		})
    29. 	script>
    30. 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. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<p>按键修饰符p>
    11. 			<input type="text" v-model="msg" @keyup.enter="dianwoshishi"/>
    12. 		div>
    13. 	body>
    14. 	<script>
    15. 		new Vue({
    16. 			el:'#app',
    17. 			data(){
    18. 				return {
    19. 					msg:'666'
    20. 				}
    21. 			},
    22. 			methods:{
    23. 				dianwoshishi(){
    24. 					alert(this.msg);
    25. 				}
    26. 			}
    27. 		})
    28. 	script>
    29. html>

     二、组件及组件通信

    1、组件简介

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

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

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

    2、全局和局部组件

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

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

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

          

    3、简单组件

    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. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<p>简单组件p>
    11. 			<my-button>my-button>
    12. 		div>
    13. 	body>
    14. 	<script>
    15. 		Vue.component('my-button',{
    16. 			template:''
    17. 		})
    18. 		new Vue({
    19. 			el:'#app',
    20. 			data(){
    21. 				return {
    22. 					msg:'666'
    23. 				}
    24. 			}
    25. 		})
    26. 	script>
    27. html>

     4、父组件传参给子组件

    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. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<p>父组件传参给子组件p>
    11. 			<my-button m='diandian' n='3' @mymethod="xxx">my-button>
    12. 		div>
    13. 	body>
    14. 	<script type="text/jscript">
    15. 		Vue.component('my-button',{
    16. 			template:'',
    17. 			props:['m','n'],
    18. 			methods:{
    19. 				sub(){
    20. 					var name="颠颠";
    21. 					var sex="男";
    22. 					var age=18;
    23. 					console.log(name);
    24. 					console.log(sex);
    25. 					console.log(age);
    26. 					//子传父将参数传递给父组件
    27. 					this.$emit('mymethod',name,sex,age);
    28. 				}
    29. 			}
    30. 		})
    31. 		new Vue({
    32. 			el:'#app',
    33. 			data(){
    34. 				return {
    35. 					msg:'666'
    36. 				}
    37. 			},
    38. 			methods:{
    39. 				xxx(a,b,c){
    40. 					console.log(a);
    41. 					console.log(b);
    42. 					console.log(c);
    43. 				}
    44. 			}
    45. 		})
    46. 	script>
    47. 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. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			姓名：<input type="text" v-model="uname" /><br>
    11. 			密码：<input type="password" v-model="pwd"/><br>
    12. 			性别：
    13. 				<input name="sex" type="radio" checked="checked">男
    14. 				<input name="sex" type="radio">女<br>
    15. 			爱好：
    16. 				<div v-for="l in likes">
    17. 					<input v-model="hobby" type="checkbox" v-bind:value="l.id" />{{l.name}}
    18. 				div><br>
    19. 			英语等级：
    20. 				<select v-model="selectedVal">
    21. 					<option v-for="e in englishs" :value="e.id">{{e.name}}
    22. 						
    23. 					option>
    24. 				select><br>
    25. 			<input type="checkbox" @click="show" />
    26. 			<input v-show="showFlag" @click="sub" type="button" value="ok" />
    27. 		div>
    28. 	body>
    29. 	<script>
    30. 		new Vue({
    31. 			el:'#app',
    32. 			data(){
    33. 				return {
    34. 					uname:null,
    35. 					pwd:null,
    36. 					sex:1,
    37. 					likes:[//数据源 复选框
    38. 						{id:1,name:'篮球'},
    39. 						{id:2,name:'足球'},
    40. 						{id:3,name:'桌球'},
    41. 						{id:4,name:'乒乓球'}
    42. 					],
    43. 					englishs:[//数据源 下拉框
    44. 						{id:1,name:'优'},
    45. 						{id:2,name:'良'},
    46. 						{id:3,name:'差'}
    47. 					],
    48. 					hobby:[],//用来存放选中的爱好
    49. 					selectedVal:0,
    50. 					showFlag:false
    51. 				}
    52. 			},
    53. 			methods:{
    54. 				show(){
    55. 					this.showFlag=true;
    56. 				},
    57. 				sub(){
    58. 					var obj={
    59. 						uname:this.uname,
    60. 						pwd:this.pwd,
    61. 						sex:this.sex,
    62. 						hobby:this.hobby,
    63. 						level:this.selectedVal
    64. 					}
    65. 					console.log(obj);
    66. 				}
    67. 			}
    68. 		})
    69. 	script>
    70. html>

     

  • 相关阅读:
    外包干了五年，废了...
    多御安全浏览器更新隐私锁，个人隐私有救了
    Java Spring Boot微服务：构建现代化分布式应用的利器
    《HarmonyOS IoT设备开发实战》-参考资料地址
    计算机网络——b站王道考研笔记
    阿里p8软测专家耗时一个月整理出，从0基础自学到功能测试再到自动化测试超全学习指南
    大数据有何优缺点
    SQL中为什么不要使用1=1？
    中国象棋开源人工智能程序（带UI）搬运
    BUUCTF--WEB
  • 原文地址：https://blog.csdn.net/yzq102873/article/details/126697708