v-cloak指令:说白了就是让用户看不到渲染的过程(解决闪屏现象--先出现模板然后才渲染出来页面的过程),当然一般还是要配合css:display:none的才起作用,常放在根元素上
HTML部分
<!-- v-cloak -->
<div id="container" v-cloak>
<span :class="{fonColor:isTrue}">{{tasks}}</span>
<!-- v-once -->
<span v-once>{{tasks}}的感觉真好</span>
<button type="button" @click="changeCon">点我</button>
<!-- v-if v-else-if v-else -->
<button type="button" @click="chngeText">点我切换内容</button>
<h1>
<!-- template包裹多个元素 -->
<template v-if="inpType=='text'">
<label for="">文本</label>
<input type="text" name="" key = "text-inp">
</template>
<template v-else-if="inpType=='mail'">
<label for="">邮箱</label>
<input type="email" name="" key = "mail-inp">
</template>
</h1>
<h1 v-else-if="condit=='哈哈'">明天要{{tasks}}</h1>
<h1 v-else>周六要{{tasks}}</h1>
<!-- v-show -->
<h4 v-if = "inpType=='text'" v-show ="false">{{tasks}}</h4>
</div>
JS部分
var myApp = new Vue({
el:"#container",
data:{
Bclass:"fonColor",
isTrue:true,
tasks:"完成工作任务",
inpType:"text"
},
methods:{
changeCon:function(){
this.tasks="完不成工作任务"
},
chngeText:function(){
this.inpType = (this.inpType =="text"?"mail":"text")
}
}
})
v-once指令:没有值,有这个指令的DOM元素(或组件)及其子元素只渲染一次,数据变化也不重新渲染
v-if,v-else-if,v-else是条件指令,当指令中的表达式为真的时候,绑定该指令的元素(组件)才会被创建和显示,其中v-else-if必须紧跟v-if,v-else紧跟v-if或者v-else-if,当需要以此多个元素时可以用<template>将“多元素”包裹起来(自身不被渲染),
给元素(组件)添加key属性(属性值要独一无二),在渲染的时候就不会复用了;
v-show:只是看不到,DOM树结构中还存在,相当于给DOM添加了样式display:none,
v-if则是根本就没有了这个元素,当为真的时候才会重新创建并渲染该元素,相对而言v-if的渲染开销比较大,适用于条件不经常变的场景,而v-show适用于频繁切换条件(毕竟代价小)
v-text ,相当于{{}},只能是纯文本
v-html ,可以识别DOM标签,其他情况下和v-text一样的功能
v-pre,使用该指令的标签不会对模板进行编译,直接原样显示,例如:
<!-- v-once- -->
<h3 v-once>张三,{{greeting}} !!</h3>
<!-- 仅仅只渲染一次 -->
<h3 v-text = "greeting"></h3>
<!-- 只是纯文本,相当于{{greeting}} -->
<h3 v-html = "greeting"></h3>
<!-- 当greeting里面含有DOM标签的时候,会进行识别 -->
<h3 v-pre>{{greeting}}</h3>
<!-- 直接是{{greeting}},不会对其进行编译 -->
小知识
1.Vue中的模板,Vue.js使用基于html的模板语法,可以将DOM绑定到Vue的实例中的数据,模板就是{{}},通常用来进行数据绑定,显示到页面中。
2.数据的绑定方式:双向绑定和单向绑定,数据的双向绑定v-model(数据变就会导致视图变,反之亦可),数据的单向绑定{{}}(一般而言,数据变视图变,反之行不通)