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 P2540 NOIP2015提高组 斗地主 加强版 题解 [ 紫 ] [ 深搜 ] [ 剪枝 ]

    斗地主:一步一步推性质就能做出来的剪枝题. 这题思路和小木棒的剪枝思路极其相似,剪枝的角度都差不多. 其实大部分搜索剪枝题都是先观察性质,列出性质后选择几个比较关键且代码好写的性质进行剪枝,特别要注意 ...

  2. DeepSeek普照的阳光下，继续RAG还是Distillation？

    什么是RAG RAG概述 RAG,全称为Retrieval-Augmented Generation(检索增强生成),是一种结合了信息检索和文本生成的人工智能技术.简单来说,RAG通过从大量文档或数据 ...

  3. SAM 学习笔记

    发现自己根本没有 SAM 基础,所以想补一篇学习笔记. SAM SAM 是一个可以接受字符串 \(s\) 的所有后缀的最小 \(DFA\)(确定性有限状态自动机).不过他最大的用处和后缀数组一样,都是 ...

  4. [BZOJ3786] 星系探索 题解

    题目链接:\(BZOJ\) 本题通过 \(dyf\_DYF\) 的题解理解 \(ETT\),代码则借鉴 \(lcyfrog\) 的题解,图片则使用了何太狼的题解.在此笔者感谢这三位神犇. 声明变量: ...

  5. 特征转换之python代码

    一.连续型变量1.1 连续变量无量纲化(1)无量纲化: 使不同规格尺度的数据转化统一规格尺度(将数据单位统一)(2)无量纲化方法:标准化, 区间所方法 标准化: 将连续性变量转变为 均值0 标准差1 ...

  6. 如何在 CentOS 7 linux上安装和使用 FFmpeg

    SSH首选FinalShell 1.下载解压 wget http://www.ffmpeg.org/releases/ffmpeg-5.1.tar.gz tar -zxvf ffmpeg-5.1.ta ...

  7. Hive - [02] 安装部署

    一.相关链接地址 Hive官网:https://hive.apache.org/ Hive下载页面:https://downloads.apache.org/hive/ 中科大镜像地址:http:// ...

  8. Elasticsearch搜索引擎学习笔记（二）

    可视化插件 GitHub搜索elasticsearch-head并下载,如果网络不好可以在gitee上搜索. 这是一个前端项目,需要安装nodejs. 在项目根目录执行 npm install npm ...

  9. [第二章]ABAQUS CM插件中文手册

    ABAQUS Composite Modeler User Manual(zh-CN) Dassault Systèmes, 2018 注: 源文档的交叉引用链接,本文无效 有些语句英文表达更易理解, ...

  10. Windows编程----结束进程

    进程有启动就有终止,通过CreateProcess函数可以启动一个新的子进程,但是如何终结子进程呢?主要有四种方法: 通过主线程的入口函数(main函数.WinMain函数)的return关键字终止进 ...