字符串模板、模板字符串、Vue中使用template等等。

最新推荐文章于 2024-04-28 11:51:43 发布
最新推荐文章于 2024-04-28 11:51:43 发布
阅读量8.7k 收藏 7
点赞数
分类专栏： Vue JavaScript JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WARGON/article/details/82865345
版权
JS 同时被 3 个专栏收录
33 篇文章 0 订阅
订阅专栏
JavaScript
22 篇文章 0 订阅
订阅专栏
Vue
15 篇文章 0 订阅
订阅专栏

1：模板字符串

传统的JS语言，输出模板是这样写的：

$('#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!
 `);

模板字符串是增强的字符串，使用反引号标识。可以当作普通字符串使用，也可以定义多行字符串，也可以嵌入变量。

// 普通字符串
`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}?

如果要在字符串中使用反引号的话， 需要转义。

如果用模板字符串表示多行字符串，所有的空格和缩进会保留在输出之中。

2：Vue的字符串模板

    指的是在Vue实例中的template属性所对应的字符串。如：

new Vue({
    el:'#replace',
    template:'<p>字符串模板</p>'
})

至于：template:"#xxx"这种引入外部模板的是不是字符串模板，暂时不清楚。

3：vue2.0模板的三种写法

    第一种：利用模板字符串。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
<script type="text/javascript">
var app=new
Vue({
el:"#app",
data:{
},
template:`
<h1 style="color:red">第一种写法</h1>
`
})
</script>
</html>

    第二种：是项目中最常见的写法,利用template标签来实现内容的填充,最终通过id或者其他的选择器挂载到template上面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
<template id="template">
<h1>我是模板的第二种写法</h1>
</template>
</body>
<script type="text/javascript">
var app=new
Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>

第三种：这种写法是改变了script中的type.变为type="x-template",并且给它id,最终挂载到template中就可以了,使用于内容比较多或有公共的模板,可以使用,引入就可以了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
<script type="x-template"
id="template">
<h2>我是模板的第三种写法</h2>
</script>
<script type="text/javascript">
var app=new
Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>

 

