Vue学习笔记（二）

最新推荐文章于 2022-10-21 15:11:30 发布

吃不起饭的小陈

最新推荐文章于 2022-10-21 15:11:30 发布

阅读量87

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43574277/article/details/107339423

版权

笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1 插值操作

1.1 Mustache语法

Mustache ：双大括号 {{}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Title</title>
	</head>
	<body>
		<div id = "app">
			<h1>{{message}}</h1>
			<!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
			<h2>{{first + second}}</h2>
			<h2>{{first + ' ' + second}}</h2>
			<h2>{{first}} {{second}}</h2>
			<h2>{{counter * 2}}</h2>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好，大哥',
					first:'床前明月光',
					second:'疑是地上霜',
					counter:100
				}
			})
		</script>
	</body>
</html>

解析：mustache语法中，不仅可以直接写变量，还可以写简单的表达式。

1.2 其他指令

① v-once ：该指令后面不需要跟任何表达式。该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

② v-html ：该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染。

③ v-text：通常情况下，后面接一个string类型，不建议使用。

④ v-pre

⑤ v-cloak

吃不起饭的小陈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记（二）

1 插值操作1.1 Mustache语法Mustache ：双大括号 {{}}<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Title</title> </head> <body> <div id = "app"> <h1>{{message}}</h1>
复制链接

扫一扫