Vue学习笔记 - 常用的指令

Posted WHOVENLY

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习笔记 - 常用的指令相关的知识，希望对你有一定的参考价值。

本篇文章用于介绍Vue中常用的指令

目录

一、指令定义

1.指令里除了放变量，还可以放表达式

2.指令都是v-开头的

二、常用指令

1.v-cloak

1.定义：用于解决小型简单的vue项目的闪烁问题，大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

2.实现原理：

1）当dom渲染完，即页面出现后，vue才介入

2）在vue解析之前，div中有一个属性v-cloak，在vue解析之后，div中没有一个属性v-cloak

3）做法：控制元素显隐，使用该指令后页面内容会在vue介入前先隐藏，在vue工作后才显示页面。

3.使用：将v-bloak写在el绑定的标签上，相当于一个属性，并设置v-bloak属性的样式为display:none隐藏。

4.实现过程：当vue还未进入时，有v-bloak属性，并为v-bloak属性设置隐藏样式，而当vue介入后，该属性不存在了，则设置的隐藏样式也不存在了，此时页面展示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>

<body>
    <div id='app' v-cloak></div>
</body>

2.v-bind:

1.定义：用于属性的动态绑定

2.写法：v-bind: 语法糖：:

3.使用:

1）普通写法：:属性名=‘属性值’

<body>
    <div id="app">
        <div v-bind:id='myId'>我是盒子一号</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            myId:'redDiv',
        },
    })
</script>

2）对象写法：v-bind:属性名=’{类名1:booolean,类名2:boolean}’

<body>
    <div id="app">
        <div :class='{red:isRed,pink:isPink}'>我是粉盒子</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            isRed:false,
            isPink:true
        },
    })
</script>

3）对象写法升级版：v-bing:属性名=‘方法名（）’

<body>
    <div id="app">
        <div :class='getClass()'>我是蓝盒子</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            isRed:false,
            isPink:true,
            isBlue:true
        },
        methods:{
            getClass(){
                return {red:this.isRed,blue:this.idBule}
            }
        }
    })
</script>

4）数组的写法：v-bind:属性名=’[类名1.类名2]’

<body>
    <div id="app">
        <div :class='["orange"]'>我是橙盒子</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
        },
    })
</script>

5）数组写法的升级版：v-bind:属性名=‘方法名（）’

<body>
    <div id="app">
        <div :class='getClass()'>我是紫盒子</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            isRed:false,
            isPink:true,
            isBlue:true
        },
        methods:{
            getClass(){
                return ["pruple"]
            }
        }
    })
</script>

6）使用v-bind绑定style属性示例

<body>
    <div id="app">
       <!-- 对象写法 -->
        <div :style="{color:'pink',fontSize:'15px'}">我是粉色加大版</div>
        <div :style="{color:getColor,fontSize:getFontSize}">我是蓝色加大版</div>
        <div :style='getStyle()'>我是蓝色迷你版</div>
        <!-- 数组写法 -->
        <div :style='[color,fontSize]'>我是紫色迷你版</div>
        <div :style='getStyleArray()'>我是紫色迷你版</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            getColor:'skyblue',
            getFontSize:"16px",
            color:{color:'purple'},
            fontSize:{fontSize:'12PX'}
        },
        methods:{
            getStyle(){
                return {color:this.getColor,fontSize:'13px'}
            },
            getStyleArray(){
                return [this.color,this.fontSize]
            }
        }
    })
</script>

3.v-on

1.定义：用于绑定事件

2.写法：v-on:触发事件的类型名=事件名 语法糖：@

3.关于参数：如果该方法不需要额外参数，那么方法后的（）可以不添加。

1）但是注意如果函数需要参数，但是没有传入，那么会默认将原生事件event参数传递进去

2）需要同时传入某个参数，如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<body>
    <div id="app">
        <button @click='addNumber'>点击我+1</button>
        <button @click='addNumber10(10,$event)'>点击我+10</button>
        <div>{{number}}</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            number: 1
        },
        methods:{
            addNumber(event) {
                console.log(event)
                this.number++
            },
            addNumber10(number, event) {
                this.number = this.number + number
            }
        }
    })
</script>

4.方法使用的地方：on和methods里的其他方法，并且在其他方法中使用时要用this，this指代的是当前这个vue的实例对象vm

5.跑马灯的例子：

