vue van-tag 对标签循环遍历_前端系列——插值的使用和Vue指令

1、插值

如果单单实例化好一个Vue对象，并且指定了el和data，页面中是不会有显示的。下面一个重要的问题就是如何将Vue实例对象代理的数据渲染到页面中的。此时，我们就需要使用插值语法，在Vue.js中，使用 {{ }} 来实现的，叫做mustache。

Mustache 标签将会被替代为对应数据对象上 message属性的值。无论何时，绑定的数据对象上 message属性发生了改变，插值处的内容都会更新。

注：{{}}双括号中的内容只要是js表达式都可以；

在{{}}中输出的变量，必须是在data中来定义好的。

2、Vue指令

指令(Directives)是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。说直白点：指令就是用来处理复杂一点的渲染。

在Vue中常见的指令有：数据绑定指令、 属性指令 、条件指令、循环指令

(1)数据绑定指令

v-text用于操作纯文本。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其进行html解析，但v-html会将其当html标签解析后输出。两者类比innerText和innerHTML。

v-model通常用于表单组件的双向数据绑定，例如input，select等。

双向数据绑定即如果视图变了，那么数据会跟着变，如果数据变了，视图也会跟着变。

数据------> 视图

视图------> 数据

v-text和v-html都是单向的，数据的变化----->视图的变化，v-model则可以实现双向的数据绑定。

v-model属性必须要结合表单元素来使用，只能放在表单控件元素里面才能起作用。

(2)属性指令

前面的v-text和v-html，v-model都是针对元素的内容而言的，元素不仅有内容，它还有属性。如果属性是动态获取的，就必须要通过属性指令来绑定。属性绑定是通过 v-bind来实现。

v-bind，有一个简写的方式，直接使用 :属性名 = 值 即可。

(3)条件指令

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

(4)循环指令

v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法。items 是源数据数组，并且 item 是数组元素迭代的别名。

这样会遍历books这个数组，有多少条数据就会生成多少个li。v-for指令本身写在哪个标签上就循环输出哪个标签要输出循环的内容，还需要结合{{}}语法来输出。

循环对象：