VueJS常用指令

TERMINUSL

已于 2022-05-11 10:26:22 修改

阅读量488

点赞数

文章标签： vue.js 前端 javascript

于 2022-05-10 10:31:00 首次发布

本文链接：https://blog.csdn.net/TERMINUSL/article/details/124682025

版权

（1）v-cloak

v-cloak的作用是防止插值在数据没有加载出来的时候闪烁，但是需要配合css中的属性选择器来使用

 <div id="app">
        <h2 v-cloak>{{msg}}</h2>
    </div>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"好啊"
        }
    })
</script>

（2）v-text

v-text指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题

需要注意的是：会替换原来的内容；如果数据中有html标签，会都当成文本一并输出

<div id="app">
        <h3>文字{{msg}}</h3>
        <h3 v-text="msg">文字</h3>
        <h3 v-text="oHtml"></h3>
 </div>
<script>
    new Vue({
        el:"#app", 
        data:{
            msg:"接触vue",
            oHtml:"<strong>文字</strong>"
        }
    })
</script>

（3）v-html

用法和t-text相似，但是可以将html片段填充到标签中，也就是会将代码当成html标签解析后输出。

<div id="app">
        <h3>文字{{msg}}</h3>
        <h3 v-html="msg">文字</h3>
        <h3 v-html="oHtml"></h3>
 </div>
<script>
    new Vue({
        el:"#app", 
        data:{
            msg:"接触vue",
            oHtml:"<strong>文字</strong>"
        }
    })
</script>

(4)v-pre

显示原始信息跳过编译过程

（5）v-once

只执行一次的操作，当数据变化时，不在执行

<div id="app">
        <h3>文字{{msg}}</h3>
        {{changeMangFn()}}
 </div>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"接触vue"
        },
        methods:{
            changeMangFn(){//定义一个方法来修改data中的msg数据
                this.msg="文本"
            }
        }
    })
</script>

（6） v-model

实现双向的数据绑定，主要作用是获取表单中输入的数据

 <div id="app">
       <!-- 可以将data中定义的msg数据绑定到input上 -->
      <!-- 如果表单上边的值发生改变那么data中的msg也会跟着改变--视图修改了，数据也会发生变化 -->
        <input type="text" v-model="msg">
        <h3>{{msg}}</h3>

        <!-- {{changeMsg()}} -->
</div>

<script>
    new Vue({
        el:"#app", //挂载元素（指定一个vm实例的作用范围）
        data:{//定义数据的
            msg:"接触vue"
        },
        methods:{//methods中定义的方法的
            changeMsg(){//定义一个方法来修改data中的msg数据
                this.msg="文本"
            }
        }
    })
</script>

（7）v-on

v-on是用来绑定事件的指令

v-on：事件名如：点击事件---> v-on:click="fn"

可以简写： @事件名如：点击事件--> @click="fn"

 <div id="app">
        <h2>msg的数据为:{{msg}}</h2>
        <button v-on:click="changeMsg">点击修改msg的值</button>
        <button @mouseover="changeMsg">鼠标经过修改msg</button>
        <button @click="changeMsg2('天地','自然')">执行带参数的事件</button>
 </div>
<script>
        new Vue({
            el: "#app",
            data: {
                msg: "学习"
            },
            methods: {
                // 定义方法修改msg
                changeMsg() {
                    this.msg = "快乐"
                },
                changeMsg2(args, args2) {
                    this.msg = args + args2
                }
            }
        })
</script>

（8）v-bind

v-bind绑定属性的，基本形式：v-bind：属性="属性值" ，可以简写：属性="属性值"

 <div id="app">
        <h2>{{msg}}</h2>
        <!-- v-bind:属性="属性值" 绑定属性的 可以简写：属性="属性值" -->
        <!-- v-bind:src="imgsrc" 给图片绑定src属性值 -->
        <img v-bind:src="imgsrc" v-bind:title="msg">
        <img :src="imgsrc" alt="">
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"文字",
            imgsrc:"一个图片的url"
        }
    })
</script>

v-bind的class样式

绑定class样式：方法1--数组形式 :class=[类名1，类名2，...]

方法2--对象形式 :class="{类名1：布尔值1，类名2：布尔值2}" //布尔值为true的时候使用该样式类，否则不使用

方法3--数组对象 :class=["类名"，{类名：布尔值}]

方法4 :class='[三目运算]'

<style>
        .red{
            color: red;
        }
        .bggreen{
            background: green;
        }
        .bgyellow{
            background: yellow;
        }
    </style>
</head>
<body>
    <!-- 绑定class样式 -->
    <div id="app">
        <h2 :class='["red","bggreen"]'>{{msg}}1</h2>
        <h2 :class="{red:true,bggreen:1>0}">{{msg}}2</h2>
        <h2 :class='["red",{bggreen:true}]'>{{msg}}3</h2>

         <!-- styleArr data中定义的数组，数组的每一项元素是定义好的类名 -->
        <h2 :class="styleArr">{{msg}}4</h2>
        <h2 :class="styleObjArr">{{msg}}5</h2>

        <h2 :class='["red",5>8?"bggreen":"bgyellow"]'>{{msg}}</h2>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"文字",
            styleArr:["red","bggreen"],
            styleObjArr:["red",{bggreen:true}]
        }
    })

v-bind的style样式

<style>
        .red{
            color: red;
        }
        .bggreen{
            background: green;
        }
        .bgyellow{
            background: yellow;
        }
    </style>
</head>
<body>
    <!-- 绑定style样式 -->
    <div id="app">
        <h2 style="color: red;">{{msg}}</h2>
        <h2 :style="{color:'red',fontSize:'50px'}">{{msg}}</h2>
        <h2 :style="{'font-size':size}">{{msg}}</h2>

        <!-- styleObj data中定义的数据 -->
        <h3 :style="styleObj">{{msg}}</h3>
        <!-- 数组中的元素是data中定义的数据对象 -->
        <h3 :style="[styleObj,styleObj2]">{{msg}}</h3>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"文字",
            size:"100px",
            styleObj:{
                color:'red'
            },
            styleObj2:{
                fontSize:'50px'
            }
        }
    })

（9）分支语句

分支语句： v-if可以控制元素的显示或者隐藏，条件为true时渲染对应的DOM元素，如果条件为false，那么不会渲染DOM元素，v-else是配合v-if一起使用的，不能单独使用； v-if的条件为真时，v-else不执行，否则执行v-else。

（10）v-for

 <!-- v-for重复一段html代码 -->
    <div id="app">
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
        <h2>数据为数组</h2>
        <ul>
            <!-- 注意事项：使用v-for时，必须要绑定一个key属性，并且key的属性值是唯一的
                key可以提高执行效率  diff算法
             -->
             <!-- （可以任意定义字符串，索引）in 数组 -->
            <li v-for="(item,index) in arr":key="index">{{item}}--{{index}}</li>
        </ul>

        <h2>数据为数组对象</h2>
        <ul>
            <li v-for="item in list":key="item.id">{{item.title}}</li>
        </ul>

        <h2>数据为字符串</h2>
        <ul>
            <li v-for="(item,index) in str":key="index">{{item}}--{{index}}</li>
        </ul>

        <h2>数据为对象</h2>
        <ul>
            <li v-for="(value,key) in obj":key="key">{{value}}---{{key}}</li>
        </ul>

        <h2>数据为数字</h2>
        <ul>
            <li v-for="i in num":key="i">{{i}}</li>
        </ul>

        <h2>数组为嵌套数组</h2>
        <ul>
            <li v-for="carList in carLists":key="carList.id">
                <h4>{{carList.title}}</h4>
                <ul>
                    <li v-for="car in carList.children":key="car.id">
                        <h5>{{car.title}}</h5>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            arr:["列表1","列表2","列表3","列表4"],
            list:[{
                id:1,
                title:"标题001"
            },{
                id:2,
                title:"标题002"
            },{
                id:3,
                title:"标题003"
            }],
            str:"haogu",
            obj:{
                username:"好谷",
                age:18,
                student:"我们"
            },
            num:10,
            carLists:[{
                id:1,
                title:"宝马",
                children:[{
                    id:1001,
                    title:"宝马X1"
                },{
                    id:1002,
                    title:"宝马X2"
                },{
                    id:1003,
                    title:"宝马X3"
                }]
            },
                {
                id:2,
                title:"大众",
                children:[{
                    id:2001,
                    title:"宝来"
                },{
                    id:2002,
                    title:"帕萨特"
                },{
                    id:3003,
                    title:"速腾"
                }]
            }]
        }
    })

TERMINUSL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VueJS常用指令

（1）v-cloakv-cloak的作用是防止插值在数据没有加载出来的时候闪烁，但是需要配合css中的属性选择器来使用 <div id="app"> <h2 v-cloak>{{msg}}</h2> </div><script> new Vue({ el:"#app", data:{ msg:"好啊" } })<.
复制链接

扫一扫