vue模板语法（下）_vue 封装一个模板语法

作者：小丑西瓜9 | 2024-04-13 19:28:49

踩

vue 封装一个模板语法

1. 样式绑定

1.1 class绑定

  使用方式：v-bind:class="expression" 
  expression的类型：字符串、数组、对象
1
2

1.2 style绑定

  v-bind:style="expression"
  expression的类型：字符串、数组、对象
1
2

2. 事件处理器

事件监听可以使用v-on 指令

之前已学习

2.1 事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>样式绑定和事件处理</title>
	</head>
	<style>
		.a{
			background-color: aqua;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 30px;
		}
		div{
			padding: 30px;
		}
	</style>
	
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定</h3>
					<span :class="aclz">今天踩我头上</span>
					<span :class="bclz">明天我长到你头上</span>
				</li>
				<li>
					<h3>事件冒泡</h3>
					<div style="width: 300px;height: 300px;background-color: red;" @click="d">
						<div style="width: 200px;height: 200px;background-color: aqua;" @click="c">
							<div style="width: 100px;height: 100px;background-color: yellow;" @click="b">
								<div style="width: 50px;height: 50px;background-color: lawngreen;" @click.stop="a">
									
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<h3>模拟QQ消息发生（讲解是某些按钮只能点击一次）</h3>
					{{info}}<input v-model="msg" v-on:keyup.enter="send"/>
					<button @click="send">发送多次</button>
					<button @click.once="send">只能发送一次</button>
				</li>
			</ul>
		</div>
	</body>
	<script>
		//通過Vue實例去渲染Vue所管理的邊界
		new Vue({
			el: '#app',
			data() {
				return {
					aclz:'a',
					bclz:['b','c'],
					msg:'',
					info:''
				};
			},
			
			methods:{
				a(){
					alert("事件A被触发！！!");
				},
				b(){
					alert("事件B被触发！！!");
				},
				c(){
					alert("事件C被触发！！!");
				},
				d(){
					alert("事件D被触发！！!");
				},
				send(){
					this.info = this.msg;
					this.msg = '';
				}
			}
		})
	</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

显示结果：
在这里插入图片描述

3. vue组件

2.1 组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

2.2 全局和局部组件

全局组件：
Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件:
new Vue({el:’#d1’,components:{…}}) 注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
1

2.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
      }
    } 
1
2
3
4
5
6
7
8
9
10

注3：定义组件名的方式有两种

短横线分隔命名(建议使用)
Vue.component(‘my-component-name’, { /* … */})，引用方式：<my-component-name>

首字母大写命名
Vue.component(‘MyComponentName’, { /* … */ })，引用方式： <my-component-name>和<MyComponentName>都是可接受的

注4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。

这意味着当你使用 DOM 中的模板时，
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
props: [‘postTitle’],

注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
2
3
4
5
6
7
8
9
10

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>组件</title>
	</head>
	<style>
		.a{
			background-color: aqua;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 30px;
		}
		div{
			padding: 30px;
		}
	</style>
	
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<my-button></my-button>
					
				</li>
				<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button m="NB"></my-button>
				</li>
				<li>
					<h3>父子组件的传参（子传父）</h3>
					<my-button v-on:three-click="getData"></my-button><br />
					接受自定义组件中内部的变量值：{{innerNum}}<br />
					作者：{{au}}
					<hr />
					<my-button v-on:three-click="getData"></my-button><br />
					接受自定义组件中内部的变量值：{{innerNum}}<br />
					作者：{{au}}
				</li>
				<li>
					<h3>全局组件的注册</h3>
					<my-button2></my-button2>
				</li>
				
			</ul>
		</div>
	</body>
	<script>
		Vue.component('my-button2',{
			props:["m"],
			template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
			data(){
				return {
					n:1,
					auther:'来了老弟！'
				};
			},
			methods:{
				add(){
					this.n = this.n + 1;
					//自定义一个三击事件
					if(this.n%3==0){
						this.$emit('three-click',this.n,this.auther);
					}
				}
			}
		});
		new Vue({
			el: '#app',
			data() {
				return {
					innerNum:1,
					au:''
				};
			},
			methods:{
				getData(v,a){
					this.innerNum = v;
					this.au = a;
				}
			},
			components:{
				'my-button':{
					props:["m"],
					template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data(){
						return {
							n:1,
							auther:'来了老弟！'
						};
					},
					methods:{
						add(){
							this.n = this.n + 1;
							//自定义一个三击事件
							if(this.n%3==0){
								this.$emit('three-click',this.n,this.auther);
							}
						}
					}
				}
			}
		})
	</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

结果图片：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/418135