Vue的mustache语法简介与举例

最新推荐文章于 2024-05-12 18:50:01 发布
最新推荐文章于 2024-05-12 18:50:01 发布
阅读量473 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38084879/article/details/117230898
版权

Vue.js Mustache语法 数据绑定 字符串拼接 数值运算
关键词由CSDN通过智能技术生成

mustache语法实际上就是我们说的双大括号。

mustache英文含义是 胡子/胡须，所以你不觉得双大括号有点像胡须吗？

准备

直接上代码，里面有注释，自己看，哈哈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{message}}</div><!--直接取值-->
			<div>{{message}},我爱你</div><!--取值加上固定的一些值-->
			<div>{{province}}{{city}}</div><!--简单字符串拼接-->
			<div>{{province}} {{city}}</div><!--字符串拼接中间加空格 方式1-->
			<div>{{province+' '+city}}</div><!--字符串拼接中间加空格 方式2-->
			<div>{{personNum*2}}</div><!--数量运算*2-->
			<div>{{personNum++}}</div><!--数量运算 自增-->
		</div>
	</body>
</html>
<script>
	const app = new Vue({
	//	el:document.querySelector('#app'),//传入的Element，和直接传入#app是一样的
		el:"#app",
		data:{
			"message":"娃儿瑞",
			"province":"湖南省",
			"city":"长沙市",
			"personNum":250000
		},
		methods:{
			
		},
		beforeCreate:function(){
			console.log("我是创建前执行的");
		},
		created:function(){
			console.log("我是创建后执行的");
		}
	});
</script>

运行结果：

Love_云宝儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
Vue学习第一天总结（Mustache语法，Vue基本指令，动态绑定）
m0_46371029的博客
04-13 753
1.Mustache语法（插值操作） 用于在页面中插入数据{{ 这里放要插入的数据 }} 2.Vue指令 2.1 v-once(表示元素和组件只渲染一次，不随数据（或界面数据）改变而改变) 2.2 v-html(当从服务器请求的数据是一串Html代码，这时会将它String类型的html指令渲染出来) 2.3 v-text(和Mustache比较相似都是将数据显示在页面中，以文本形...
学习Vue的mustache语法-mustache模板引擎
ranshuang1的博客
12-22 462
学习mustache的总结
2024年前端最全Vue源码：mustache模板引擎学习，2024年最新关于web前端开发的面试经验总结怎么写
最新发布
2401_84619145的博客
05-12 1022
tokens是将字符串转换成了JS的嵌套数组，如果是纯文本（包括HTML标签），会被标识为text。字符串的replace方法，可以第一个参数接收一个正则，第二个参数接收一个函数，有四个参数。hdDiv.innerText = arr[i].name + ‘的基本信息’;mvvm和mvc区别？mustache是"胡子"的意思，因为它的嵌入标记**{{}}**非常像胡子。，这是因为webpack（webpack-dev-server）能更方便的。将独立的功能拆分为独立的js文件中完成，通常是一个独立的类，
02_Vue3基础语法(一)之Mustache语法及v-bind的使用
m0_54861649的博客
03-03 621
Vue3基础语法(一) Mustache双大括号语法 如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。 并且我们前面提到过，data返回的对象是有添加到Vue的响应式系统中； 当data中的数据发生改变时，对应的内容也会发生更新。 当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。 另外这种用法是错误的： v-once指令 v-once用于指定元素或者组件只渲染一次： 当数据发生
Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)
落日的博客
08-07 1万+
一、map方法 （返回一个新的数组 新数组中的元素是经过map函数内部代码块处理过的数据） 代码示例： testMap() { let array = [1, 2, 3, 4]; let newArray = array.map(item=>{ return item += 1; }); console.log(newArray); } 结果： 注意点：map函数内部必须要有return 将数据返回 否则默认返回 undefined 如果不加 return 如下：
Vue中构造数组数据-map和forEach方法梳理
不想起床
01-27 3287
数组操作是前端最重要的数据操作，构造数组数据，又是数组操作中很常见的。本文将梳理下map和forEach方法在Vue项目中的使用。 想要深入理解这两个方法，一定要手写几次简易的实现，理解其中的要义。这里只考虑核心部分，一些边界问题就忽略了。 一、手写实现 简易map方法： Array.prototype.myMap = function(callback) { const res = []; for (let i = 0; i < this.length; i++) { // 这里将回调函数的执行结果
vue基础语法练习源码
12-09
在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html <script src="https://cdn.jsdelivr.net/npm/vue@2"> new Vue({ el: '#app', data: { message: '...
webstorm中vue语法的支持详解
08-27
WebStorm 中 Vue 语法的支持详解 WebStorm 作为一款功能强大的集成开发环境（IDE），对 Vue 语法的支持是非常重要的。本文将详细介绍 WebStorm 中 Vue 语法的支持详解，包括文件类型的配置、语法高亮、代码检测等...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue模板语法-插值详解
08-31
在 Vue 模板语法中，文本插值是使用 Mustache 语法（双打括号）来实现的。例如：<span>message:{{msg}}。在上面的例子中，msg 是一个数据绑定的变量，当 msg 变化时，模板中的文本也会相应地变化。 v-once 指令 v-...
探究Vue源码:mustache模板引擎(2) mustache使用方法
weixin_45966674的博客
06-06 589
mustache是最早的模板引擎 比vue的诞生还要早很多 而他的语法 就是基于 {{ }} 这样的双花括号。我们可以看到 我们直接通过 {{ 属性名 }} 就可以像vue的写法一样 去那响应式数据了。然后循环遍历他 里面写的 {{ name }} 就是取循环出来的每个下标的name值。我们就用刚刚改变script的type的方法将页面模板放进去了 然后 定义了一个id。简单说 就是 {{ #需要循环的字段 }} 内容 {{ /需要循环的字段 }}
数组遍历map方法的简单使用
Be_A_Master
07-28 359
接收两个参数，一个是回调函数，一个是回调函数的this指向； // 普通数组 用例一 ---------------------------------------------------------------------- const array = [1, 2, 3, 4] const obj = { name: 'tom' } const temp = array.map(function(el, index, arr){ // 当前对象， 索引， 总数组对象 console.log(t
vue的Mustache语法、常用指令
ZhangYu_010228的博客
03-21 212
🧑‍💻座右铭：道阻且长，行则将至💗。
vue遍历Map，Map在vue中的使用方法
热门推荐
weixin_38897313的博客
11-27 6万+
Map在vue中的使用方法： html：遍历的时候要遍历两遍 <template> <div class="course"> <div class=""> <div class="pt0 ctRow"> <ul class="ctNavbar"> ...
Vue源码—Mustache语法的基本实现
codfishXY的博客
07-13 213
Mustache模版语法的实现 mustache.js源码解析 <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js"></script> 给定模版字符串和要插入的数据 const templateString = ` <div> <ol> {{#students}} <li&
前端随心记---------函数
09-24 457
some（） some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素： 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 注意：some() 不会对空数组进行检测。 注意：some() 不会改变原始数组。 every（） ever...
vue mustache
09-10
因此，Vue和Mustache是两个不同的概念，Vue是一个JavaScript框架，而Mustache是一种模板语法和一个模板引擎库。Vue可以使用Mustache语法来实现数据的动态绑定和渲染。<span class="em">1</span><span class="em">2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值