Vue学习笔记之Vue的模板字符串
0x00 模板字符串
传统的JavaScript语言,输出模板通常是这样的写的。

$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);

上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量

// 普通字符串
`In JavaScript '\n' is a line-feed.` // 多行字符串
`In JavaScript this is
not legal.` console.log(`string text line 1
string text line 2`); // 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
let greeting = `\`Yo\` World!`;
输入结果:`Yo` World!
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);

Vue学习笔记之Vue的模板字符串的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记:vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
- Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
随机推荐
- piblog 0.1
搭建开发环境首先,确认系统安装的Python版本是2.7.x. $ python --version Python 然后,安装开发Web App需要的第三方库:$ sudo pip install j ...
- 通过身份证分析出生年月日、性别、年龄的SQL语句
),) ) ),)<>'X' ) ) )<>'X' ),)),)),)) ),)),)),)) ) as int)) where [出生日期]<>'' #字符串格式 ...
- 关于string的length
在C++里面,std::string的length()返回的是字节数,与编码方式有关. int main() { std::string s = "我是中国人"; std::cou ...
- ubuntu16.04下安装opencv3的viz模块
OPENCV3.0默认是不安装VIZ模块的,那么如何安装呢? 如果已经安装了Opencv,现在要增加VIZ模块,应该再安装一次就可以吧,我没试过,我是卸载了原来的,重新安装的 简单来说,就是要多安装一 ...
- Rancher OS
Rancher OS 是生产规模中运行 Docker 最小,最简单的方式.RancherOS 的所有东西都作为 Docker 管理的容器.这些系统服务包括 udev 和 rsyslog.Rancher ...
- ELK服务基础
官方文档 什么是ELK? 通俗来讲,ELK是由Elasticsearch.Logstash.Kibana三个开源软件组成的一个组合体,这三个软件当中,每个软件用于完成不同的功能,ELK又称为ELK s ...
- Jamie's Contact Groups---hdu1669--poj2289(多重匹配+二分)
题目链接 题意:Jamie有很多联系人,但是很不方便管理,他想把这些联系人分成组,已知这些联系人可以被分到哪个组中去,而且要求每个组的联系人上限最小,即有一整数k,使每个组的联系人数都不大于k,问这个 ...
- 二.re库介绍
一.re库的主要功能函数 1.re.search()用法 2.re.match()的用法 >>> match=re.match(r'[1-9]\d{5}','BIT 100081') ...
- Day24-26 项目练习(图书商城)
图书商城 环境搭建 导入原型 用户模块 分类模块 图书模块 购物车模块 订单模块 2 功能分析 前台 用户模块: 注册 激活 登录 退出 分类模块: 查看所有分类 图书模块: 查询所有图书 按分类 ...
- 【云安全与同态加密_调研分析(8)】同态加密技术及其应用分析——By Me
◆同态加密技术(Homomorphic Encryption, HE)及其应用◆ ◆加密方案◆ ◆应用领域◆ ◆厂商◆ ◆同态加密现有产品形态和工程实现◆ ◆参考链接◆ ◆备注(其他参考信息)◆ 同态 ...