Vue.js教程：模板篇（二）

发表时间: 2019-10-11 11:36

1.简介

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据模板就是{{}}，用来进行数据绑定，显示在页面中也称为Mustache语法(双大括号)。

2. 数据绑定的方式

a.双向绑定

v-model

b.单向绑定

方式1：使用双大括号，可能会出现闪烁的问题，可以使用v-cloak来解决

用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：

<!doctype html><html>	<head>		<meta charset="utf-8">		<title></title>		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />		<link href="../css/mui.min.css" rel="stylesheet" />		<style>			/* 必须配置css样式，否则不生效 */			[v-cloak]{				display: none;			}		</style>	</head>	<body>		<div class="mui-content" id="content">			<h3>解决双大括号闪烁的问题:			<span v-cloak>{{msg}}</span>			</h3>		</div>		<script src="../js/vue.js"></script>		<script src="../js/mui.min.js"></script>		<script type="text/javascript">			mui.init();			var vm=new Vue({				el:"#content",				data:{					msg:"利用v-cloak指令，需配置css样式"				},				created:function(){					//这个是vue生命周期里开始创建的方法					alert("延时一下，看闪烁效果");				}			})		</script>	</body></html>

方式2：使用v-text,v-html

3. 其他指令

v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 --><span v-once>This will never change: {{msg}}</span><!-- 有子元素 --><div v-once> <h1>comment</h1> <p>{{msg}}</p></div><!-- 组件 --><my-component v-once :comment="msg"></my-component><!-- `v-for` 指令--><ul> <li v-for="i in list" v-once>{{i}}</li></ul>

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

Vue.js教程：模板篇（二）

热门阅读

推荐阅读