后端前行Vue之路(二):模版语法之插值与指令

1.概述

Vue.js的模板语法是一种将Vue实例的数据绑定到HTML文档的方法。Vue的模板语法是一种基于HTML的扩展,允许开发者将Vue实例中的数据绑定到HTML元素,以及在HTML中使用一些简单的逻辑和指令。Vue.js 基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。

Vue的模板语法大体上分为两类:插值语法和指令语法。接下来我们我就分别来看看这两种语法是如何使用的。

2.插值语法

插值: 使用双大括号 {{ }} 将数据插入到HTML中。即{{xxx}},xxx是JS表达式,且可以直接读取到data中的所有属性。插入语法用于解析标签体内容。

<span>{{ number }}</span>

什么是JS表达式?

一个表达式会产生一个值,可以放在任何一个需要值的地方:

{{number}}

{{ number + 1 }}

{{method(1)}}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。但是下面的语句就不是表达式,而是语句了:

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

下面我们就来看看上面表达式的示例:

<!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">
			<h2>插值语法示例如下:</h2>
			<h3>number = {{number}}</h3>
			<h3>number加1 = {{number+1}}</h3>
			<h3>方法计算 = {{add(5)}}</h3>
			<h3>三目运算:{{number > 6 ? "哈哈" : "呵呵"}}</h3>
			<h3>字符串反转操作:{{ message.split('').reverse().join('') }}</h3>
			
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				number: 10,
				message: "hello world"
			},
			methods:{
				add(i) {
					return this.number+i
				}
			}
		})
	</script>
</html>

浏览器运行结果如下:

项目推荐:基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba企业级系统架构底层框架封装,解决业务开发时常见的非功能性需求,防止重复造轮子,方便业务快速开发和企业技术栈框架统一管理。引入组件化的思想实现高内聚低耦合并且高度可配置化,做到可插拔。严格控制包依赖和统一版本管理,做到最少化依赖。注重代码规范和注释,非常适合个人学习和企业使用

Github地址:https://github.com/plasticene/plasticene-boot-starter-parent

Gitee地址:https://gitee.com/plasticene3/plasticene-boot-starter-parent

微信公众号Shepherd进阶笔记

交流探讨qun:Shepherd_126

3.指令语法

指令 (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-bindv-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>

4.动态参数

从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

<!--
注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href

同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus

对动态参数的值的约束

动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。例如:

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property,否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
  • 22
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值