Vue插值指令1

最新推荐文章于 2024-02-01 17:54:39 发布

原创最新推荐文章于 2024-02-01 17:54:39 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

9 篇文章

订阅专栏

Vue插值指令

1.v-once

只显示第一次{{xxx}}中渲染的数据，当{{xxx}}对应的值改变也不会跟着改变。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:'海燕呀！！！',
            },
        })
    </script>
</body>

第一次打开展现message原来数据：
第二次改变message数据：

2.v-html

如果直接{{xxx}}使用输出，那么html标签将不会被解析，会连同html代码一起输出。

使用v-html则可以解析html中的标签，并显示对应的内容。

<body>
    <div id="app">
        <h2>{{url}}</h2>  <!--无法解析-->
        <h2 v-html="url"></h2>  <!--解析html标签-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                url:"<a href='http://baidu.com'>百度</a>",
            },
        })
    </script>
</body>

在这里插入图片描述

3.v-text

获取{{xxx}}定义的文本内容，{{}}里可以字符串拼接，但是v-text后添加会无效，被覆盖掉。

<body>
    <div id="app">
        <h2>{{message}}你可长点心</h2>
        <h2 v-text="message+'啊'">你可长点心</h2>
        <!-- v-text把后面连接的字符串覆盖 -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:'海燕！'
            },
        })
    </script>
</body>

在这里插入图片描述

4.v-on

v-on:click 或 @click

1.如果方法后没有参数传递，可以不加() 例如：@click=“xxx”
2.如果有括号函数需要传参数，但是没有传入，如@click="xxx()"那么形参的值为undefined
3.如果没有括号函数要传入参数，但是没有参数，如@click=“xxx”,那么形参的值将会是一个鼠标点击触发的监听事件

4.stop:当点击按钮不希望事件冒泡，阻止事件冒泡可以使用@click.stop
5.prevent: 阻止默认事件，例如点击submit事件提交，不想点击就提交事件，要点击后执行自己的的方法。
6.@keyup.enter:当按下键盘抬起时触发的事件
7.@click.once:按钮只能点击一次

<body>
    <div id="app">
        <!-- 1.stop修饰符阻止事件冒泡，点击“按下去”不会导致aaaa也会触发 -->
        <div @click="divclick">
            aaaaaa
            <br>
            <button @click.stop="btnclick">按下去</button>
        </div>
        <br>
        <!-- 2.prevent阻止默认事件 -->
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="formwhere">
        </form>
        <br>
        <!-- 3.keyup键盘抬起事件  enter按下回车触发-->
        <input type="text" @keyup.enter="keyUp">
        <br>
        <!-- 4.once事件只触发一次 -->
        <button @click.once="doItonce">按钮</button>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:'海燕',
            },
            methods:{
                divclick(){
                    console.log("divclick");
                },
                btnclick(){
                    console.log("btnclick");
                },
                formwhere(){
                    console.log("formwhere");
                },
                keyUp(){
                    console.log("keyUp");
                },
                doItonce(){
                    console.log("doItonce");
                },
            }
        })
    </script>
</body>

在这里插入图片描述

5.v-pre

让div不解析，内容原原本本显示出来。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
        <!-- v-pre使元素元素原封不动显示 -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:'海燕',
            },
        })
    </script>
</body>

在这里插入图片描述

6.v-cloak

当文本没加载完成时，不让{{message}}这种形似显示出来

<style>
    [v-cloak]{
        display: none;//在加载则不显示
    }
</style>
<body>
    <div id="app">
        <!-- 不让不友好代码内容让用户看到 -->
        <h2 v-cloak>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        setTimeout(function(){
            let app = new Vue({
            el:"#app",
            data:{
                message:'海燕',
            },
        })
        },1000)
    </script>
</body>