1、v-once:
该指令后面不需要跟任何表达式(比如v-for后面是跟表达式的)
该指令表示元素的mustache变量和组件只会渲染一次,不会随数据的改变而改变
2、v-html:
某些情况下,我们从服务器请求到的数据含有HTML的标签
如果直接通过mustache语法{{}}输出,则数据会原样输出
如果使用该指令(该指令后跟string类型),则数据中的HTML标签会被解析
<div id="app">
<h1 v-once>{{message}}</h1>
<h1 v-html="message"></h1>
</div>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: "<a href='http://www.baidu.com'>百度一下</a>"
}
});
</script>
3、v-text:
v-text作用和mustache相似,都是将数据显示在界面中,但不如mustache好用
v-text通常情况下,接受一个string类型
4、v-pre:
该指令后面不需要跟任何表达式
v-pre跳过这个元素和它子元素的编译过程,元素的内容是什么显示什么,
5、v-cloak:
该指令后面不需要跟任何表达式
v-cloak指令很少用到,cloak中文意思为斗篷;
出现该指令的原因:只有当浏览器解析到mustache表达式对应的Vue时,其才会替换页面中元素的mustache内容。但如果解析到Vue时卡住,用户就会看到类似{{message}}的东西。为了不让用户看到该内容,出现该指令。
6、v-bind:
以上的5个指令主要作用是将值插入到我们模板的内容中
但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定(a的href,img的src)
很多时候,我们希望动态切换class,绑定class的两种方式:对象语法,数组语法
对象语法:v-bind:class="{类名1:boolean变量,类型2:boolean变量,...}"
另一种写法:
数组语法(少用)::class="[变量1,变量2,...]"
v-bind动态绑定样式:
对象语法::style="{样式名:样式值,样式名:样式值,...}"
[样式名可以是原样式名(如果存在连字符必须加引号),也可以是驼峰写法(不加引号);样式值可以是字符串(又引号),也可以是变量(无引号)]
数组语法(少用)::style="[变量1,变量2,...]"