Vue的基本指令用法

循环：v-for (any为任何标签)

<!--循环遍历,在遍历list的时候创建多个调用v-for的元素-->
<div id="box">
	<any v-for="item in list">{{item}} </any>
	<any v-for="(item,index) in list"> {{item}} </any>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			list:[
				{"name":"ys"},
				{"name":"lz"},
				{"name":"xs"},
			]
		}
	})
</script>

选择：v-if

<!--根据判断条件来决定是否将元素挂在到DOM元素中-->
<div id="box">
	<any v-if="表达式"></any>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		}
	})
</script>

展示：v-show

<!--根据执行结果的真假来决定是否将元素显示-->
<div id="box">
	<any v-show="表达式"></any>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		}
	})
</script>

v-if和v-show的区别为：v-if有更高的切换开销,而v-show有更高的初始渲染开销。
如果需要频繁的切换使用v-show，反之，运行条件很少改变时使用v-if
双向数据绑定：v-model (常用于表单)
用于v-model的修饰符：
(1)、.lazy 在默认情况下,v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy，从而转变为在change事件中同步.
(2)、.number 如果想自动将用户的输入值转为Number类型,可以使使用number修饰符,如果原值的转换结果为NaN,则返回原值
(3)、.trim 过滤用户输入的首尾空格

<!--将表单元素中的数据绑定到某个变量中，修改表单中的元素时，临时变量相应的改变-->
<div id="box">
	{{message}}
	<input type="text" v-model="message">
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		}
	})
</script>

单次绑定：v-once

<!--将数据渲染到页面上,并且只会渲染一次,当数据发生变化的时候,数据不会发生更新-->
<div id="box">
	{{message}}
	<p v-once>{{message}}</p>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		}
	})
</script>

事件绑定：v-on (可简写为@)

<!--给指定的标签绑定上名为eventName的事件,当事件被触发时，执行对应的处理函数-->
<!--所有的方法都需要放在methods内, methods与data,el属性一样,都是app实例的属性-->
<div id="box">
	{{message}}
	<any v-on:eventName="处理函数"> </any>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		},
		methods:{
			eventName(){
				console.log(1)
			}
		}
	})
</script>

属性绑定：v-bind (可简写为:)

<!--将表达式执行的结果的值绑定给相对应的属性-->
<!--在data内声明变量并赋值,之后将变量通过v-bind:绑定在对应的属性内-->
<div id="box">
	{{message}}
	<any v-bind:属性名称="表达式"></any>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		}
	})
</script>

文本绑定：v-text

<!--将变量名所对应的内容渲染到标签内,等同于{{变量名}}-->
<div id="box">
	{{message}}
	<any v-text=“变量名"></any>
	<any>{{message}}</any>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		}
	})
</script>

标签绑定：v-html

<!--将变量名所对应的内容渲染到标签内-->
<div id="box">
	{{message}}
	<any v-html=“变量名"></any>
</div>
<script>
	new Vue({
		el:"#box",
		data:{
			message:"hello vue"
		}
	})
</script>

v-text和v-html之间的区别：v-html中如果包含html标签内容，v-html会解析而v-text不会