• Vue模板语法2

    目录

    一：事件处理器

    1. 样式绑定

    ​编辑2. 事件处理器

    二：组件以及组件通信

    1. vue组件

    2.自定义组件

    3.组件通信

    三：Vue表单

    一：事件处理器

    1. 样式绑定

     1.1 class绑定
      使用方式：v-bind:class="expression" 
      expression的类型：字符串、数组、对象
      
    1.2 style绑定
      v-bind:style="expression"
      expression的类型：字符串、数组、对象

    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 type="text/css">
    8. 			.red{
    9. 				width: 400px;
    10. 				height: 400px;
    11. 				background-color: red;
    12. 			}
    13. 			.yellow{
    14. 				width: 300px;
    15. 				height: 300px;
    16. 				background-color: yellow;
    17. 			}
    18. 			.blue{
    19. 				width: 200px;
    20. 				height: 200px;
    21. 				background-color: blue;
    22. 			}
    23. 			.green{
    24. 				width: 100px;
    25. 				height: 100px;
    26. 				background-color: green;
    27. 			}
    28. 		</style>
    29. 	</head>
    30. <body>
    31. 		<!-- 定义边界 -->
    32. 		<div id ="app">
    33. 			<div class="red">
    34. 				<div class="yellow">
    35. 					<div class="blue">
    36. 						<div class="green"></div>
    37. 					</div>
    38. 				</div>
    39. 			</div>
    40. 		</div>
    41. 	</body>
    42. 	<script type="text/javascript">
    43. 		// 绑定边界 
    44. 		new Vue({
    45. 			el:'#app',
    46. 			data(){
    47. 				// 设置Vue所管理的边界中可以使用的变量
    48. 				return {
    49. 					msg:'hello vue!!!!',
    50. 				};
    51. 			}
    52. 		})
    53. 	</script>
    54. </html>


    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 type="text/css">
    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. 		<div id ="app">
    32. 			<p>按键修饰符</p>
    33. 			<input type="text" v-model="msg" @keyup.teb="dianwo"/>
    34. 			<p>发送一次</p>
    35. 			<input type="text" v-model="msg"/>
    36. 			<button type="button" @click.once="dianwo"> 点我试试</button>
    37. 			<p>阻止冒泡</p>
    38. 			<div class="red" @click="red">
    39. 				<div class="orange" @click="orange">
    40. 					<div class="blue" @click="blue">
    41. 						<div class="black" @click.stop="black"></div>
    42. 					</div>
    43. 				</div>
    44. 			</div>
    45. 		</div>
    46. 	</body>
    47. 	<script>
    48. 		// 绑定边界 
    49. 		new Vue({
    50. 			el:'#app',
    51. 			data(){
    52. 				return {
    53. 					msg:'hello vue!!!!',
    54. 				}
    55. 			},
    56. 			methods:{
    57. 				red(){
    58. 					alert("red");
    59. 				},orange(){
    60. 					alert("orange");
    61. 				},blue(){
    62. 					alert("blue");
    63. 				},black(){
    64. 					alert("black");
    65. 				},
    66. 				dianwo(){
    67. 					// alert("this.msg");
    68. 					console.log(this.msg);
    69. 				}
    70. 			}
    71. 			
    72. 		})
    73. 	</script>
    74. </html>

    二：组件以及组件通信

    1. vue组件

    2.1 组件简介

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

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

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

      2.2 全局和局部组件

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

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

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

          

      2.3 props

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

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

    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 type="text/css">
    8. 			
    9. 		</style>
    10. 	</head>
    11. <body>
    12. 		<div id ="app">
    13. 			<p>简单组件</p>
    14. 			<my-button></my-button>
    15. 			<p>父组件 传参 给 子组件</p>
    16. 			<my-button m='zhoujuan' n='3'></my-button>
    17. 		</div>
    18. 	</body>
    19. 	<script>
    20. 		Vue.component('my-button',{
    21. 			// template:'' 
    22. 			templatea:'',
    23. 			props:['m','n']
    24. 		})
    25. 		new Vue({
    26. 			el:'#app',
    27. 			data(){
    28. 				return {
    29. 					msg:'hello vue!!!!',
    30. 				}
    31. 			}
    32. 		})
    33. 	</script>
    34. </html>

     ​​​​​​

    3.组件通信

    自定义事件

       监听事件：$on(eventName)

       触发事件：$emit(eventName)

       注1：Vue自定义事件是为组件间通信设计   

            vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

         

            父Vue实例->Vue实例，通过prop传递数据

            子Vue实例->父Vue实例，通过事件传递数据

    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 type="text/css">
    8. 			
    9. 		</style>
    10. 	</head>
    11. <body>
    12. 		<div id ="app">
    13. 			<p>父组件 传参 给 子组件</p>
    14. 			<my-button m='zhoujuan' n='3' @mymethod="xxx"></my-button>
    15. 		</div>
    16. 	</body>
    17. 	<script>
    18. 		Vue.component('my-button',{
    19. 			// template:''
    20. 			 template:'',
    21. 			 props:['m','n'],
    22. 			 methods:{
    23. 				 sub(){
    24. 					 var name= "张三";
    25. 					 var sex = "女";
    26. 					 var age = 22;
    27. 					 console.log(name);
    28. 					 console.log(sex);
    29. 					 console.log(age);
    30. 					 // 子传父 将参数传递给父组件 的关键在于
    31. 					//1.$emit 2.自定义事件
    32. 					 this.$emit('mymethod',name,sex,age);
    33. 				 }
    34. 			 }
    35. 		})
    36. 		// 外部组件
    37. 		
    38. 		new Vue({
    39. 			el:'#app',
    40. 			data(){
    41. 				return {
    42. 					msg:'hello vue!!!!',
    43. 				}
    44. 			},
    45. 			methods:{
    46. 				xxx(a,b,c){
    47. 					console.log(a);
    48. 					console.log(b);
    49. 					console.log(c);
    50. 				}
    51. 			}
    52. 		})
    53. 		
    54. 		// 组件
    55. 		// 定义：templa
    56. 		// 父传子：props
    57. 		// 子传父：通过$emit注册事件名
    58. 		
    59. 	</script>
    60. </html>
    61.

    三：Vue表单

    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. 	</head>
    8. <body>
    9. 		<div id ="app">
    10. 			<!-- 创建一个多功能表单 -->
    11. 			<form>
    12. 				姓名：<input type="text" v-model="uname"/><br>
    13. 				密码：<input type="password" v-model="pwd"/><br>
    14. 				性别：
    15. 					<input name="sex" type="radio" checked="checked" />
    16. 					<input name="sex" type="radio" /><br>
    17. 				爱好：
    18. 				<div v-for="l in likes">
    19. 					<input v-model="hobby" type="checkbox" :value="l.id"/>{{l.name}}
    20. 				</div><br>
    21. 				英语等级：
    22. 				<select v-model="selectedVal">
    23. 					<option v-for="e in englishs" :value="e.id">{{e.name}}</option>
    24. 				</select><br>
    25. 				
    26. 				<input @click="show" type="checkbox"/>
    27. 				<input v-show="showFlag" @click="sub" type="button" value="okk" />
    28. 			</form>
    29. 		</div>
    30. 	</body>
    31. 	<script>
    32. 		new Vue({
    33. 			el:'#app',
    34. 			data(){
    35. 				return {
    36. 					uname:null,
    37. 					pwd:null,
    38. 					sex:1,
    39. 					likes:[//爱好数据源 复选框
    40. 						{id:1,name:'泡泡玛特'},
    41. 						{id:2,name:'小姜'},
    42. 						{id:3,name:'小蛙'},
    43. 						{id:4,name:'SP'}
    44. 					],
    45. 					englishs:[//数据源 下拉框
    46. 						{id:1,name:'优'},
    47. 						{id:2,name:'良'},
    48. 						{id:3,name:'差'}
    49. 					],
    50. 					hobby:[],//用来存放选中的爱好
    51. 					selectedVal:0,
    52. 					showFlag:false,
    53. 				} 
    54. 			},
    55. 			methods:{
    56. 				show(){
    57. 					this.showFlag = true;
    58. 				},
    59. 				sub(){
    60. 					// 后续都是JSON数据交互 向后台提交json对象
    61. 					var obj={
    62. 						uname:this.uname,
    63. 						sex:this.sex,
    64. 						pwd:this.pwd,
    65. 						hobby:this.hobby,
    66. 						level:this.selectedVal
    67. 					} 
    68. 					console.log(obj);  
    69. 				}
    70. 			}
    71. 		})
    72. 	</script>
    73. </html>

  • 相关阅读:
    【教3妹学java】Java之happens-before是什么？
    SQL UPDATE 语句（更新表中的记录）
    Using ‘C:\Users\administ\AppData\Local\ASP.NET\DataProtection-Keys‘ as ke
    float32转float16
    Android开发笔记（一百八十九）利用LAME录制MP3音频
    C# - Enum各种转换
    读速提升6倍！FORESEE车规级UFS开启汽车存储攀升之路
    如何处理linux 自动执行的sh脚本
    首选电商淘宝商品详情API接口（数据获取）
    【0145】postmaster创建System V shared memory默认值大小（2）
  • 原文地址：https://blog.csdn.net/m0_67864917/article/details/126692049