指令基本概念
指令是带有v-前缀的特殊属性
vue.js指令的用途
在表达式的值改变时，将某些行为应用到DOM上
vue.js指令的书写规范
书写位置：任意的HTML元素的开始标签内
注意：一个开始标签内可写入多个指令，使用空格分隔
常见指令
1、v-show指令
作用：控制切换一个元素的显示和隐藏
语法：v-show=表达式
根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素，false表示隐藏该元素
实例：
<div id="box">
<div class="div1" v-show='true'></div>
<!-- v-show=表达式：true显示，false隐藏,默认false -->
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
}
})
</script>2、v-on指令
作用：为HTML元素绑定事件监听
语法：v-on：事件名称='函数名称()'
简写：@事件名称='函数名称()'
注意：函数定义在methods配置项中
实例：
<div id="box1">
<button v-on:click='fn()'>按钮1</button>
<button @click='fn()'>按钮2</button>
<!-- 方法定义： -->
<!-- 位置controller中的methods配置项里 -->
<!-- v-on用来绑定事件监听 -->
<!-- 语法：v-on：事件名称='fn()'
简写：@事件名称='fun()' -->
<div class="div2" v-show='bol'></div>
</div>
<script>
var vm=new Vue({
el:'#box1',
data:{
bol:false
},
methods:{
fn:function(){
console.log(1);
console.log(this.bol);
this.bol=!this.bol;
}
}
})
</script>3、v-model指令
作用：将用户的输入同步在视图上
语法：v-model=变量
注意：v-model指令必须绑定在表单元素上
实例：
<div id="box2">
<!-- v-model双向绑定
语法：v-model='变量'
注意：使用在表单元素上，最常用在type类型为文本上 -->
<h1>{{msg}}</h1>
<input type="text" v-model='msg' placeholder="请输入">
</div>
<script>
var vm=new Vue({
el:'#box2',
data:{
msg:'hello unjianwu'
}
})
</script>4、v-for指令
作用：遍历data中的数据，并在页面进行数据展示
语法：v-for='(item,index) in arr'
itme表示每次遍历得到的元素
index表示item的索引，可选参数
实例：
<div id="box3">
<!-- v-for类似于for循环
语法：v-for='item in arr'
item每次遍历后得到的元素
arr需要遍历的数组
v-for='(item index) in arr'
index下标
item和index名字是随便取的 val i
(参数1，参数2)
参数1：每次遍历后得到的元素（跟他叫什么名字没关系，只跟参数的顺序有关）
参数2：每个元素的下标（跟他叫什么名字没关系，只跟参数的顺序有关）
-->
<ul>
<!-- 有多少数据就渲染多少个 -->
<li v-for='item in arr'>{{item}}</li>
<li v-for='(item,index) in arr'>{{index+'.'}}{{item}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#box3',
data:{
arr:['睡觉','shopping','coding','LOL']
}
})
</script>5、v-bind指令
作用：绑定HTML元素的属性
语法：v-bind：属性名='表达式'
绑定一个属性：<img v-bind:src='myUrl'/>
绑定多个属性：<img v-bind='{src:myUrl,title:msg}'/>
实例：
<div id="box4">
<button class="red">按钮变色</button>
<button v-bind:class='{red:false}'>按钮变色</button>
<!-- v-bind属性绑定：
v-bind：class={类名：表达式} -->
<ul>
<li v-for='item in arr'>{{item}}</li>
<li v-for='(item,index) in arr' @click='fn1(index)' v-bind:class='{bj:item.bol}'>{{index+'.'}}{{item.des}}</li>
</ul>
<!-- 需求：点击列表，背景色变为红色 -->
</div>
<script>
var vm=new Vue({
el:'#box4',
data:{
arr:[
{des:'睡觉',bol:false},
{des:'打豆豆',bol:false},
{des:'吃饭',bol:false},
{des:'打死豆豆',bol:false}
]
},
methods:{
fn1:function(index){
// 通过i知道当前被点击的数据，把被点击的数据的bol值改成true，把其他未被选择的数据的bol改为false
//先都改成false，然后选中的改为true
for(var i=0;i<this.arr.length;i++){
this.arr[i].bol=false;
}
this.arr[index].bol=true;
}
}
})
</script>总结：
v-show：控制切换一个元素的显示和隐藏
v-on：为HTML元素绑定事件监听
v-model：将用户的输入同步到视图上
v-for：遍历data数据，并在页面进行数据展示
v-bind：绑定HTML元素的属性
Comments NOTHING