vue模板语法（指令）

最新推荐文章于 2024-04-13 11:53:15 发布

zhongyanS

最新推荐文章于 2024-04-13 11:53:15 发布

阅读量161

点赞数

本文链接：https://blog.csdn.net/zhongyanS/article/details/107192830

版权

差值表达式

指令

事件绑定

属性绑定

样式绑定

分支循环结构

指令：

自定义属性
格式：以v开始（比如：v-cloak）

v-cloak：

可以解决闪动问题

样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-cloak>
				{{msg}}
			</div>
		</div>
		<script src="vue.js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
			el:'#app',
			data:{
				msg:'hello world'
			}
			});
		</script>
	</body>
</html>

原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好后再显示最后的结果

数据绑定指令：

v-text 填充纯文本（更加简洁）

v-html 填充HTML片段（存在安全问题，第三方数据不可用）

v-pre 填充原始信息（跳过编译过程）

样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-cloak>
				{{msg}}
			</div>
			<div v-text='msg'>
				
			</div>
			<div v-html="msg1">
				
			</div>
			<div v-pre>
				{{msg}}
			</div>
		</div>
		<script src="vue.js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
			el:'#app',
			data:{
				msg:'hello world',
				msg1:'<h1>HTML</h1>'
			}
			});
		</script>
	</body>
</html>

数据响应式：

数据绑定：将数据填充到标签中

v-once：只编译一次

zhongyanS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue模板语法（指令）

差值表达式指令事件绑定属性绑定样式绑定分支循环结构指令：自定义属性格式：以v开始（比如：v-cloak）v-cloak：可以解决闪动问题样例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{..
复制链接

扫一扫