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.
结果:
来源: http://www.bubuko.com/infodetail-3353633.html