Vue模板语法——文本插值、指令、缩写

插值

文本（{{}}、v-text）

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本,双大括号会将数据解释为普通文本，或者采用v-text标签

<span id = "app">Message: {{ msg }}</span>

js代码：

var vm = new Vue({

	el : "#app",

	data : {

		msg : "hi vue",

	})

  • 标签将会被替代为对应数据对象上 msg property 的值

  • msg变化，插值处的内容会跟随更新

  • 使用v-once指定一次插值，不再更新

    <span v-once>这个将不会改变: {{ msg }}</span>

HTML（v-html）

为了输出真正的 HTML，你需要使用 [v-html]解析对应的html文本，示例如下

Attribute（v-bind）属性

参照：V-bind详细使用_CaseyWei的博客-CSDN博客_v-bind

Mustache {{}}语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令

javascript表达式

，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

注意事项：

  1. 每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
  2. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。
  3. 你不应该在模板表达式中试图访问用户定义的全局变量。
<!-- 这是语句，不是表达式 -->

{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->

{{ if (ok) { return message } }}

指令

基本介绍：

  1. 指令 (Directives) 是带有 v- 前缀的特殊 attribute，声明形式上很像Dom元素的属性
  2. 一般为单个js表达式，v-for除外
  3. 当表达式的值改变时，会响应式地作用于Dom元素。

v-if—确定元素是否渲染，用来插入/移除元素

v-show—元素会渲染，但是会通过display控制显示/隐藏

参数

  1. 一些指令能够接收一个“参数”，在指令名称之后以冒号表示，比如v-bind、v-on

  2. v-bind 指令可以用于响应式地更新 HTML attribute：

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

  3. v-on 指令，它用于监听 DOM 事件

    <a v-on:click="doSomething">...</a>

动态参数

2.6.0 新增

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

<!--

注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。

-->

<a v-bind:[attributeName]="url"> ... </a>
  • attributeName ——作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用
  • 比如attributeName值为”href“，等价于 v-bind:href。
<a v-on:[eventName]="doSomething"> ... </a>

  • 动态参数表达式语法约束：

    1. 某些字符，如空格和引号，避免在[]内通过+等符号拼接
    2. 动态参数会被默认为小写
    <!-- 动态参数写法1:注意eventType会被默认成小写eventtype -->
    
					<button v-on:[eventType]="showMessage">点我</button>

v-on参数：

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

  • 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。

    • 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

修饰符

参照：Vue修饰符 - 一抹嫣红 - 博客园 (cnblogs.com)

  • Vue提供了修饰符来帮助我们方便的处理一些事件：

    • .stop - 调用 event.stopPropagation()。
    • .prevent - 调用 event.preventDefault()。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • lazy修饰符：
      • 默认情况下，v-model默认是在input事件中同步输入框的数据的。
      • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
      • lazy修饰符可以让数据在失去焦点或者回车时才会更新：
    • number修饰符：
      • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
      • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
      • number修饰符可以让在输入框中输入的内容自动转成数字类型：
    • trim修饰符：
      • 如果输入的内容首尾有很多空格，通常我们希望将其去除
      • trim修饰符可以过滤内容左右两边的空格

    举两个例子stop和once

    				<!-- 修饰符 -->
    
				<!-- 点击只会执行一次，继续点击不再执行 -->
    
				<div>
    
					<button type="text" v-model.trim="info"/>
    
					<span @click.once="showMessage">sssss</span>
    
				</div>
    
				<!-- 添加stop修饰，只会执行showMessage，不会执行showMessage2 -->
    
				<div @click ="showMessage2(20,$event)">
    
					<span @click.stop="showMessage">嵌套</span>
    
				</div>

    简化写法

    [v-bind 缩写]

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

<!-- 缩写 -->
    
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
    
<a :[key]="url"> ... </a>

    [v-on 缩写]

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

<!-- 缩写 -->
    
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
    
<a @[event]="doSomething"> ... </a>

测试代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script type="text/javascript" src="vue.js"></script>

	</head>

	<body>

		<div id="app3">

			<div>

				<p v-if="flag">元素是否渲染</p>

				<p v-show="flag2">元素是否展示</p>

			</div>

				<!-- 指令参数 -->

				<div >

					<a v-bind:href="url">点击跳转</a>

					<button v-on:click="showMessage">点击事件</button>

					<!-- 动态参数写法1:注意eventType会被默认成小写 -->

					<button v-on:[eventType]="showMessage">点我</button>

					<!-- 简化写法1 -->

					<button @click="showMessage">点击事件1</button>

					<!-- 动态参数简化写法1 (2.6.0+) $event事件本身作为参数-->

					<button @[eventType]="showMessage2(10,$event)">点击事件2</button>

				</div>

				<!-- 修饰符 -->

				<!-- 点击只会执行一次，继续点击不再执行 -->

				<div>

					<button type="text" v-model.trim="info"/>

					<span @click.once="showMessage">sssss</span>

				</div>

				<!-- 添加stop修饰，只会执行showMessage，不会执行showMessage2 -->

				<div @click ="showMessage2(20,$event)">

					<span @click.stop="showMessage">嵌套</span>

				</div>

		</div>

		<script type="text/javascript">

			var vm = new Vue({

				el:"#app3",

				data:{

					flag:false,

					flag2:false,

					url:"www.baidu.com",

					eventtype:"click",

					info:"   我在    "

				},

				methods:{

					showMessage:function(){

						alert(event.type);

					},

					showMessage2:function(num,event){

						alert(event.type+num);

					},

				}

			});

		</script>

	</body>

</html>

Vue模板语法——文本插值、指令、缩写的更多相关文章

  1. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  2. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  3. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  4. 2.Vue模板语法

    1.模板语法的概述 (1)如何理解前端渲染 将数据填充到HTML标签中,生成静态的HTML内容 2.前端渲染方式 (1)原生JS拼接字符串 (2)使用前端模板引擎 (3)使用Vue特有的模板语法 3. ...

  5. Vue模板语法（一）

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  6. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  7. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  8. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  9. Vue模板语法 && 数据绑定

    模板语法 Vue模板语法包括两大类 插值语法 功能:用于解析标签体内容. 写法:{{xxx}},xxx是js表达式,可以直接读取倒data中所有区域. 指令语法 功能:用于解析标签(包括:标签属性.标 ...

  10. 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

随机推荐

  1. 创新突破！天翼云荣膺CCF HPC China 2024高性能计算创新大奖

    近日,第20届CCF全国高性能计算学术年会(CCF HPC China 2024)在武汉隆重召开.CCF HPC China是全球高性能计算领域三大标志性盛会之一,本届大会以"华章廿载 新质 ...

  2. 恭喜我同事的论文被IEEE HPCC收录！

    近日,由天翼云科技有限公司云网产品事业部天玑实验室撰写的<关于公有云区分负载QoS感知的内存资源动态超分管理优化>(Thoth:Provisioning Overcommitted Mem ...

  3. VS2022编译项目出现““csc.exe”已退出，代码为 -1073741819”的错误解决办法

    1.问题描述 编译出错如下图所示: 2.解决办法 在NuGet包中输入Microsoft.Net.Compilers,安装该包,安装完后重新生成就不报错了,如下图所示:

  4. Q：Linux查看进程启动服务的精确时间

    输入命令 获取进程号 #1#获取进程号ps -ef|grep java|grep 进程名#2#获取启动时间ps -p 进程号 -o lstart  展示启动时间:星期 月 日 小时:分钟:秒 年 一键 ...

  5. 并发编程 - 线程同步（六）之锁lock

    通过前面对Interlocked类的学习,相信大家对线程同步机制有了更深的理解,今天我们将继续需要另一种同步机制--锁lock. lock是C#语言中的关键字,是线程同步机制的一种简单的互斥锁实现方式 ...

  6. 鸿蒙开发 - 数据持久化 Preferences (内存存储) (封装)

    这篇文章介绍鸿蒙中的 Preferences,它是一种轻量级存储方式,数据存储在内存中,用于存储少量的数据. 可以执行 flush() 方法将内存中的数据写入到磁盘文件,保证下次重启后数据可以继续使用 ...

  7. 本地部署Grok2.0

    Grok-beta2.0(通过ChatBox实现) 个人使用: 1.注册登录 官方地址https://x.ai/ 2.创建API密钥 地址https://console.x.ai/ 3.登录githu ...

  8. SignalR 外部调用自定义Hub类的方法，Clients为null

    这是因为外部调用的类的对象和你连接的Hub类的对象,这两个对象 不!一!样! 解决方法 在自定义的Hub类中,注入IHubContext对象,然后在方法中调用IHubContext对象来向前端推送数据 ...

  9. 启动U盘制作-小白保姆式超详细刷机教程

    疑难解答加微信机器人,给它发:进群,会拉你进入八米交流群 机器人微信号:bamibot 简洁版教程访问:https://bbs.8miyun.cn 一.准备工作 需要用到的工具: 1.一台Window ...

  10. DeepSeek 官方推出的提示词库，AI内容生成的精准导航仪！

    前言 在当今数字化时代,人工智能(AI)正以前所未有的速度改变着我们的生活方式和工作模式.从简单的数据处理到复杂的创意生成,AI技术正逐渐渗透到各个领域,成为推动社会进步的重要力量.然而,如何高效地利 ...