• vue模板语法下集

    目录

    一、事件处理器

    二、自定义组件 

    三、组件通信 

    一、事件处理器

    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”>

    2、什么是事件冒泡

    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

    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. 		<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. 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. 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. 					
    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.

    二、自定义组件 

    vue组件
    5.1 组件简介
    组件(Component)是Vue最强大的功能之一
    组件可以扩展HTML元素，封装可重用的代码
    组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
    5.2 全局和局部组件
    全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
    局部组件: new Vue({el:‘#d1’,components:{…}})
    注册后，我们可以使用以下方式来调用组件：
    tagName>/tagName>
    5.3 props
    props是父组件用来传递数据的一个自定义属性。
    父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 “prop”
    注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods
    以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
    注2：当我们定义这个 组件时，你可能会发现它的data并不是像这样直接提供一个对象
    data: {
    count: 0
    }
    取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
    data: function () {
    return {
    count: 0
    }
    }
    注3：定义组件名的方式有两种
    短横线分隔命名(建议使用)
    Vue.component(‘my-component-name’, { /* … / })，引用方式：
    首字母大写命名
    Vue.component(‘MyComponentName’, { / … */ })，引用方式： my-component-name>和MyComponentName>都是可接受的
    注4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，
    camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
    props: [‘postTitle’],my-tag post-title=“hello!”>/my-tag>
    注5：props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’]
    希望每个 prop 都有指定的值类型
    props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise // or any other constructor

    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. 			.f200{
    9. 				font-size: 200px;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		
    15. 		<div id="app">
    16. 			
    17. 			
    18. 			<my-button m="aa">my-button>
    19. 			<my-button m="bb">my-button>
    20. 			
    21. 			
    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.

     

    三、组件通信 

     自定义事件
    监听事件：美元符号on(eventName)
    触发事件：$emit(eventName)
    注1：Vue自定义事件是为组件间通信设计
    vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
    父Vue实例->Vue实例，通过prop传递数据
    子Vue实例->父Vue实例，通过事件传递数据
    注2：事件名
    不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
    建议使用“短横线分隔命名”，例如：three-click

    1. 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. 					
    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实现水平垂直居中的七种方式
    聚观早报 | 黑五电子产品销售额飙升；谷歌不满微软收购动视暴雪
    ＜数据集＞腐烂水果识别数据集＜目标检测＞
    【Python】Python列表排序 list.sort方法和内置函数sorted用法
    sm2加密算法
    开发Chrome 插件赚钱的7个主要方式（Chrome Extension ）
    3分钟火速手写一个二叉查找树，搞快点。
    echarts 横向柱状图示例
    C专家编程 第6章 运行的诗章：运行时数据结构 6.10 MS-DOS中的堆栈段
    将音频格式从flac转到wav的两种方法
  • 原文地址：https://blog.csdn.net/qq_44247968/article/details/126700805