vue基本指令 (v-text,v-html,v-if/v-else-if/v-else,v-show,v-for,v-on,v-bind,v-model)

v-text

.....
// v-text 会替换默认值(原有内容) 
<p><span v-text="divValue">默认值</span></p>
<br>
<p v-text="divValue"><span>默认值</span></p>
.....
{
	let vm = new Vue({
		el:"#area",
		data:{
			divValue:"hello world"
		}	
	})
}

v-html

//v-html 会替换默认值(原有内容),但是会支持HTML标签的解释
<h1 v-html="divValue"><span>默认值</span></h1>
.....

v-if / v-else-if / v-else-if

.....
<div id="area1">
	{{divValue}}
	<br>
	//类似if elseif else的使用
	<p v-if="show == 0">第一</p>
	<p v-else-if="show == 1">第二</p>
	<p v-else>第三</p>
</div>
.....
let vm1 = new Vue({
	el:"#area1", //用来选择作用域
	data:{
		divValue:"hello world",
		show : 1   //判断决定显示第几次
	}

v-show

.....
<div id="area2">
	{{divValue}}
	<br>
	<p v-show= "state == 1">第一</p> //使用类似于v-if但是操控doms树方式不一样
	<p v-show= "state == 2">第二</p>
	<p v-show= "state == 3">第三</p>
</div>
.....
let vm2 = new Vue({
	el:"#area2", //用来选择作用域
	data:{
		divValue:"hello world",
		state:"2"
	}	
})

v-if 和 v-show 的区别：v-if 的显示隐藏是将DOM元素整个添加或删除，v-show 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

v-for

.....
//:key可以将循环遍历和遍历的内容绑定，但是循环要相互隔开
	<div id="area1">
		<div>
			//for循环遍历 数组 itme(元素),index(下标索引)
			<p v-for="(itme,index) in clsaaes" :key="index">{{itme}}{{index}}</p>
		</div>
		
		<div>
			//for循环遍历 字符串 itme(字符),index(字符串索引)
			<p v-for="(itme,index) in 'helloworld'" :key="index">{{itme}}{{index}}</p>
		</div>
		
		<div>
			//for循环遍历 整数 itme(从1开始到最大值的整数),index(数字的索引)
			<p v-for="(itme,index) in 3" :key="index">{{itme}}{{index}}</p>
		</div>
		
		<div>
			//for循环遍历 对象 value(内容),key(属性),index(索引)
			<p v-for="(value,key,index) in array" :key="index">{{value}}{{key}}{{index}}</p>
		</div>
	</div>
.....
{
	let vm = new Vue({
		el:"#area1",
		data:{
			clsaaes:[
				"html","css",'js'
			],
			
			array:{
				name:'张三',
				age:18						
			}
		}
	})
}

v-on

.....
<div id="area">
	<div v-show="sta">出现</div>
	//下方简写<button type="button" v-on:click="chec()">点击</button>
	<button type="button" @click="chec()">点击</button>
	<button type="button" @click.once="chec()">点击只执行一次</button>
	//@click.prevent 可以阻止默认事件执行
	//@click.stop 可以阻止事件冒泡
	//@click.self 可以阻止自身冒泡
</div>
.....
{					
	let vm = new Vue({
		el:"#area",
		data:{
			sta:true
		},
		//methods用来往vue实例中传递方法
		methods:{
			chec(){
				this.sta =! this.sta;
			}
		}
	})
}

v-bind
可以将data中变量与属性进行绑定
v-bind:属性名=“”
v-bind可以省略直接使用 :属性名

.....
<div id="area">
	<p>链接{{src}}</p>
	<p><a :href="src">百度</a></p>
	
	//:class
	<h3 class = 'a1' :class="[{a2:false,a3:true}]">hello world</h3>
	//数组中写入对象,键名就是类名(true和false)决定类是否出现
	// <h3 class = 'a1' :class="{a2:false,a3:true}">hello world</h3> 同上			
	
	//:style
	<h3 :style="[{color:'pink'},{fontSize:'30px'}]">hello world</h3>
	//绑定样式-添加颜色字体大小
	// <h3 :style="{color:'pink',fontSize:'30px'}">hello world</h3> 同上
	
	//绑定颜色使用vue键值
	<h3 :style="[{color:c_p},{fontSize:'30px'}]">hello world</h3>
</div>
.....
{							
	let vm = new Vue({
		el:"#area",
		data:{
			src:'https://www.baidu.com/',
			sta:true,
			c_p:'red'
		}				
	})
}

v-model
在表单控件或者组件上创建双向数据绑定

.....
<div id="area">
	<input type="text"  value="" v-model="sta"/>  //文本框
	<p>{{sta}}</p>
	<br>
	
	<input type="checkbox"  value="点击显示1" v-model="sta2"/>  //复选框
	<input type="checkbox"  value="点击显示2" v-model="sta2"/>
	<p>{{sta2}}</p>
	<br>
	
	<input type="radio"  value="唯一1" v-model="sta3"/>  //单选框
	<input type="radio"  value="唯一2" v-model="sta3"/>
	<p>{{sta3}}</p>
	<br>
	
	<select name="" v-model="sta4">      //下拉选择框
		<option value="太阳">太阳</option>
		<option value="月亮">月亮</option>
		<option value="星星">星星</option>
	</select>
	<p>{{sta4}}</p>
	<br>
	
	<select name="" v-model="sta5" multiple>  //多选下拉框
		<option value="太阳">太阳</option>
		<option value="月亮">月亮</option>
		<option value="星星">星星</option>
	</select>
	<p>{{sta5}}</p>
	<br>
</div>
.....
{							
	let vm = new Vue({
		el:"#area",
		data:{
			sta:'',
			sta2:[],
			sta3:"",
			sta4:'太阳',
			sta5:['']
		},				
	})
}