Vuejs中各种"v-xxx"都是什么，一篇带示例的文章让你搞清楚

2021-10-2411:17:47 发表评论

摘要

前面一篇文章，伯衡君撰写了一个Vue3的入门文章，具体可以参看下方的前情提要，而本篇文章则是继续延续上一篇文章的内容，继续深化学习Vue的相关内容，在阅读Vuejs相关文档时，会看到有各种如"v-once"，"v-pre"，"v-if"等等，这些都是代表什么意思呢？本篇文章结合示例，让你一次搞明白……

分享至：

开篇寄语

前面一篇文章，伯衡君撰写了一个Vue3的入门文章，具体可以参看下方的前情提要，而本篇文章则是继续延续上一篇文章的内容，继续深化学习Vue的相关内容，在阅读Vuejs相关文档时，会看到有各种如"v-once"，"v-pre"，"v-if"等等，这些都是代表什么意思呢？本篇文章结合示例，让你一次搞明白。

前情提要

《科学入门Vuejs，几个小示例让你爱上它》

表格一览

v-once	v-html	v-text
v-pre	v-cloak	v-if, v-else-if, v-else
v-show	v-for	v-bind
v-on	v-model	v-slot

内容详情

以下内容也是以Vue3为例，虽然与Vue2版本差别不是很大。

v-once
- 表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-once demo</title>
</head>

<body>
    <div id="app">
        <!-- 只会渲染一次，数据改变不会再次渲染 -->
        <h1 v-once>{{message}}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const {
            createApp,
            h
        } = Vue
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'Hello World'
                }
            },
            render() {
                return h('h1', {}, this.msg)
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

v-html
- 在某些时候我们不希望直接输出<a href='http://www.google.com'>Google</a>这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-html demo</title>
</head>

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <h1 v-html="url"></h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'Hello World',
                    url: '<a href=https://www.googl.com>Hello World</a>',
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

生成效果如下图所示：

v-text
- 相当于js的innerText方法，覆盖dom元素中的数据，试举一例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-text demo</title>
</head>

<body>
    <div id="app">
        <h1 v-text="msg">hhhhhh</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'Hello World',
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

v-pre
- 直接输出"{{}}"里面的值，试举一例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-pre demo</title>
</head>

<body>
    <div id="app">
        <h1 v-pre="msg">hhhhhh</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'Hello World',
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

v-cloak
- 有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单地理解，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-cloak demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1>{{ msg }}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: '你好啊',
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

生成效果类似于下面这样：

v-if, v-else-if, v-else逻辑判断
- 类似于js语法中的if-else-if-else，举一个例子就很容易理解了：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-if demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1 v-if="num>20">rich</h1>
        <h1 v-else-if="num==20">balance</h1>
        <h1 v-else>balance</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    num: 21,
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

v-show
- 根据true or false来确定是否显示，类似于css的display

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-show demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1 v-show="notShow">{{ msg }}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'Hello World',
                    notShow: true, //true显示，false不显示
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

v-for
- for loop，在js中称之为遍历循环，在Vuejs也继承了这一点，试举一例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-for demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <button v-on:click="addItem">Add</button>
        <ul>
            <li v-for="(item, index) in list" v-bind:key="index">
                <a v-bind:href="item.url">{{ item.name }}</a>
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    count: 1,
                    list: [{
                        name: 'Google',
                        url: 'https://www.google.com'
                    }, {
                        name: 'Github',
                        url: 'https://www.github.com'
                    }, {
                        name: 'Luckydesigner',
                        url: 'https://luckydesigner.space/'
                    }]
                }
            },
            methods: {
                addItem() {
                    this.count++
                        this.list.push({
                            name: 'Luckydesigner' + this.count,
                            url: 'https://luckydesigner.space/'
                        })
                }
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

生成效果如下图所示，点击"Add"后就会增加相关条目：

v-bind绑定事件
- 绑定元素属性，示例如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-bind demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <span :title="msg">
              Hover your mouse over me for a few seconds to see my dynamically bound
              title!
        </span>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: "Hello World"
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

生成效果如下图所示：

v-on
- 事件监听，类似于在js中构建了函数，然后放置在html的tag标签内，一般是点击事件，或者是切换事件，试举一例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-on demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1>{{ num }}</h1>
        <button @click="increment">Add</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                increment() {
                    this.num++
                },
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

生成效果如下图所示：

v-model
- Vue 还提供了 v-model 指令，使表单输入和应用程序状态之间的双向绑定变得轻而易举：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>v-on demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <p>{{ message }}</p>
        <input v-model="message" />
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

v-slot
- 处理开发好的组件运用里面的内容进行数据处理，试举一例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>

<body>
    <div id="app">
        <com-input></com-input>
        <com-input>
            <template v-slot="slot">
                <span>{{ slot.data.join(' * ') }}</span>
            </template>
        </com-input>
        <com-input>
            <template v-slot="slot">
                <span>{{ slot.data.join(' - ') }}</span>
            </template>
        </com-input>
    </div>
    <template id="cpn">
        <div>
          <slot :data="Language">
              <ul>
                  <li v-for="(item, index) in Language" :key="index">{{ item }}</li>
                </ul>
          </slot>
        </div>
    </template>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isShow: true
                }
            },
        });
        app.component('com-input', {
            template: "#cpn",
            data() {
                return {
                    isShwo: false,
                    Language: ['Japanese', 'English', 'Chinese', 'Korean']
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

先到这里，后续会有更多精彩文章发布，敬请期待。