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. 载誉而归！天翼云荣获第23届中国IT用户满意度大会多项殊荣

    10月25日,2024第23届中国IT用户满意度大会暨首届工业产品满意度交流会在北京举行.现场揭晓"2024中国IT用户满意度征集结果",天翼云凭借领先的产品技术.完善的客户服务以 ...

  2. Python实战：为Prometheus开发自定义Exporter

    Python实战:为Prometheus开发自定义Exporter 在当今的微服务架构和容器化部署环境中,监控系统的重要性不言而喻.Prometheus作为一款开源的系统监控和警报工具,以其强大的功能 ...

  3. Doris插入数据底层存储测试

    建表语句 CREATE TABLE IF NOT EXISTS base_site_test( site_id INT DEFAULT '10', city_code INT, user_name V ...

  4. FreeSql学习笔记——3.查询

    前言   FreeSql中查询的支持非常丰富,包括链式语法,多表查询,表达式函数:写法多种多样,可以使用简单的条件查询.sql查询.联表.子表等方式用于查询数据, 查询的格式也有很丰富,包括单条记录, ...

  5. NetCore.Encrypt —— 整合加密

    前言 最近呢又接触到加密了,回顾之前用到的加密经历,使用过DES.RSA.MD5.BASE64,前面也更新过两篇加密的文章,MD5加密和DES加密.之前的使用都是在.Net Framework平台,这 ...

  6. mysql 查看进程 删除单个、 多个进程语句

    查看所有的进程: show processlist 删除1个进程:  kill id 生成多个进程语句: select concat('KILL ',id,';') from information_ ...

  7. 如何用爱思助手给苹果iPhone手机免越狱修改虚拟定位教程

    使用爱思助手修改定位的方法: 1.在电脑上下载安装 爱思助手 客户端,并更新到最新版,用数据线将苹果移动设备连接到电脑. 2.连接成功后,依次打开爱思助手"工具箱 - 虚拟定位". ...

  8. FolderMove:盘符文件/软件迁移工具,快速给C盘瘦身

    前言 很多朋友安装软件的时候总会直接点击下一步,每次都把软件安装到了C盘.时间长了以后系统C盘就会爆满,只能重做系统处理,有了这个软件就可以随时把C盘文件转移到其他分区 介绍 这款是国外软件,界面介绍 ...

  9. 【MATLAB习题】双摇杆机构的运动学分析

    1.双摇杆机构概述 双摇杆机构的判别方法: 最长杆长度+最短杆长度 ≤ 其他两杆长度之和,连杆(机架的对杆)为最短杆时. 如果最长杆长度+最短杆长度 >其他两杆长度之和,此时不论以何杆为机架,均 ...

  10. 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误

    大家好,我是小康.今天我们来聊一个藏在C++标准库中的"定时炸弹",它看起来人畜无害,但却坑了无数C++程序员. 前言:当你以为自己用的是vector,结果却不是 嘿,各位码农兄弟 ...