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

百度已收录   阅读次数: 58
2021-10-2411:17:47 发表评论
摘要

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

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

开篇寄语

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

前情提要

表格一览

v-oncev-htmlv-text
v-prev-cloakv-if, v-else-if, v-else
v-showv-forv-bind
v-onv-modelv-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/[email protected]"></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/[email protected]"></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>

生成效果如下图所示:

Vuejs中各种"v-xxx"都是什么,一篇带示例的文章让你搞清楚
  • 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/[email protected]"></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/[email protected]"></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/[email protected]"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: '你好啊',
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

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

Vuejs中各种"v-xxx"都是什么,一篇带示例的文章让你搞清楚
  • 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/[email protected]"></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/[email protected]"></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/[email protected]"></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"后就会增加相关条目:

Vuejs中各种"v-xxx"都是什么,一篇带示例的文章让你搞清楚
  • 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/[email protected]"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: "Hello World"
                }
            },
        });
        app.mount("#app")
    </script>
</body>

</html>

生成效果如下图所示:

Vuejs中各种"v-xxx"都是什么,一篇带示例的文章让你搞清楚
  • 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/[email protected]"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                increment() {
                    this.num++
                },
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

生成效果如下图所示:

Vuejs中各种"v-xxx"都是什么,一篇带示例的文章让你搞清楚
  • 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/[email protected]"></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/[email protected]"></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>

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

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: