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. Luogu P11230 CSP-J 2024 接龙 题解 [ 线性 dp ] [ 前缀和 ]

    接龙:一个前缀和优化 dp 或者单调队列优化 dp 的题目. 怎么周围的人都秒了 T3 不会 T4 啊,只有我觉得 T4 很套路,T3 比较难写吗. 暴力 dp 为了避免多维的状态定义,我们把每个人的 ...

  2. FreeSql学习笔记——8.数据返回类型

    前言   FreeSql数据返回格式比较丰富,包括单条.列表.导航属性数据.指定字段.Dto等:可以有效的减少代码量,减少字段复制等操作:   前面的查询已经用到了日常基本需要用到的数据格式,本篇是常 ...

  3. IGM机器人维修的关键环节

    在现代科技领域,机器人已经成为不可或缺的一部分,它们广泛应用于各个行业,包括制造业.服务业.医疗.科研等.对于任何机器人来说,定期的维护和修理都是必不可少的.这不仅可以确保机器人正常工作,还可以延长其 ...

  4. 【COM3D2Mod 制作教程（4）】实战！制作身体部分（上）

    [COM3D2Mod 制作教程(4)]实战!制作身体部分(上) 教程介绍 现在正式进入实战教程环节,我会以我的实际制作过程详尽的教授每个细节,也因此受限于篇幅大小,"实战!制作身体部分&qu ...

  5. QT5笔记： 28. SplashWindow 没听懂，无内容

    没有说明这个SplashWindow咋用 大概小人愚笨 this->setWindowFlag(Qt::SplashScreen);莫非是这个?

  6. 【Pre】预习测试-Logisim/Verilog/MIPS

    好家伙,开门挂 T2 字符自动机cscore 1.审题·惯性思维:直接输出了当前连续数,题目要求是最大连续数 -> [重新读题解决] 2.非阻塞赋值运用:若在always块内通过if(out1 ...

  7. Web前端入门第2问：前端开发是什么？与后端、全栈的区别是什么？一个完整的Web项目有哪些角色参与？

    一个完整的Web项目有哪些角色参与? 提出需求(这一步可以是甲方,也可以是用户) 需求分析,画出原型图(产品经理) 根据原型图输出 UI 界面及交互图(UI/UX设计师) 根据UI及交互效果画出页面, ...

  8. 基于.NetCore开发 StarBlog 番外篇 (2) 深入解析Markdig源码，优化ToC标题提取和文章目录树生成逻辑

    前言 虽然现在工作重心以AI为主了,不过相比起各种大模型的宏大叙事,我还是更喜欢自己构思功能.写代码,享受解决问题和发布上线的过程. 之前 StarBlog 系列更新的时候我也有提到,随着功能更新,会 ...

  9. UNIQUE VISION Programming Contest 2025 Spring (AtCoder Beginner Contest 398) (A~F) 补题+题解

    A - Doors in the Center 签到题,直接构造即可. 点击查看代码 #include<bits/stdc++.h> using namespace std; #defin ...

  10. 一文速通Python并行计算：03 Python多线程编程-多线程同步（上）—基于互斥锁、递归锁和信号量

    一文速通 Python 并行计算:03 Python 多线程编程-多线程同步(上)-基于互斥锁.递归锁和信号量 摘要: 在 Python 多线程编程中,线程同步是确保多个线程安全访问共享资源的关键技术 ...