• vue模板语法下集

    目录

    一、事件处理器

     二、自定义组件

    三、组件通信

    四、表单案例

    一、事件处理器

    事件修饰符

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

      .stop

      .prevent

      .capture

      .self

      .once

    按键修饰符

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

    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>
    8. 			.red {
    9. 				width: 400px;
    10. 				height: 400px;
    11. 				background-color: red;
    12. 			}
    13.  
    14. 			.yellow {
    15. 				width: 300px;
    16. 				height: 300px;
    17. 				background-color: yellow;
    18. 			}
    19.  
    20. 			.blue {
    21. 				width: 200px;
    22. 				height: 200px;
    23. 				background-color: blue;
    24. 			}
    25.  
    26. 			.green {
    27. 				width: 100px;
    28. 				height: 100px;
    29. 				background-color: green;
    30. 			}
    31. 		style>
    32. 	head>
    33. 	<body>
    34. 		<div id="app">
    35.  
    36. 			<p冒泡事件>
    37. 				p>
    38. 				<div class="red" @click="red">
    39. 					<div class="yellow" @click.stop="yellow">
    40. 						<div class="blue" @click="blue">
    41. 							<div class="green" @click.stop="green">div>
    42. 						div>
    43. 					div>
    44. 				div>
    45. 				
    46. 			<p>只能发送一次请求p>
    47. 			<button @click.once="once">点我试试button>
    48. 			
    49. 			<p>案件修饰符p>
    50. 			<input @keyup.enter="enter"/>
    51.  
    52. 		div>
    53. 	body>
    54. 	<script>
    55. 		new Vue({
    56. 			el: "#app",
    57. 			data() {
    58. 				return {
    59. 					f200: 'f200'
    60. 				};
    61. 			},
    62. 			methods: {
    63. 				red() {
    64. 					alert("red");
    65. 				},
    66. 				yellow() {
    67. 					alert("yellow");
    68. 				},
    69. 				blue() {
    70. 					alert("blue");
    71. 				},
    72. 				green() {
    73. 					alert("green");
    74. 				},
    75. 				once(){
    76. 					alert("试试就试试");
    77. 				},
    78. 				enter(){
    79. 					alert("hello,vue!");
    80. 				}
    81. 			}
    82. 		})
    83. 	script>
    84. html>

     加.stop之前 点击yellow区域还有red弹出

     

     加.stop之后就只有选择的区域了

     

     再点击就无效了

     案件修饰符

     二、自定义组件

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

          组件可以扩展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. 			
    11. 			<mybutton m="cdl">mybutton>
    12. 			<mybutton m="小黄人">mybutton>
    13. 		div>
    14. 	body>
    15. 	<script>
    16. 		Vue.component('mybutton',{
    17. 			//props是定义组件中的变量的
    18. 			props:['m'],
    19. 			//template代表了自定义组件在页面上显示的内容
    20. 			template:'',
    21. 			data:function(){
    22. 				return {
    23. 					n:1
    24. 				}
    25. 			},
    26. 			methods:{
    27. 				point(){
    28. 					this.n++;
    29. 				}
    30. 			}
    31. 		});
    32. 		//绑定边界
    33. 		new Vue({
    34. 			el:"#app",
    35. 			data() {
    36. 				return {
    37. 				};
    38. 			}
    39. 		})
    40. 	script>
    41. html>

     起始次数

     

     组件点击一次加一次次数

    三、组件通信

    自定义事件

       监听事件：$on(eventName)

       触发事件：$emit(eventName)

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

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

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

    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. 			<ul>
    11. 				<li>
    12. 					<h3>{{ts}}h3>
    13. 					<p>组件通信p>
    14. 					
    15. 					<mybutton m="cdl" v-on:three-click="xxx">mybutton>
    16. 				li>
    17. 			ul>
    18. 		div>
    19. 	body>
    20. 	<script>
    21. 		Vue.component('mybutton',{
    22. 			//props是定义组件中的变量的
    23. 			props:['m'],
    24. 			//template代表了自定义组件在页面上显示的内容
    25. 			template:'',
    26. 			data:function(){
    27. 				return {
    28. 					n:1
    29. 				}
    30. 			},
    31. 			methods:{
    32. 				point(){
    33. 					console.log('point方法被调用');
    34. 					this.n++;
    35. 					if(this.n % 3 ==0){//父-->子
    36. 						//触发自定义组件的事件，这里可以传递任意个参数
    37. 						//但是触发的事件绑定的函数要与参数个数一致
    38. 						this.$emit('three-click',this.n,'http://www.baidu.com','cdl');
    39. 					}
    40. 				}
    41. 			}
    42. 		});
    43. 		//绑定边界
    44. 		new Vue({
    45. 			el:"#app",
    46. 			data() {
    47. 				return {
    48. 					//ts:new Data().getTime()
    49. 				};
    50. 			},
    51. 			methods:{
    52. 				xxx:function(a,b,c){
    53. 					console.log("自定义事件绑定的函数被执行...");//子-->父
    54. 					console.log(a);
    55. 					console.log(b);
    56. 					console.log(c);
    57. 				}
    58. 			}
    59. 		})
    60. 	script>
    61. 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. 			<form>
    11. 				<ul>
    12. 					<li>
    13. 						<p>表单p>
    14. 						<label>姓名:label><input v-model="uname" /><br />
    15. 						<label>密码:label><input v-model="upwd" type="password" /><br />
    16. 						
    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:disable="show" v-on:click="doSubmit" />
    34. 					li>
    35. 				ul>
    36. 			form>
    37. 		div>
    38. 	body>
    39. 	<script>
    40. 		new Vue({
    41. 			el: '#app',
    42. 			data() {
    43. 				return {
    44. 					uname: null,
    45. 					upwd: null,
    46. 					age: 10,
    47. 					sex: 1,
    48. 					hobby: [{
    49. 						id: 1,
    50. 						name: '篮球'
    51. 					}, {
    52. 						id: 2,
    53. 						name: '足球'
    54. 					}, {
    55. 						id: 3,
    56. 						name: '象棋'
    57. 					}],
    58. 					hobbies: [],
    59. 					types: [{
    60. 						id: 1,
    61. 						name: 'A'
    62. 					}, {
    63. 						id: 2,
    64. 						name: 'B'
    65. 					}, {
    66. 						id: 3,
    67. 						name: 'C'
    68. 					}],
    69. 					type: null,
    70. 					mark: '学生备注',
    71. 					flag: false
    72. 				}
    73. 			},
    74. 			computed: {
    75. 				show: function() {
    76. 					return !this.flag;
    77. 				}
    78. 			},
    79. 			methods: {
    80. 				doSubmit: function() {
    81. 					console.log('doSubmit')
    82. 					var obj = {
    83. 						uname: this.uname,
    84. 						upwd: this.upwd,
    85. 						age: this.age + 10,
    86. 						sex: this.sex,
    87. 						hobbies: this.hobbies,
    88. 						type: this.type,
    89. 						mark: this.mark,
    90. 					}
    91. 					console.log(obj);
    92. 				}
    93. 			}
    94.  
    95. 		})
    96. 	script>
    97. html>

     

  • 相关阅读:
    人工智能在软件测试领域的应用研究
    ubuntu编译和链接特定版本的opencv和boost
    Dubbo的使用
    Jmeter接口测试教程
    来用Vite+React快速开发浏览器插件
    既然有了量化交易，技术分析还有存在的必要么？有专门收割自动交易系统的策略吗?
    python 中的迭代器和生成器简单介绍
    玩转TypeScript之玩转数组(完整版)
    算法2：链表的逆转
    K8s Kubelet 垃圾回收机制
  • 原文地址：https://blog.csdn.net/weixin_62735525/article/details/126694638