Vuejs的其他指令

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(数据变就会导致视图变，反之亦可),数据的单向绑定{{}}(一般而言，数据变视图变，反之行不通)