后端前行Vue之路(二)：模版语法之插值与指令-3.指令语法

时间：2024-03-31 22:01:21

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，后续我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件…）

v-bind：动态绑定HTML属性，数据只能从data流向页面，即单向绑定。

<a v-bind:href="url">...</a>

v-model：数据不仅能从data流向页面，还可以从页面流向data。即双向绑定。

<input type="text" v-model:value="name">

在浏览器运行，单向输入框输入数据下面输入框不会跟着变，但是输入双向输入框上面的输入框会跟着变，这说明双向绑定v-model一般都应用在表单类元素上（如：input、select等），单向绑定v-bind用于表单没有意义。

	<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
	<h2 v-model:x="name">你好啊</h2>

v-on：监听DOM事件。

<button v-on:click="handleClick">Click me</button>

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

<!-- v-bind完整语法 -->
<a v-bind:href="url">...</a>
<!-- v-bind缩写 -->
<a :href="url">...</a>

<!-- v-on完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- v-on缩写 -->
<a @click="doSomething">...</a>

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

		<!-- 阻止默认事件（常用） -->
			<a href="http://www.baidu.com" @click.prevent="say">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

指令语法综合示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<a :href="address"> 测试v-bind绑定标签属性</a>
			<hr>
			v-model双向数据绑定：<input type="text" v-model="name"> 
			&nbsp <span>name={{name}}</span><br/>
			<hr>
			v-on事件测试 <button @click="say">点我</button>
			<hr>
			<span>测试事件修饰符</span><br>
			<!-- 阻止默认事件（常用） -->
			<a href="https://www.baidu.com" @click.prevent="say" style="margin-top: 12px;">点我提示信息</a>
			<!-- 阻止事件冒泡（常用） -->
			<div style="margin-top: 8px;" @click="say">
				<button @click.stop="say">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>
			<!-- 事件只触发一次（常用） -->
			<button @click.once="say" style="margin-top: 8px;">点我提示信息</button>
			<hr>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:"",
				address:"https://www.baidu.com"
			},
			methods:{
				say(){
					alert("你好呀")
				}
			}
		})
	</script>
</html>

相关文章