002_Vue指令

最新推荐文章于 2024-06-15 14:41:39 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量75

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/aihiao/article/details/122858456

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1. Vue指令

1.1. Vue指令时间就是一些自定义属性。

1.2. Vue指令的格式: 以v-开始(比如: v-cloak)。

2. v-cloak指令

2.1. 插值表达式存在"闪动"问题。

2.2. 使用v-cloak指令, 可以解决"闪动"问题。解决问题的原理: 先通过样式隐藏内容, 然后进行值的替换, 替换好之后再显示出来。

2.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-cloak指令</title>

		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-cloak>v-cloak指令解决闪动问题: {{msg}}</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			/**
			 * v-cloak指令用法:
			 * 1. 提供样式
			 * [v-cloak] {
			 * 	display: none;
			 * }
			 * 2. 在插值所在的标签, 添加v-cloak指令。解决问题的原理: 先通过样式隐藏内容, 然后进行值的替换, 替换好之后再显示出来。
			 */
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "Hello World"
				}
			});
		</script>
	</body>
</html>

2.4. 效果图

3. 数据绑定指令

3.1. v-text填充纯文本, 相比插值表达式更加简洁。

3.2. v-html填充html片段, 存在安全问题, 容易导致XSS攻击(跨站脚本攻击)。

3.3. v-pre填充原始信息, 跳过编译过程。

3.4. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text v-html和v-pre指令</title>
	</head>
	<body>
		<div id="app">
			<div v-text="msg"></div>
			<div v-html="htmlMsg"></div>
			<div v-pre>{{msg}}</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "Hello World",
					htmlMsg: "<b>Hello World</b>"
				}
			});
		</script>
	</body>
</html>

3.5. 效果图

4. 数据的响应式

4.1. 如何理解响应式

4.1.1. html5中的响应式(屏幕尺寸的变化导致样式的变化)。

4.1.2. 数据的响应式(数据的变化导致页面内容的变化)。

4.2. 什么是数据绑定?

4.2.1. 数据绑定: 将数据填充到标签中。

4.3. v-once只编译一次

4.3.1. 显示内容之后不再具有响应式功能。

4.4. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-once指令</title>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div v-once>{{info}}</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "Hello World",
					info: "v-once指令, 只编译一次, 数据不再具有响应式。"
				}
			});
		</script>
	</body>
</html>

4.5. 效果图

5.5. 修改数据, 查看页面数据变化

5.6. v-once的应用场景: 如果显示的信息后续不需要再修改, 你们可以使用v-once, 这样可以提高性能。

6. 双向数据绑定

6.1. 什么是双向数据绑定?

6.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-model指令</title>
	</head>
	<body>
		<div id="app">
			<div><span>您输入的用户名是: </span>{{uname}}</div>
			<div><span>用户名: </span><input type="text" v-model="uname" /></div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					uname: "zhang san"
				}
			});
		</script>
	</body>
</html>

6.3. 效果图

6.4. 修改输入框用户名为"li si"

6.5. MVVM设计思想: M(model)、V(view)和VM(View-Model)。

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
002_Vue指令

1. Vue指令1.1. Vue指令时间就是一些自定义属性。1.2. Vue指令的格式: 以v-开始(比如: v-cloak)。2. v-cloak指令2.1. 插值表达式存在"闪动"问题。2.2. 使用v-cloak指令, 可以解决"闪动"问题。解决问题的原理: 先通过样式隐藏内容, 然后进行值的替换, 替换好之后再显示出来。2.3. 代码<!DOCTYPE html><html> <head> <meta charset="
复制链接

扫一扫