vue.js入门学习之模板语法——插值，一起学习吧！

最新推荐文章于 2024-05-09 21:52:56 发布
最新推荐文章于 2024-05-09 21:52:56 发布
阅读量513 收藏
点赞数
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shmily_ox/article/details/104967915
版权
本文介绍了Vue.js的模板语法，特别是插值的使用。讲解了Mustache语法的文本插值，如何使用v-once指令以及v-html指令来插入HTML。同时，还讨论了在HTML特性上使用v-bind进行动态属性绑定。文章强调了动态渲染HTML的安全注意事项，并通过示例展示了颜色变化的效果。
摘要由CSDN通过智能技术生成

模板语法——插值

Vue.Js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所
有Vue.js的模板都是合法的HTML ,所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue 将模板编译成虚拟DOM渲染函数。结合响应系统，Vue 能够智能地计算出最
少需要重新這染多少组件，并把DOM操作次数减到最少。
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量，你也可以不用模板，直接写渲染(render)函
数,使用可选的JSX语法。

插值

1、文本

数据绑定最常见的形式就是使用“Mustache"语法(双大括号)的文本插值:

<span>Message: { msg }}</span>

Mustache标签将会被替代为对应数据对象上msg 属性的值。无论何时,绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src= "vue.js" type-"text/javascript" charset="utf-8"></script>
</head>
<body>
<div id=" app">
{
  {msg}}
</div>
<script type=" text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hq vue",
});
</script>
</body>
</html>

文本插值就完成啦！
在这里插入图片描述

通过使用v-once指令,你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

<span v-once>这个将不会改变: {
  { msg )}</span>

操作一下吧！

