vue入门常用指令

杨不旧

已于 2022-02-19 16:36:51 修改

阅读量1.1k

点赞数 2

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

于 2022-02-19 16:01:36 首次发布

本文链接：https://blog.csdn.net/qq_45152044/article/details/123018921

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 3 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

前言

本文介绍vue常用的指令，建议先看完此文章再看本文。点击跳转

指令

在vue中什么叫做指令，指令实质就是自定义属性。
其目的就是为了扩充html的功能

v-bind

v-bind:属性='值' 或者缩写:属性='值'，
注意这个值是在vue定义的值，不是原本属性里的值。

示例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-bind:title='a'>请悬停上我上面！</span>
        <span v-bind:style='b'>我是红色的字体</span>
        <img v-bind:src="imgSrc">
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            a:"我是title里的内容",
            b:'color:red',
            imgSrc:'https://cn.vuejs.org/images/dcloud2.png'
        },
        methods:{
        }
    })
</script>

v-html

v-html='a'

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>{{a}}</span><br>
        <span v-html="a"></span><br>
        <span v-html="b"></span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            a:"我是一个span标签",
            b:`
                <p>我是span标签里的p标签</p>
            `
        },
        methods:{
        }
    })
</script>

v-text

v-text='a'

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>{{a}}</span><br>
        <span v-text="a"></span><br>
        <span v-text="b"></span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            a:"我是一个span标签",
            b:`
                <p>我是span标签里的p标签</p>
            `
        },
        methods:{
        }
    })
</script>

结合上面两个代码块，你应该也看出来了v-html和v-text的区别了：
v-html能够解析标签，但v-text不能够解析html标签

<span>{{a}}</span><br>
<span v-html="a"></span>

这两个都能达到一样的效果，那么这两个区别又是什么？
1、防止当vue.js还没加载出来的时候，两个{{}}显示出来，懂技术的知道的是什么，不懂技术的还以为是乱码了，而v-html可以防止当vue.js还没加载完毕时让{{}}显示出来，具体使用哪种也看需求，但是建议可以使用第二种，自己也可以写个例子，看看一直刷新网页{{}}会不会出来。
2、v-html和v-text都会覆盖标签内的所有内容，没有数据的话，就展示原本标签内的内容，不能做到模板引擎{{}}那样一部分变量，一部分固定。

v-on

v-on:事件名=“方法” 或者 @事件名=“方法”

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="a">按钮1</button>
        <button @click="b">按钮2</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
        },
        methods:{
            a:function(){
                alert('v-onclick写法触发')
            },
            b:function(){
                alert('@click写法触发')
            }
        }
    })
</script>

初次之外还有其他用法，如：
1、阻止事件冒泡：@事件名.stop=''
2、阻止浏览器默认行为：@事件名.prevent=''
3、键盘事件：
a、@事件名.修饰符如：@click.enter=''当按下回车键触发什么事件
b、@事件名.keyCode=""，keycode指的是键码
在这里插入图片描述
c、组合键，如按下ctrl+c触发什么事件：@事件名.shift.c=""

v-model

常用于表单输入，v-model作用类似于实时获取你输入的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" name="" id="" v-model="msg">
        <span>{{msg}}</span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:''
        }
    })
</script>

v-show 和v-if

共同点： 两者都能控制标签的显示与隐藏。true是显示，false为不显示

不同点：
1、v-show是通过样式display来显示隐藏
2、v-if通过增加或删除节点来显示隐藏
3、v-if还可以配合v-else-if使用

不同场景应该使用什么：
1、v-show应该使用在频繁切换的场景中，仅修改样式，不修改DOM树，可以提高性能
2、v-if不是频繁操作的场景假如一开始就是不展示的状态，那么v-if的性能要高

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-show="see">v-show显示</span>
        <span v-if="see">v-if显示</span>
        <span v-show="nosee">v-show隐藏</span>
        <span v-if="nosee">v-if隐藏</span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            see:true,
            nosee:false
        }
    })
</script>

在这里插入图片描述

v-for

作用类似于源生js的forEach、jQuery的$.each，v-for可用来循环显示数组或json对象。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(v,i) in arr">{{i+1}}、我喜欢的水果是：{{v}}</li>
        </ul>
        <ol>
            <li v-for="(v,key) in json">{{v}}--{{key}}</li>
        </ol>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:['apple','banana','pear'],
            json:{a:1,b:2,c:3}
        }
    })
</script>

v-pre

不解析模板引擎（双花括号）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-pre>{{a}}</span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            a:'Hello World!'
        }
    })
</script>

v-cloak

用到模板引擎且不会闪烁出双花括号。
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
        <span v-cloak>{{a}}</span>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            a:'Hello World!'
        }
    })
</script>

v-once

只渲染一次，后面再有数据变化都不会再渲染更新数据

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <span>没加v-once：{{a}}</span><br>
        <span v-once>加了v-once：{{a}}</span><br>
        <button @click="fn">点击将a的值改为2</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            a:'1'
        },
        methods: {
            fn:function(){
                return this.a=2
            }
        }
    })
</script>

杨不旧

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue入门常用指令

前言本文介绍vue常用的指令，建议先看完此文章再看本文。点击跳转指令在vue中什么叫做指令，指令实质就是自定义属性。其目的就是为了扩充html的功能v-bindv-bind:属性='值' 或者缩写:属性='值'，注意这个值是在vue定义的值，不是原本属性里的值。示例 :<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq
复制链接

扫一扫