vue - 03本文已参与「新人创作礼」活动，一起开启掘金创作之路。 1. 模板语法 1.1. Mustache语法 (

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. 模板语法

1.1. Mustache语法 (双大括号)

作用：将data中的文本数据，插入到HTML中，里面不仅能是data中的数据，还可以是一个表达式，并且都是响应式的，前面一节我们展示过

案例：

<div id="app">

	<div>{{message}}</div>
	
	<div>{{firstName + ' -'}} {{lastName}}</div>  <!-- 可以拼接	-->
	
	<div>{{num * 2}}</div>  <!-- 可以是一个表达式	-->

</div>

<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: "你好 Vue",
      firstName: "Jeremy",
      lastName: "th",
      num: 7
    }
  })

</script>

结果：
```
你好 Vue
Jeremy - th
14
```
如果我们不想页面中的数据跟随着改变，怎么办？Vue给我们提供了另一个指令 v-once。

1.2. v-once

作用：元素和组件只渲染一次，后面不会随着数据的改变而改变。这样也会优化更新性能。v-once 后面不需要跟任何表达式

案例：

<div id="app">

	<div v-once>{{message}}</div>

</div>

<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: "你猜我变不变！"
    }
  })
</script>

结果：可以看见使用了v-once 后页面元素没有发生改变。

1.3. v-text

作用：v-text作用和Mustache基本一样，区别于v-text是全部更新，而Mustache可以部分更新

案例：

<div id="app">

	<div> 你好 {{ message }}</div>
	<div v-text="message"> 你好 </div>

</div>

<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: "Vue"
    }
  })
</script>

结果：
```
你好 Vue
Vue
```
使用v-text后元素全部更新了，没有显示原有文本 “你好”，而Mustache 是在哪使用，就更新哪里。其实在项目中v-text用的也比较少，大部分都是使用Mustache 进行插值。

1.4. v-cloak

Mustache是比较灵活一点，但是使用Mustache 时会出现插值表达式闪烁的问题。在这里插入图片描述在我刷新页面时，可以看见页面出现了闪烁，我们可以用v-cloak来解决这个问题

作用：与css [v-cloak] { display: none }一起使用，隐藏未编译的 Mustache 标签直到实例准备完毕

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body>

<div id="app">

	<div v-cloak> 你好 {{ message }}</div>
	<div v-text="message"> 你好</div>

</div>

<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: "Vue"
    }
  })
</script>
</body>
</html>

结果：加上v-clock和 [v-cloak] { display: none } 可以看见再刷新页面时就不会在出现闪烁情况。

2. 条件渲染

2.1. v-show

作用：根据条件判断是否展示元素
案例：

2.2. v-if、v-else、v-else-if

作用：v-if/v-else/v-else-if 这三个指令主要用于根据条件展示对应的模板内容

v-show 和 v-if 区别？

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. 列表渲染

3.1. v-for

作用：v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
案例：

<ul id="example-1">
    <li v-for="item in items" :key="item.message"> 
        {{ item.message }} 
    </li> 
</ul>

var example1 = new Vue({ 
   el: '#example-1', 
   data: { 
       items: [
               { message: 'Foo' }, 
               { message: 'Bar' } 
              ] 
         }
  })

结果：