Vue之模板

最新推荐文章于 2024-08-20 11:53:53 发布

shelly小鱼呀

最新推荐文章于 2024-08-20 11:53:53 发布

阅读量143

点赞数

分类专栏： Vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/yuishelly/article/details/129146788

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

二、模板

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>