<body>
    <div id="app">
        <div>{{message}}</div>
        <button @click='start'>开始</button>
        <button @click='end'>结束</button>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '浪哩个浪',
            interval: null
        },
        methods:{
           start() {
                if (this.interval != null) return
                this.interval = setInterval(() => {
                    //substring(start,end)包前不包后
                    // 获取下标为0的字符
                    let start = this.message.substring(0, 1)
                    // 获取下标为1直到最后一个字符的字符串
                    let end = this.message.substring(1)
                    this.message = end + start
                }, 400)
            },
            end() {
                // 清除定时器
                clearInterval(this.interval)
                this.interval = null
            }
        }
    })
</script>

6.事件修饰符 – 可多个串联使用

1）.stop：从根源阻止冒泡,使事件原地直接爆炸。用法：绑定事件后.stop。

2）.prevent:阻止默认事件。常用于

3）.once：使当前事件只触发一次,通常结合使用

4）.self:只当事件在该元素本身，子孙元素触发时，他不会触发回调。逐个

5）.capture：添加事件侦听器时使用时间捕获形式

6）键盘事件的.键修饰符：可以使用键别名或者键代码。

<!-- 监听使用键代码监听回车键弹起 -->
<input @keyup.13='keyClick'>
<!-- 监听使用键别名监听回车键弹起 -->
<input @keyup.enter='keyClick'>

<div @click.self='big' style="height: 200px;width: 200px;background-color: orange;">
    <div @click='small' style="height: 100px; width: 100px;background-color: orchid;">
    <!-- 事件修饰符可以串联使用-->
    <button @click.stop.once='btn'>点击我</button>
    </div>
    <a href="https://www.cnblogs.com/watson945/p/5067110.html" @click.prevent='jump'>原生跳转事件     以失效</a>
    <a href="https://www.cnblogs.com/watson945/p/5067110.html" @click='jump'>原生跳转事件未失效       </a>
</div>

4.v-if和v-show

1.共同点：

(1)都用于控制元素的显示隐藏；

(2)可以跟表达式，但是结果只能是boolean，为true：显示；为false:隐藏

2.区别：

(1)手段：v-if是动态的向DOM树内添加或者删除元素,即若元素被删除后文档流里看不到；v-show是通过设置DOM元素的display：none样式属性控制显隐

(2)性能消耗：v-if有更高的切换和，v-show有更高的初始渲染的消耗，但总的v-if消耗高

(3)使用场景:v-if:适合运营条件不大可能改变的元素上，v-show适合频繁切换

(4)方式：v-if的方式多（v-if，v-else-if，v-else），而v-show只有一种

(5)判断次数：v-if只判断一次（满足条件后不往下判断了），而v-show要判断多次（每个都要判断）

3.例子

<!-- 最少可能只执行一次，即当state为1时 -->
<div v-if='state == 1'>成功</div>
<div v-else-if='state == 0'>失败</div>
<div v-else>进行中</div>
<!-- 一定要执行3次 -->
<div v-show='state == 1'>成功</div>
<div v-show='state == 0'>失败</div>
<div v-show='state == 2'>进行中</div>

<body>
    <div id="app">
       <div v-if='type'>
            <label>
                手机号：
            </label>
            <!-- 加上不同的key，告诉vue不再复用之前的那个input，就不会出现把input中的值带出的问题 -->
            <input type="text" placeholder="请输入手机号" key='1'>
        </div>
        <div v-else>
            <label>
                邮箱号：
            </label>
            <input type="text" placeholder="请输入邮箱号" key='2'>
        </div>
        <button @click='changeType'>切换类型</button>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            type:false
        },
        methods:{
            changeType(){
                this.type = !this.type
            }
        }
    })
</script>

4.注意点：

1)如果v-show作用的元素，css文件中display：none；通过v-show进行设置不能显示该元素；

​ 原因：因为v-show控制显隐是通过js代码去修改元素的element style，如果value为false，设置diaplay：none；如果value为 true，设置display：”；于是value为true时只能将element style中的diaplay效果清除，并不能覆盖css中的diaplay效果；

​ 解决办法：使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中】

​ 【拓：visibility:hidden:占位符还在；diaply：none：占位符不在】

以上是关于Vue学习笔记 - 常用的指令的主要内容，如果未能解决你的问题，请参考以下文章

Vue学习笔记

Vue学习笔记

Vue学习笔记

Vue.js学习笔记 - 修饰符

Vue2.0笔记——常用指令

Vue-01-笔记