《vue2.0 框架学习》--模板语法和指令

最新推荐文章于 2025-06-23 14:08:14 发布

良言SE

最新推荐文章于 2025-06-23 14:08:14 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32265719/article/details/82795844

本文深入探讨Vue.js框架中关键的指令用法，包括v-cloak解决浏览器闪烁问题、v-if条件判断、v-show显示隐藏、v-model双向数据绑定等，通过实例演示如何使用这些指令来动态操作DOM，实现数据驱动的UI渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板语法

{{}}-插值

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

常用指令：

v-cloak - 解决浏览器闪烁

[v-cloak]{display:none}
v-html
v-text
v-model -双向数据绑定，用于表单
v-for -循环遍历数组/对象,用于列表
v-show - 显示
v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素
v-once -渲染一次

demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE day 01</title>
	<!-- D:\vue\LESSON\npm-vue\node_modules\vue\dist -->
	<script src="../node_modules/vue/dist/vue.js"></script>
	<style>
		[v-cloak]{
			display: none;
		}
	</style>

</head>
<body>

	<div id="app" v-cloak>
		<p v-show="flag">{{msg}}</p>

		<form action="#" v-if="seen">
			{{user.name}}<input type="text" name="username" v-model="user.value">{{user.value}}
		</form>
	</div>

	<script>
		window.onload = function(){
			let options ={
				el:'#app',
				data:{
					flag:false,
					seen:true,//是否可见--条件判断
					user:{
						value:'请输入用户名',
						name:"用户名:"
					},
					msg:'hello vue'
				},
				methods:{}
			};

			let vm = new Vue(options);

			vm.$data.seen = true;

			console.log(vm.$data.seen)




		}
	</script>
	
</body>
</html>

1.选项参数 options
           2. v-clock --主要解决vue框架引入出现差错的情况

           3. vue 模板语法 {{}} ：数据+模板 = 渲染 ui

           4. 表单的双向数据绑定模板 v-model

           5. 条件判断 v-if - 添加/移除dom节点

           6.显示隐藏 v-show - display:none

           7. vm 实例属性 vm.$data