手把手带你学习Vue框架-Vue指令

最新推荐文章于 2023-06-22 12:48:45 发布

刘程云

最新推荐文章于 2023-06-22 12:48:45 发布

阅读量108

点赞数

分类专栏： Vue框架文章标签： vue.js 学习 javascript html ecmascript

本文链接：https://blog.csdn.net/weixin_43200566/article/details/127657139

版权

Vue框架专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一、插值表达式

插值表达式：数据绑定
插值表达式中一般放变量，也可以放表达式等等。

{{name}}
{{message}}
{{1+1}}

注意：当数据不是预定义，而是通过网络获取的，那么网络延迟加载时，页面中会显示插值表达式语法，等到网络加载完毕后，数据进行渲染，这种现象是：插值闪烁

解决：插值闪烁问题可以通过v-text指令和v-html指令

二、v-text

v-text：把数据渲染到标签体中【解决了插值闪烁】
Vue中的v-text 类似于 JavaScript中的 innerText 类似于 jQuery中的text()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <h1>{{msg}}</h1>
        <h2 v-text="message"></h2>
        <h2 v-text="msage"></h2>
    </div>

    <script>

        //setInterval(()=>{
            new Vue({
                el:"#app",
                data:{
                    msg:"开心今天学习了Vue，发现他都会，因为他聪明",
                    message:"开心学会了Vue",
                    msage:"<a href='#'>开心认为是标签</a>"
                }
            });
        //},5000)



    </script>
</body>
</html>

三、v-html

v-html：把数据渲染到标签体中，数据：标签【解决了插值闪烁】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <h1>{{msg}}</h1>
        <h2 v-text="message"></h2>
        <h2 v-text="msage"></h2>
        <h1 v-html="msage"></h1>
    </div>

    <script>

        //setInterval(()=>{
            new Vue({
                el:"#app",
                data:{
                    msg:"开心今天学习了Vue，发现他都会，因为他聪明",
                    message:"开心学会了Vue",
                    msage:"<a href='#'>开心认为是标签</a>"
                }
            });
        //},5000)



    </script>
</body>
</html>

四、v-if

根据条件进行判断是否显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

    <div id="app">

        <h1 v-if="bol">这是一个标签</h1>
        <h1 v-else-if="bo">这不是标签</h1>
        <h1 v-else>这是另一个标签</h1>



    </div>

    <script>

        new Vue({
            el:"#app",
            data:{
                bol:true,
                bo:false
            }
        });

    </script>
</body>
</html>

五、v-show

v-show：根据条件进行判断是否显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

<div id="app">

    <h1 v-show="bol">这是v-show指令</h1>

    <h1 v-if="bo">这是v-if指令</h1>



</div>

<script>

    new Vue({
        el:"#app",
        data:{
            bol:false,
            bo:false
        }
    });

</script>
</body>
</html>

v-if和v-show的区别

  1、v-if
    * 如果条件成立，那么创建该标签，如果条件不成立，那么销毁该标签
    * 创建和销毁，是直接操作DOM
    *  运行时，不经常切换，那么采用v-if
  2、v-show
    * 如果条件成立，那么显示该标签，如果条件不成立，那么隐藏该标签
    *  显示和隐藏，是通过CSS属性设置
    *  运行时，频繁切换，那么采用v-show

六、v-for

v-for：循环遍历数据，渲染页面

1、遍历普通数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

<div id="app">

    <ul>
<!--        <li v-for="item in array">{{item}}</li>-->
        <li v-for="(item,index) in array">{{item+index}}</li>
    </ul>

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            array:["开心","玉凤","小原"]
        }
    });

</script>

</body>
</html>

2、遍历对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

<div id="app">

    <ul>
<!--        <li v-for="item in array">{{item}}</li>-->
        <li v-for="(item,index) in array">{{item.sex+index}}</li>
    </ul>

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            // array:["开心","玉凤","小原"]
            array:[
                {name:"开心",age:19,sex:"男"},
                {name:"玉凤",age:55,sex:"女"},
                {name:"小原",age:21,sex:"男"}
            ]
        }
    });

</script>

</body>
</html>

3、遍历对象

v-for指令参数说明：

v-for="(o1) in user"         o1:属性值
v-for="(o1,o2) in user"      o1:属性值  o2:属性名
v-for="(o1,o2,o3) in user"   o1:属性值  o2:属性名  o3:下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

<div id="app">

    <ul>
<!--        <li v-for="obj in user">{{obj}}</li>-->
<!--        <li v-for="(o1,o2) in user">{{o1+">>>>>>"+o2}}</li>-->
        <li v-for="(o1,o2,o3) in user">{{o1+">>>>>"+o2+">>>>"+o3}}</li>
    </ul>

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            user:{name:"开心",age:19,sex:"男"}
        }
    });

