Vue 2. 模板语法

最新推荐文章于 2024-07-26 20:46:33 发布

恋静

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量150

点赞数

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

本文链接：https://blog.csdn.net/xj89959853/article/details/105105694

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在前面，我们介绍了 Vue 一个最核心的功能，数据和 DOM 元素进行绑定，数据一旦改变，DOM 元素也会重新进行渲染。

本文中，我们就一起来看一下在数据不变的情况下，在页面中的不同渲染方式。

本文主要包含以下知识点：

插值
- 文本
- 原始 HTML
- 特性
- 动态参数
- 使用 JavaScript 表达式
缩写
- v-bind 缩写
- v-on 缩写

插值

1. 文本

文本插值是最基本的渲染方式，数据是什么样的，渲染在页面中就是什么样的。

示例如下：

// index.html
<body>
    <div id="app">
        my name is {{ name }}
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: 'xiejie'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
如果加入 v-once 指令，那么数据只会在第一次的时候被渲染，之后改变数据页面不会再重新渲染。

示例如下：

<body>
    <div id="app">
        <p>my name is {{ name }}</p>
        <p v-once>my name is {{ name }}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: 'xiejie'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
Vue 还提供了一个 v-cloak 指令，用于控制数据还未渲染出来时，是否显示未渲染的临时内容。

示例如下：

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

<body>
    <!-- 当网速慢速时不会显示 {{ mess }}，但是要和 display:none 配合使用，不然还是会显示 {{ mess }} -->
    <div id="app" v-cloak>
        {{ mess }}
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                mess: 'this is a test'
            }
        });
    </script>
</body>

2. 原始 HTML

如果要渲染的数据含有 html 标签，在渲染的时候也会原样输出。如果要作为 html 代码进行渲染，可以添加指令 v-html

示例如下：

<body>
    <div id="app">
        <!-- 第一行会原样输出 , 第二行可以作为 HTML 渲染出来 -->
        <div>{{htmlCode}}</div>
        <div v-html="htmlCode"></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                htmlCode: '<span style="color:red">this is a test</span>'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

3. 特性

特性，又被称之为属性。我们知道，一个 html 标签可以含有多个属性，如果需要将属性和 data 数据进行绑定，达到通过 data 数据来控制属性值的话，可以使用 v-bind 指令进行属性的绑定。

示例如下：

<body>
    <div id="app">
        <div v-bind:title="one" v-bind:class="two">动态绑定属性</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                one: 'this is a title',
                two: 'topContent abc'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

4. 动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个动态参数，这样就增大了属性或者事件的灵活性。

具体示例如下：

<body>
    <div id="app">
        <!-- 这里为 span 绑定了一个动态事件 , 具体是什么事件取决于 abc 的值 -->
        <span v-on:[abc]="test2">动态参数</span>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                abc: 'mouseenter'
            }
        })
    </script>
</body>

如上例所示，动态参数 abc 的值决定了绑定的事件具体是什么，增加代码的灵活性。

5. 使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue 都提供了完全的 JavaScript 表达式支持。

示例如下：

<body>
    <div id="app">
        <p>{{ number + 1 }}</p>
        <p>{{ ok ? 'YES' : 'NO' }}</p>
        <p>{{ message.split('').reverse().join('') }}</p>
        <div v-bind:id="'list-' + id"></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                number: 1,
                ok: true,
                message: 'this is a test',
                id: 1
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
值得注意的是，模板中每个绑定的占位符都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

缩写

由于属性绑定和事件绑定的使用频率非常的高，所以在 Vue 中提供了对应的简写方式。

v-bind 的缩写如下：

<body>
    <div id="app">
        <!-- v-bind:属性名 的缩写方式为 :属性名 -->
        <div v-bind:title="one" :class="two">动态绑定属性</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                one: 'this is a title',
                two: 'topContent abc'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
v-on 的缩写如下：

<body>
    <div id="app">
        <p v-on:click="one" @mouseenter="two">this is a test</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                one: function () {
                    console.log('这是正常的事件绑定。');
                },
                two() {
                    console.log('这是缩写形式的事件绑定');
                }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

总结

Vue 可以将 data 数据自动渲染到页面，一般情况下使用文本插值的方式即可。
如果要将 html 代码渲染至页面，可以使用指令 v-html。
html 标签中存在很多的属性，通过 v-bind 指令，可以将属性和 data 数据进行动态绑定。
新加入的动态参数功能，可以使我们绑定属性或者绑定事件更加的灵活。
由于绑定属性和事件的使用率很高，所以在 Vue 中提供了对应的缩写方式。

恋静

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 2. 模板语法

在前面，我们介绍了 Vue 一个最核心的功能，数据和 DOM 元素进行绑定，数据一旦改变，DOM 元素也会重新进行渲染。本文中，我们就一起来看一下在数据不变的情况下，在页面中的不同渲染方式。本文主要包含以下知识点：插值文本原始 HTML特性动态参数使用 JavaScript 表达式缩写v-bind 缩写v-on 缩写插值1. 文本文本插值是最基本的渲染方...
复制链接

扫一扫