指令基本概念

指令是带有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元素的属性

        👍赞 0
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...