vue.js常用指令

最新推荐文章于 2024-10-08 13:51:35 发布

Saoづ孤

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量212

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/YiFuLi/article/details/110878907

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue.js常用指令

一、v-cloak
二、v-text
三、v-html
四、v-pre
五、v-once
六、v-model
七、v-on
八、v-bind

一、v-cloak

可以使用 v-cloak 指令设置样式，当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码，可以使用 v-cloak 指令来解决问题。

<style>
        [v-cloak] {
            display: none;
        }
    </style>
<body>
    <div id="app">
        <p v-cloak>{{msg+1+1+1+1+1+1+1+1+1+1+1}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: 'Hello Word'
            }
        })
    </script>
</body>

二、v-text

v-text不被编译

<body>
    <div id="app">
        <div v-text="mytext"></div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg:'Word',
                mytext: '文本'
            }
        })
    </script>
</body>

三、v-html

v-html被浏览器编译

<body>
    <div id="app">
        <div v-html="myhtml"></div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                myhtml: '<h1>Hi</h1>'
            }
        })
    </script>
</body>

四、v-pre

v-pre不被编译

<body>
    <div id="app">
        <div v-pre>{{mypre}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                mypre: '不被编译'
            }
        })
    </script>
</body>

五、v-once

v-once不被替换

<body>
    <div id="app">
        <div v-once>{{myonce}}</div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                myonce: '最初的理想，是什么——'
            },
            mounted() {
                this.msg = '后来我成为了工程师'

            }
        })
    </script>
</body>

六、v-model

v-model双向数据绑定

<body>
    <div id="app">
        <input type="text" value="" v-model="mymodel">
        <p>{{mymodel}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                mymodel: '今天学习了vue-model等'
            }
        })
    </script>
</body>

七、v-on

v-on绑定事件，简写：@

<body>
    <!-- 解放Dom -->
    <div id="app">
        <input type="text" v-model="num"><br />
        <input type="button" value="+1" @click="add">
        <input type="button" value="-1" @click="min">
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1
            },
            // 将num值进行操作
            // methods：用来写页面需要的方法配置项
            methods: {
                add: function () {
                    this.num += 1;
                },
                min() {
                    this.num -= 1;
                }
            }
        })
    </script>
</body>

八、v-bind

v-bind: 用来绑定属性简写成:

<body>
    <div id="app">
        <!-- <img v-bind:src="myimg"> -->
        <img :src="myimg">
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                myimg: './img/cy.jpg'
            },
            mounted() {
                // 这个this必须要，它是当前的vm实例
                this.myimg = './img/lhz.jpg'
            }
        })
    </script>
</body>