第二节：指令的使用

Posted 2020-08-20

tags:

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

1、v-text 更新元素的textContent。

2、v-html 更新元素的innerHtml.

3、v-bind 响应HTML特性，绑定src，class或者style属性,v-bind:src简写为":src"。注意在v-bind:class绑定的时候，如果有多个class，是数组存对象的形式。而v-bind直接绑定是把键作为属性，把值做值。如：v-bind="{key:vlaue}" 结果是： <div key="value"></div>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <style>
        .classa {
            border: 1px black solid;
        }
        
        .classb {
            height: 100px;
            width: 100px;
        }
        
        .classc {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="app" v-html="msg" v-bind:class="[classa,{classb:hasClassb,classc:hasClassc}]">

    </div>
</body>
<script type="text/javascript">
    var app1 = new Vue({
        el: "#app",
        data: {
            msg: "<div>333</div>",
            classa: "classa",
            hasClassb: false,
            classb: "classb",
            hasClassc: true,
            classc: "classc"
        }
    });
</script>

</html>

4、v-on 指令用于绑定事件的监听器，v-on:click简写为"@click"，对于想对一个按钮解除绑定事件的做法可以是：按钮出发一个自定义事件，然后解除绑定的时候，接触的是自定义的事件的触发和监听。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <style>
        .classa {
            border: 1px black solid;
        }
        
        .classb {
            height: 100px;
            width: 600px;
        }
        
        .classc {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="app" v-bind:class="[classa,classb,{classc:false}]">
        <input type="button" v-on:click="bindPrintfn" v-model="bindPrint" />
        <input type="button" v-on:click="offPrintfn" v-model="offPrint" />
        <input type="button" v-on:click="printfn" v-model="showPrint" />
    </div>
</body>
<script type="text/javascript">
    var app1 = new Vue({
        el: "#app",
        data: {
            msg: "<div>333</div>",
            classa: "classa",
            hasClassb: false,
            classb: "classb",
            hasClassc: true,
            classc: "classc",
            bindPrint: "绑定事件",
            offPrint: "移除事件",
            showPrint: "打印信息"
        },
        methods: {
            bindPrintfn: function() {
                this.$on("printfn", function() {  //自定义事件声明
                    console.log(this.$data.showPrint);
                });
            },
            offPrintfn: function() {
                this.$off("printfn"); //解除绑定自定义事件
            },
            printfn: function() {  
                this.$emit("printfn"); //按钮触发的是自定义的事件
            }
        }
    });
</script>

</html>

注意：v-on 可以在后面跟修饰符 .stop .prevent .capture .self .{keyCode | KeyAlias}

例如 @click.self="printfn"

以上是关于第二节：指令的使用的主要内容，如果未能解决你的问题，请参考以下文章