Vue模板语法（下）

最新推荐文章于 2024-04-27 15:41:31 发布

秃头使我变强

最新推荐文章于 2024-04-27 15:41:31 发布

阅读量384

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_21907023/article/details/100995182

版权

本文详细讲解了Vue模板语法中的样式绑定、事件处理器、表单处理、自定义指令以及组件系统。介绍了class和style的绑定，事件修饰符如`.enter`和`.lazy`，以及v-model在表单控件上的应用。此外，还探讨了Vue的自定义指令，包括各种钩子函数及其参数，并解释了组件的基本概念、全局和局部注册以及props和自定义事件的使用。

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

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

1.2 style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象
事件处理器
事件监听可以使用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>

什么是事件冒泡?

在这里插入图片描述
2.2 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
  <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

具体代码演示：

<!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: greenyellow;
		}

		.b {
			background-color: firebrick;
		}

		.c {
			font-size: 60px;
		}

		div {
			padding: 20px;
		}
	</style>
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h2>样式绑定</h2>
					<span class="a">普通样式绑定</span>
					<hr />
					<span :class="bclz">vue样式绑定</span>
				</li>
				<li>
					<h2>事件冒泡</h2>
					<h3>click.stop 阻止事件</h3>
					<div style="background-color: #ADFF2F;height: 300px;width: 300px;" @click="d">
						<div style="background-color: darkgoldenrod;height: 200px;width: 200px;" @click="c">
							<div style="background-color: #B22222;height: 100px;width: 100px;" @click="b">
								<div style

最低0.47元/天解锁文章

秃头使我变强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法（下）

样式绑定1.1 class绑定使用方式：v-bind:class=“expression”expression的类型：字符串、数组、对象1.2 style绑定v-bind:style=“expression”expression的类型：字符串、数组、对象事件处理器事件监听可以使用v-on 指令2.1 事件修饰符Vue通过由点(.)表示的指令后缀来调用修饰符， ....
复制链接

扫一扫