Vue指令【v-once,v-text,v-html,v-if，v-show，v-on】

一，文本插值
1，{{参数}}，双大括号，这是最基本的文本插值的形式
2）v-once指令 表示只渲染一次，后续数据变化不再关心
3）v-text=“参数”指令 它可以用来替代{{参数}}这个双大括号，效果相当
4）v-html指令 解析HTML内容

注：双大括号和v-text会将值当成字符串处理，如果是HTML值，则会将<>转义为&It；&gt,如果需要解析HTML的内容，就需要使用v-html指令

二，指令
1，v-if指令 通过对数据的真假的判断，来添加或者移除某条数据。
eg：

		HTML 代码：	
					
						<p v-if="seen">你能看见我吗</p>
			JS代码			
							
							var vm=new Vue({
							el:"#app",
							data:{
							seen:true
							}
						})

为true显示这条数据，为false则隐藏这条数据

2，
Vue绑定类样式：v-bind指令绑定类属性有两种语法：对象语法和数组语法
1）对象语法

<div v-bind:class="{类样式名：绑定数据，...}"></div>

类样式名可以有多个，通过绑定数据为true或false来控制样式是否应用到元素中。
举例

eg：
//css代码
<style>
	#app{
		width:600px;margin:50px auto
	}
	#app .border{
		width:300px;
		height:300px;
		border:solid 2px yellow
	}
</style>

//html代码
<div id="app">
	<p><input type="checkbox" v-model="isBorder">边框</p>
	<div v-bind:class="{border:isBorder}"></div>
</div>

//JS代码
var vm=new Vue({
el;"#app",
data:{
	isBorder:true
}

})
这个效果就是当你勾选后，就代表True ，就会产生边框css的效果，不勾选，则是false，表框效果消失

2)，数组语法

绑定内联样式：
1）对象语法
V-bind:style 非常像css

<div v-bing:style="{样式属性：绑定数据}"/>或者<div v-bing:style="stypeObject"/>两种书写方式
	<script>
		var vm=new Vue({
		el;"#app",
		data:{
			styleObject:{
			样式属性：样式值，....//css那样的代码
			}
	})
	</script>	

2）数组语法

<div v-bind:style="[baseStyle,overridingStyles]"></div>

三，条件渲染指令
1，v-else指令
这个指令必须跟在v-if后面，否则它不能被识别。

2，v-show指令
V-show指令的元素始终会被渲染并保留在DOM中，而v-show指令只是简单的切换元素的CSS属性display
eg
夏天时间

	<div>
		<h3>今天上班打开时间：</h3>
		<div v-show="inTheSummer">
			<p>
				8:30～17:00
			</p>
		</div>
		<div v-show="!inTheSummer">
			<p>
				9:00～17:30
			</p>
		</div>
	</div>
<script>
		var vm=new Vue({
		el;"#app",
		data:{
			inTheSummer:true
			}
	})
	</script>	

效果：默认为冬天的上班打开时间，当勾选夏天打卡时间后，就会变成夏天的上班打卡时间

3,v-on指令
通过v-on指令可以绑定Vue实例选项参数methods中的方法作为事件的处理代码
V-on的缩写形式是@
语法：

<button v-on:click="事件处理办法">按钮</div>
缩写形式：
<button @:click="事件处理办法">按钮</div>

eg:

<p>
	<label for="txtNum1">数字1</label>
	<input type="number" v-model="num1" id="txtNum1">
</p>
<p>
	<label for="txtNum2">数字2</label>
	<input type="number" v-model="num2" id="txtNum1">
</p>
<p>
	<button @click="doAdd">加法</button>
</p>
<p>
	<label for="txtResult">结果是：</label>
	<input type="number" v-model="result" id="txtNum1">
</p>
<script>
		var vm=new Vue({
		el;"#app",
		data:{
			num1:0，
			num2:0,
			result:0
			},
		methods:{
				doAdd:function(e){
							this.result=parseInt(this.num1)+parseInt(this.mum2);
							console.log("加法："，e)
					}
			}	
	})
	</script>