Vue.js核心指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ff186345/article/details/103675507

1.v-model指令

用法：例: <input type="text" v-model="msg">

功能：v-model能够实现表单元素值的双向绑定（注：适用范围为：表单元素如：input,textarea,select等）

双向绑定通过下面demo有一个很详情的显示，
- 初始时，input框的值是通过v-model取到了msg的值，实现了值的获取
- 后面，当input框的值改变的过程中，也会影响到msg值的改变从而实现p标签里内容的改变
- 所谓双向绑定就是msg与input框的值不分彼此，不管哪一个变化，另一个都会跟着变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 这里有二个过程来说明这个双向绑定
        1：刚开始一打开页面，msg的值通过v-model传递给了input框，让input框显示了hello,这是一个取值过程
        2：后面当input框值输入改变时，通过v-model,msg的值也会随之改变，这是一个对msg传值的过程
        取值与传值 二个过程中，v-model实现了双向绑定        
        -->
        <input type="text" placeholder="请输入内容" v-model="msg">
        <p>请输入内容：{{msg}}</p>
    </div>


    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello"
            }
        })
    </script>
</body>

</html>

2.v-on指令

用法：( v-on:=> (简写)@)

 <div  v-on:事件名="需要执行的简单代码或者是方法"> </div>
//简写
 <div  @事件名="需要执行的简单代码或者是方法"> </div>

功能：用于事件的绑定，例如：click,dblclick,mouseover 等只要是事件，都可用它来绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-on:事件名="一句话简短js" -->
        <button v-on:click="clickEvent">点我啊</button>
        <button v-on:dblclick="clickEvent">双击我啊</button>
        <button v-on:mouseover="clickEvent">鼠标移入</button>
        <p>你点了我{{total}}次!</p>


        <!-- 简写@,推荐后面都用简写 -->
        <button @click="clickEvent">点我啊</button>
        <button @dblclick="clickEvent">双击我啊</button>
        <button @mouseover="clickEvent">鼠标移入</button>

    </div>

    <script src="./vue.js"></script>
    <script>

        let app = new Vue({
            el: "#app",
            data: {
                total: 0
            },
            // 这里的methods就是方法的集合，就是我们在vue里面用到的方法都可写到这里来
            methods: {
                //在methods里访问data是需要加this的，而html访问是不需要的
                clickEvent() {   // 这里相当于clickEvent:function(){}
                    if (this.total < 10) {
                        this.total++
                    }
                }
            }
        })
    </script>
</body>
</html>

3.vue实例中的this

如何在methods中访问data里面的属性呢？前面使用的this代表什么呢？

用法：

methods里某个方法访问data => this.data属性
methods里A方法访问methods里的B方法 => this.B()

功能：this就是指当前new Vue实例，vue实例时会将data里面属性与methods方法平铺过来到vue实例里面，所以this能直接访问到data与methods

注：html里面访问data与methods不需要加this,但methods里面的方法访问data里的属性是需要加this的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="clickEvent">点我啊</button>
        <p>{{msg}}</p>

    </div>
    <script src="./vue.js"></script>
    <script>
        //dom里面使用vue里面的data属性与methods里面的方法时都无须加this,但是vue实例里面methods访问data与methods里其它方法都是要加this的
        var app = new Vue({
            el: "#app",
            // vue中data里的值会在vue实例化时平铺到vue实例里面
            data: {
                msg: "123",
                t1: 2,
                t2: 3,
                t3: 4
            },
            //vue中里methods里面的方法也是在vue实例化时平铺到vue
            methods: {
                clickEvent() {
                    //this就代表vue实例
                    console.log(app)
                    //打印看看this里面有什么
                    console.log(this)
                    console.log(this === app);
                    this.msg = "测试一下"
                    this.alertEvent()
                },
                alertEvent() {
                    alert(this.msg)
                }

            },
        })

    </script>
</body>

</html>

4.v-for指令

队列表数据的渲染很常用

用法：

用于数组： v-for="(item(数组每一项),index(索引)) in array" （这里index索引也可省略不写）
用于对象： v-for="(value(对象中的值)，key(对象中的键值)，index(对象中的序号，从0开始) in object)"(这里key与index可省略,对象的v-for在实际项目中很少用到。)

功能：对数组与对象进遍历，得到每一项的值，从而进行列表之类的渲染处理。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 数组有多长它就渲染多少个    第一个值item是代表数组当前项，第二个index值是数组索引-->
            <li v-for="(item,index) in arr">索引：{{index}}------值：{{item}}</li>
            <!-- 对对象而言，第一个值value是也是对象的值，第二个是对象的键值key，第三个index是序号 -->
            <li v-for="(value,key,index) in obj">{{value}}------{{key}}-----{{index}}</li>
        </ul>

    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({

            el: "#app",
            data: {
                arr: [1, 2, 3, 45, 6, 8, 15],
                obj: {
                    name: "刘德华",
                    age: 15
                }
            }
        })
    </script>
</body>

</html>

5.v-if,v-else-if,v-else指令

有条件的渲染某些内容

用法：

v-if="一句话表达式（最后转换成boolean值，如果为真，则进行该语句所在标签渲染，如果为假则不渲染，该标签将不存在）"
v-else-if和v-if 是一样用法，它是v-if不成立情况下才会走到v-else-if这里来
v-else后面无须跟任何语句，当前面v-if和v-if-else都不成立时，它就会执行，当前面任何一个执行渲染，它就不执行

功能：根据不同条件选择性的渲染某些标签。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入相应成绩！" v-model="score">
        <div v-if="score>90">你真优秀</div>
        <div v-else-if="score>70">一般般了</div>
        <div v-else>得努力了</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                score: 100
            }
        })

    </script>
</body>

</html>

6.v-show指令

控制标签是否渲染

用法：和v-if类似如:

v-show="一句话表达式（最后转换成boolean值，如果为真，则进行该标签显示，如果为假则该标签将display:none隐藏）"

功能：进行所在标签的显示与隐藏，但不管显示与隐藏，这标签都会渲染出来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="isShow=!isShow">点我切换</button>
        <!-- v-show只是设置标签的显示与隐藏display:none， 
        input框的值还能保留下来，v-if是不能保留下来这个值的
        -->
        <div v-show="isShow" key="1">
            <p>用户名</p>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div v-show="!isShow">
            <p>密码</p>
            <input type="text" placeholder="请输入密码">
        </div>

    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isShow: true
            },
            methods: {

            }
        })

    </script>
</body>

</html>