< !DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title><
最低0.47元/天 解锁文章
Shmily_ox
关注
vue.js入门教程之基础语法小结
12-28
前言 Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是Vue.js最简单的例子， 当 input 中的内容...vue.js的基础语法 插入文本 <span>Message: {{
JavaScript 字符串插值
allway2的博客
03-04 4716
当您需要添加 JavaScript 变量值和表达式来完成字符串时，您的第一个直觉可能是使用一元运算符连接字符串+，如下例所示： const name = "Nathan"; const age = 29; console.log("My name is " + name + " and I'm " + age + " years old."); // "My name is Nathan and I'm 29 years old." But JavaScript ES6 actually provid
插值语法和指令语法
xhnlbq的博客
01-20 361
插值语法和指令语法。
JSX基础语法（一）——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号
weixin_44867717的博客
12-29 1474
JSX基础语法——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号 JSX是什么 // What is this? This is JSX（js的语法扩展：在js中写HTML标签） let info = <div>Hello World!</div>; JSX元素中动态插入数据 let name = 'World' const
js 点击button切换颜色_Vue.js从零开始——入门（2）
weixin_39965102的博客
11-25 584
前一个章节做了简单的介绍、示例和安装方式的演示，接下来我们就可以来看看 Vue 的基础使用了，这里参考了官网介绍 — Vue.js，并且直接使用了官网的名词和解释，当然还有些自己的理解。1 模板语法Vue 的最基础实现就是模板语法，也就是使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的...
JavaScript中插值语法＜a href={`/blog/${userId}`}＞go to user page＜/a＞
最新发布
weixin_44929577的博客
05-09 742
插值语法${ }在JavaScript中通过模板字符串（Template Strings）实现。模板字符串的显著特点是使用反引号（`）而不是普通的引号，并且可以在字符串中嵌入表达式。
Vue.js学习笔记之常用模板语法详解
10-19
Vue.js是一种用于构建用户界面的...综上所述，Vue.js通过其简洁直观的模板语法，极大地简化了JavaScript Web应用的开发过程。掌握本文介绍的模板语法知识点，对于利用Vue.js构建响应式用户界面将会有极大的帮助。
JavaScript的MVVM库Vue.js入门学习笔记
11-26
-- 完整语法 --> <a></a> <!-- 缩写 --> <a></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled=...
JS-2
LLLLLLLLLLe的博客
10-26 401
DOM 标签 CSS 元素 JS 节点 DOM 其实他们都是同类 DOM 节点 // 文本节点 cnjncaknc // 元素节点 <p> ncjksancakj </p> 子节点：只算下面第一层的节点，如果第一层里面还包括了子节点的话，不往里面算 children 获取子节点（获取的节点只包括元素节点，不包括文本节点）。比childNodes好用 childNodes 获取子节点 （获取的节点包括 元素节点 和 文本节点 ） nodeTyp
vuejs之插值表达式
RyleeLouth的博客
10-26 7483
什么是插值表达式？ 插值表达式是Vuejs中实现数据渲染到页面的一种手段，可以直接让数据从模型到视图，不需要dom操作，在大括号里面给我们提供了js语境,可以执行简单的js代码 插值表达式就是{{ }}，如下操作，将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果， <body> <div> {{ title }} <...
IDE反距离加权插值算法JS实现
12-13
反距离加权算法js的实现，
mustache.js：使用JavaScript中的{{mustaches}}进行最小模板化
02-08
mustache.js-带有JavaScript的无逻辑{{mustache}}模板 有什么比没有逻辑更令人敬畏的逻辑呢？ 是JavaScript中的模板系统的零依赖实现。 是一种无逻辑的模板语法。 它可以用于HTML，配置文件，源代码-任何东西。 它通过使用散列或对象中提供的值在模板中扩展标签来工作。 我们称其为“无逻辑”，因为没有if语句，else子句或for循环。 相反，只有标签。 有些标签被替换为一个值，有些则被替换为空，而另一些则被替换为一系列值。 有关mustache模板语法的语言不可知的概述，请参见mustache(5)。 在哪里使用mustache.js？ 您可以在任何可以使用JavaScript的地方使用mustache.js呈现胡子模板。 这包括Web浏览器，服务器端环境（例如 ）和视图。 mustache.js随附对模块API，API（AMD）和。 除了
Hive装载数据
timicai的博客
09-26 893
Hive装载数据一、Load移动数据二、Insert表插入数据三、Hive数据插入文件四、Hive数据交换 一、Load移动数据 Load用于在Hive中移动数据 原始数据被移动到目标表/分区，不再存在于原始位置 local：指定文件位于本地文件系统 overwrite：表示覆盖现有数据 load data local inpath '/root/employee.txt' overwrite into table emp; //local表示文件位于本地，overwrite表示覆盖现有数据 load d
攻击html页面,v-html 的 XSS 攻击
weixin_36073959的博客
06-08 1297
在 Vue 中有 v-html 这个便利的指令，可以让我们直接输出 HTML，但它有个缺点。Vue 官网这样解释这个「指令」双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：Using mustaches: {{ rawHtml }}Using v-html directive: 输出代码：Using mustaches: This s...
前端基础-Vue.js模板语法(插值)
逍遥云恋
03-26 748
第 2 章 模板语法-插值 我们在前面的代码中，使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值； 这种使用 {{}} 获取值得方式，叫做 插值 或 插值表达式 ； 2.1 文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>Message: {{ msg }}</span> Musta...
Vue学习笔记02 模板语法
猫咪的个人博客
08-12 212
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 如果你熟悉虚拟 D...
jQuery ui中sortable draggable droppable的使用
前端队长Daotin
07-23 371
最近工作中用到了jQuery UI中排序和拖拽功能，花了大概一天的时间，搞清楚了大概的参数配置，以及遇到的一些问题，总结如下。 sortable 简单的配置如下： $('#subs-box').sortable({ axis: 'y', cursor: 'ns-resize', placeholder: "ui-state-highlight", // 排序过程中...
Vue.js的插值操作概述
qq_45026243的博客
10-09 460
插值 1、文本 ​ 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <div id="app1"> <span>Message: {{ msg }}</span><!-- 显示在页面上：Message：这是一个Vue程序 --> </div> <script type="text/javascript"> new Vue({ el:'#app1...
js插值计算_Pythonpykrige包克里金(Kriging)插值计算及可视化绘制
weixin_42367557的博客
12-24 3014
前面两篇推文我们分别介绍了使用Python和R进行IDW(反距离加权法) 插值的计算及结果的可视化过程，详细内容可见如下：Python - IDW插值计算及可视化绘制R-gstat-ggplot2 IDW计算及空间插值可视化绘制本期推文，我们将介绍如何使用Python进行克里金(Kriging)插值计算及插值结果的可视化绘制。主要涉及的知识点如下：克里金(Kriging)插值简介Pyth...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值