第2章-Vue.js指令

一、学习目标

  • 了解 什么 是 Vue.js 指令
  • 理解 Vue.js 指令的 用途
  • 掌握 Vue.js 指令的书写规范
  • 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点)

二、指令的基本概念

2.1、什么是Vue.js指令

指令是带有v-前缀的特殊属性:v-bind、v-bind:is、v-bind:key、v-cloak、v-else、v-else-if、v-for、v-html、v-if、v-model

2.2、Vue.js指令的用途

在表达式的值改变时,将某些行为应用到DOM上。

2.3、Vue.js指令的书写规范

书写位置: 任意HTML元素的开始标签内。

注意:一个开始标签内可写入多个指令,多个指令间使用空格分隔。

三、指令

3.1、v-show指令

作用:控制切换一个元素的显示,和隐藏。本质就是设置 display属性。

语法:v-show = 表达式

  • 根据表达式的结果的真假,确定是否显示当前元素。
  • true表示显示该元素;false 表示隐藏该元素
  • 默认情况下,如果 v-show=' ',那么为false
    v-show指令

3.2、v-on指令

作用:为HTML元素绑定事件监听

语法:v-on:事件名称='函数名称(参数)',这边注意了,如果不需要传入参数,只需写成:v-on:事件名称='函数名称',如:v-on:click='fn'

简写语法:@事件名称='函数名称',如:@click='函数名称'

注意:函数的定义在methods配置项中

<div id="box">
    
    
    <button @click='fn'>显示button>
    
    <div class="div1" v-show='bol'>div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            bol: true
        },
        methods: {
            fn: function(){
                //console.log(index);
                this.bol = !this.bol;
            }
        }
    })
script>
v-on指令

3.3、v-model指令

作用:将用户的输入同步到视图上

语法: v-model = '变量'

注:v-model 指令必须绑定在表单元素上

<div id="box">
    
    <h1 v-on:click="fn">{{ msg }}h1>
    
    <input type="text" v-model="msg" v-show="bol"/>
div>
<script src="js/vue.js">script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            msg: "Edit",
            bol: true
        },
        methods: {
            fn:function(){
                //body....
                this.bol = !this.bol;
                this.msg = "Edit";
            }
        }
    });
script>
v-model指令

3.4、v-for指令

作用:遍历data 中的数据,并在页面进行数据展示。

语法:遍历 元素和索引的:v-for='(item,index) in arr' ;遍历元素:v-for='item in arr'

说明:item:表示每次遍历得到的元素,index:表示item的索引,可选参数。

<div id="box">
    
    <ul>
        
        <li v-for="item in arr">{{ item }}li>
        <li v-for="(item,index) in arr">{{ index + '、' }}{{ item }}li>
    ul>
div>
<script src="js/vue.js">script>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            arr: ['吃饭','睡觉','LOL','打豆豆']
        }
    });
script>
v-for指令

3.5、v-bind指令

作用:绑定 HTML元素的属性

语法:v-bind:属性名='表达式';简写语法::属性名='表达式',如::class="{red,false}"

绑定一个属性:

绑定多个属性:

绑定class属性:,这个red表示某个样式,bol值是true或者false,如果是true的话则显示此样式,false则不显示样式。

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .red {background: red;}
        .en {height: 100px; width: 200px;}
    style>
head>
<body>
    <div id="box">
        <button v-bind:class="{red: bol,en: bol}">按钮button>
        
    div>
    <script src="js/vue.js">script>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                bol: true
            }
        })
    script>
body>
v-bind指令

四、指令练习

4.1、需求

点击li标签,让被点li的背景变为红色

4.2、代码实现

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .red {background: red;}
    style>
head>
<body>
    <div id="box">
        
        <ul>
            
            
            <li v-for="(item,index) in arr" @click="fn(index)" v-bind:class="{red: item.bol}">{{ index + '、' }}{{ item.des }}li>
        ul>
    div>
    <script src="js/vue.js">script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                arr: [
                    {des:"吃饭",bol:false},
                    {des:"睡觉",bol:false},
                    {des:"LOL",bol:false},
                    {des:"打豆豆",bol:false}
                    ]
            },
            methods: {
                fn: function(index){
                    //通过当前index知道 当前被点击的数据是谁
                    // 把被点击的数据的 bol 值改为true
                    // 把所有其他的未被选中的数据 bl 改为 false
                    // 思路:先都改成false,然后再把选中的改成 true
                    for(var i = 0;i<this.arr.length;i++){
                        this.arr[i].bol = false;
                    };
                    this.arr[index].bol = true;
                }
            }
        });
    script>
body>
指令练习

五、总结

  • v-show:控制切换一个元素的显示和隐藏
  • v-on: 为HTML元素绑定事件监听
  • v-model:将用户的输入同步到视图上
  • v-for:遍历data 中的数据,并在页面进行数据展示
  • v-bind:绑定HTML 元素的属性

记住了,如果在指令中 用到 表达式是的话,是不需要 加 {{ }} 的,但是不在指令中,在标签之外的,那就要 加 {{  }}了,如下:


    

{{ msg }} world

// 在指令之外的,需要 {{msg}}

world

//使用在指令中的,不需要,直接 v-text="msg"

 

转载于:https://www.cnblogs.com/zhangqigao/p/9598412.html

你可能感兴趣的:(第2章-Vue.js指令)