欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue学习笔记（二）

程序员文章站 2022-06-27 19:59:31
1 插值操作1.1 Mustache语法Mustache ：双大括号 {{}}Title

{{message}}

...

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 ：该指令后面不需要跟任何表达式。该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

Vue学习笔记（二）

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

Vue学习笔记（二）

Vue学习笔记（二）

Vue学习笔记（二）

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

Vue学习笔记（二）

Vue学习笔记（二）

Vue学习笔记（二）

④ v-pre

⑤ v-cloak

本文地址：https://blog.csdn.net/weixin_43574277/article/details/107339423

相关标签： 笔记

上一篇： 数据分析公司GrowingIO获2000万美元A轮融资

下一篇： 面向对象六大原则

推荐阅读