Vue-基本指令(v-once, v-pre, v-html, v-cloak, v-for, v-text)的使用

1.v-once:

　　某些状况下咱们不但愿界面的内容随意地跟随改变，这时咱们可使用v-once来达到此目的。

　　（1）该指令后面不须要跟任何的表达式；

　　（2）该指令表示元素和组件只渲染一次不会随着数据的改变而发生变化。

　　e.g.

　　

 

 　　打开浏览器的控制台，在控制台中输入：app.message = 'hahaha';

　　第一个发生变化，第二个无变化。

 

 

2.v-html:

　　在某些状况下咱们从服务器请求到的数据就是一个HTML代码，若是咱们直接使用{{}}来输出，会将HTML代码直接输出。可是咱们但愿的是按照HTML的格式进行解析，并将内容显示出来。

　　可使用v-html指令，该指令后面每每带上一个string类型，它会将string类型的HTML解析出来而且进行渲染。

　　e.g.

 

 结果：

 

3.v-text:

　　v-text的做用与Mustache（ {{}} ）比较相似，都是用于将数据显示在页面中，在一般状况下v-text接收一个string类型。可是若是同时存在v-text和Mustache，v-text的内容会覆盖Mustache的内容。

　　e.g.

 

 结果：

 

4.v-pre:

　　这个指令用于跳过这个元素和它子元素的编译过程，用于显示本来的Mustache语法。

　　e.g.

 

 第一个h2元素中的内容会被编译解析出来对应的内容，第二个h2元素会直接显示{{message}}。

结果：

 

 

5.v-cloak:

　　在某些状况下浏览器可能会直接显示出来未编译的Mustache标签，v-cloak可用于防闪烁。

　　e.g.

 

 因为延迟函数的存在，在一秒到达以前，vue实例还未初始化，所以此时网页上显示的是{{message}}，当到达一秒以后，{{mesage}}会立刻变成'你好啊'，此变化的瞬间产生了闪烁。

为防止闪烁，在变量未编译的时候，不予显示，而当编译好了以后，才显示出来。

 

在vue解析以前，div中有一个属性v-cloak，配合css的display可使元素不显示；

在vue解析以后，div没有一个属性v-cloak。

 

6.v-for:

　　遍历数组。

　　e.g.

 

 结果：