vue基础语法2

顾轻舟。

已于 2022-09-21 11:23:03 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript 前端框架 html

于 2022-09-21 11:21:50 首次发布

本文链接：https://blog.csdn.net/qq_64001795/article/details/126965545

版权

本文详细介绍了Vue的基础语法，包括样式绑定、事件修饰符、按键修饰符、常用控件的使用，以及自定义指令和组件的创建。重点讨论了自定义事件在子组件向父组件通信中的应用，同时讲解了局部组件和全局组件的定义及其数据管理。

摘要由CSDN通过智能技术生成

1、样式绑定

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

示例：

<!--定义示例样式-->
		<style>
			.fontClass {
				font-size: 40px;
			}
			.colorClass {
				color: red;
			}
		</style>

<div id="app">
			<p><span v-bind:class="fc">aaaaa</span></p>
			<p><span v-bind:class="ac">aaaaa2</span></p>
			<p><span :style="myStyle">aaaaa3</span></p>
		</div>

var vm = new Vue({
			el: '#app',
			data: {
				fc: 'fontClass',
				ac: ['fontClass', 'colorClass'],
				fontSize: 40,
				color: 'green',
				//样式对象，注意：样式名使用驼峰命名，如：fontSize
				myStyle: {
					fontSize: '50px',
					color: 'red',
					fontWeight: 'bold'
				}
			}
		});

效果展示

2、事件修饰符

几个常用的事件修饰符：

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

示例：

<div id="app">
			<div>接收消息：{
  {receverMsg}}</div>
			<p>
				<!--响应多次或一次点击事件-->
				<input type="text" v-model="sendMsg">
				<button @click="sender">发送(多次)</button>
				<button @click.once="sender">发送(一次)</button>
			</p>
			<p>
				<!-- 阻止表单提交 -->
				<form action="testAction.action" method="post" @submit.prevent="doSubmit()">
					<label>名称</label>
					<input type="text" name="name" />
					<input type="submit" value="提交" />
				</form>
			</p>
			<!-- 案件修饰符 -->
			<p>
				<input v-model:value="val" v-on:keyup.13="keyup" />
			</p>
		</div>

var vm = new Vue({
			el: '#app',
			data: {
				receverMsg: null,
				sendMsg: null,
				val: null
			},
			methods: {
				sender: function() {
					this.receverMsg = this.sendMsg;
				},
				doSubmit: function() {
					alert('ok');
				},
				keyup: function() {
					alert(this.val);
				}
			}
		});

效果展示