WARGON
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅谈ES6 模板字符串的具体使用方法
11-26
ES6 模板字符串是JavaScript语言的一个重要更新，它提供了一种更加方便和灵活的方式来创建和操作字符串。...在实际开发中，模板字符串已经成为JavaScript开发者的常用工具，尤其是在前端框架和库中，如React和Vue.js。
在Vuejs中使用带标记的模板字符串
08-12
- 我们同样可以在方法中使用模板字符串，然后在模板中通过`v-on`事件监听器调用这个方法。 - 示例： ```javascript methods: { generateContent() { return `${this.someText}</button>`; }, doSomething() ...
vue模板字符串标签动态参数_vue中template的三种写法
weixin_33450988的博客
02-22 2553
第一种(使用模板字符串)早期字符串拼接年代new Vue({el: "#app",template: ' {{message}} ',data: {message: '字符串拼接'}})第二种(使用script元素)HTML5标准之前的写法{{message}}new Vue({el: "#app"...
模板字符串（vue.js笔记）
dogeggcrazy的博客
11-26 3768
模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串功能)
vue 模板字符串
最新发布
szzlh123456789的博客
04-28 297
white-space: pre-wrap;
vue2.0——字符串模板绑定函数
HarryHY的博客
12-31 1226
页面常规绑定函数 <div class="digCommentReplyreplay" @click="showReplyinputfn(item.c_fid,item.id)"> </div> 字符串模板绑定函数 `<div class="digCommentReplyreplay" οnclick="showReplyinputfn(${datas[f].c_fid},${datas[f].id},2,${kk})"></div>` JS的函数
Vuejs中字符串判空处理--如何判断字符串是否为空或不为空
热门推荐
qq_44641527的博客
09-07 2万+
js的字符串判空问题
关于 template 标签 在 js vue 中的用法
sani_x的博客
05-18 1830
template 定义 内容模板 <template> 元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现。 将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。 说白了和input type=”hidden” 类似，一个储存字符状态，一个储存代码片段 js 中使用 IE完全不兼容，仅作为了解扩展！ <table id="producttable
在标签内的属性中使用模板字符串的解决方法
二三的博客
08-24 3788
1. 介绍 这是一个很容易被忽略的特性，这里主要介绍了在 vue组件的属性中如何使用模板字符串的用法。以uview组件库的 u-tag 为例。 2. 原有标签的写法 以 u-tag 为例： <u-tag text="我见青山多妩媚" type="success" /> 在这个标签中，标签内容是固定写死的，而在实际项目开发中，是需要根据后台返回来的值进行渲染。一般我们的第一想法就是使用 {{ }} 来进行渲染，但我试过，这样行不通，所以就需要用到模板字符串来进行渲染。 3. 使用模板字符串 &
Vue中的字符串模板的使用
12-09
非字符串模板：在单文件里用 <template></template> 指定的模板，换句话说，写在 html 中的就是非字符串模板。 字符串模板：在js字符串中定义的模板。 2、Props属性：HTML 特性是不区分大小写的。所以，当使用的不是...
vue如何截取字符串
10-17
在Vue中，我们可以使用计算属性（computed properties）来对数据进行处理，比如分割、替换或截取字符串。 ```javascript export default { data() { return { ipaddr: "192.168.100.110", }; }, computed: { ...
Vue实例的属性及模板渲染
橘猫吃不胖的博客
03-19 2984
Vue实例的属性及模板渲染 1 概述 2 el：与DOM元素绑定 3 data：定义双向绑定的数据 4 computed：计算属性 5 methods：定义Vue实例的方法 6 Vue中的三种模板 6.1 html模板 6.2 字符串模板 6.3 render函数模板 7 watch属性 8 模板渲染 8.1 条件渲染 8.2 列表渲染
vue Template模板中针对属性如何写空白字符串占位符?（\u00a0）会是一个好的空格占位解决方案
韩旭的博客
09-05 2339
解决空白占位符的几种方案
面试失败贴之《如何动手创建一个简单的MVVM框架》
weixin_33853827的博客
03-10 123
第一次在掘金写文章，难免有点小坎坷，各位看官请轻拍。 最近有刷面试题，在刷的过程中，发现如果把下面题目考察的原理结合起来即可实现一个简单的 MVVM 框架。 注: 下面不会给出直接答案，只是我的一些历程。 面试题 Vue 中是如何解析 template 字符串为 VNode 的? 在接触 React 时候，我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.c...
vue：基础：原理知识点
1363648943的专栏
09-05 1937
vue双向绑定原理、nextTick 原理、set 原理、响应式原理
vue3学习二：模板字符串
anxiaoxiao61的博客
01-27 6200
模板字符串
Vue的组件之template标签
a20001999的博客
03-11 724
这个标签里的所有内容必须在同一个div里，要不然会报错，疑惑了好久，我还以为是props的问题…没想到，希望能帮到碰到问题的同学
Vue组件学习
weixin_44482359的博客
07-31 662
通过对于Vue的不断深入的学习，其实我感觉很多东西都是与后端通用，或者说大同小异的，就拿组件来说我的感觉就和java中的静态方法很类似，一处声明，处处引用，通过传递参数来实现效果。
Vue组件的三大部分－template、script、style
了解➔熟悉➔掌握➔精通
01-08 1万+
分享一个大牛的人工智能教程。零基础！通俗易懂！风趣幽默！希望你也加入到人工智能的队伍中来！请轻击http://www.captainbed.net vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的 JavaScript 行为 style -> 组件的样式 其中，每个组件中
vue使用es6模板字符串渲染v-if
06-02
在 Vue 中使用 ES6 模板字符串渲染 v-if 与使用 Vue 的模板字符串渲染 v-if 是类似的。 示例代码如下： ```javascript <template> <div> ${show ? `<p>${message}</p>` : ''} </div> </template> <script> export default { data() { return { message: 'Hello World', show: true } } } </script> ``` 在上述示例中，我们使用了 `${}` 语法来插入表达式和变量。在这个例子中，我们在模板字符串中使用了一个三元表达式来控制 `<p>` 元素的显示和隐藏。 当 `show` 的值为 `true` 时，模板字符串将会渲染为 `<p>Hello World</p>`；当 `show` 的值为 `false` 时，模板字符串将会渲染为空字符串。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值