</script>

</body>
</html>

七、v-on

1、事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

<div id="app">

<!-- JS事件写法 -->
<!--    <button οnclick="getData()">获取数据</button>-->
<!-- Vue事件写法 -->
<!--        <button v-on:click="getData()">获取数据</button>-->
<!--        <button v-on:click="getData">获取数据</button>-->
<!-- Vue事件写法-简写 -->
        <button @click="getData">获取数据</button>

        <h1 v-text="message"></h1>

        <button @click="setData">设置数据</button>
</div>

<script>

    /*let vm = new Vue({
        el:"#app",
        data:{
            message:"开心教错了"
        }
    });

    function getData() {
        alert(vm.message)
    }*/

    new Vue({
        el:"#app",
        data:{
            message:"开心教错了"
        },
        methods:{
            /*getData:function () {
                alert(">>>>>")
            }*/

            getData(){
                // alert(">>>>>")
                alert(this.message)
            },
            setData(){
                this.message = "新的数据";
            }
        }
    });



</script>

</body>
</html>

2、事件修饰符

我们之前在开发时，写一个函数不仅要关注数据的业务逻辑如何编写，还需要关注事件的一些其他行为【默认事件、冒泡…】，那么vue帮助我们解决了这件事，我们开发时只需要关注函数中数据的业务逻辑【vue提供了事件修饰符】

.prevent【禁用标签默认行为】
.self【只有触发自身才会执行】
.stop【阻止冒泡】
.once【只会执行一次】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="public/vue.min.js"></script>
</head>
<body>

    <div id="app">

        <a href="http://huya.com" @click.prevent="setMethod">虎牙</a>

        <div style="width: 600px;height: 600px;background-color: red" @click="div1">
            <div style="width: 400px;height: 400px;background-color: yellow" @click.stop="div2">
                <div style="width: 200px;height: 200px;background-color: pink" @click.once="div3">

                </div>
            </div>
        </div>

    </div>

    <script>

        new Vue({
            el:"#app",
            methods:{
                /*setMethod(event){
                    alert(">>>>>")
                    // 禁用标签默认行为
                    event.preventDefault();
                    // 阻止事件冒泡
                    event.stopPropagation();
                }*/
                setMethod(){
                    alert(">>>>>")
                },
                div1(){
                    alert("div1")
                },
                div2(){
                    alert("div2")
                },
                div3(){
                    alert("div3")
                }
            }
        });

    </script>

</body>
</html>

八、v-bind

插值表达式、v-text、v-html指令负责把数据渲染到标签体中，如果想要把数据渲染到属性中或者想要更改属性的值，那么插值表达式、v-text、v-html指令解决不了，那么v-bind指令可以解决该问题

测试：插值表达式更改属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/vue.min.js"></script>
</head>
<body>

<div id="app">

    <input type="text" value="{{name}}">

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            name:"开心"
        }
    });

</script>

</body>
</html>

通过v-bind指令更改属性值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/vue.min.js"></script>
</head>
<body>

<div id="app">

<!--    <input type="text" value="{{name}}">-->
<!--    v-bind更改属性值-->
<!--    <input type="text" v-bind:value="name">-->
<!--简化-->
    <input type="text" :value="name">

    <button @click="setValue">更改属性值</button>
</div>

<script>

    new Vue({
        el:"#app",
        data:{
            name:"开心"
        },
        methods:{
            setValue(){
                this.name = "李开心和玉凤还有小原";
            }
        }
    });

</script>

</body>
</html>

给class属性赋值对象数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/vue.min.js"></script>

    <style>

        .red{
            color: red;
        }

        .green{
            color: green;
        }

    </style>
</head>
<body>

<div id="app">

    <h1 :class="{red:className,green:!className}">开心、玉凤和小原，生活的非常和谐，幸福美满，早生贵子</h1>
<!--                 red:true      green:false-->
    <button @click="className = false">更改颜色为绿色</button>
    <button @click="className = true">更改颜色为红色</button>

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            className:true
        },
        methods:{

        }
    });

</script>

</body>
</html>

九、v-model

数据渲染到页面【单向绑定】 + 页面影响数据【单向绑定】 == 数据的双向绑定

页面影响数据，前提是页面中的标签必须是能输入或修改，那么符合要求的有：input、select、text area、components【自定义组件】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/vue.min.js"></script>
</head>
<body>

<div id="app">

    <input type="text" v-model="value">

    <h1 v-text="value"></h1>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            value:null
        }
    });

</script>
</body>
</html>