一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

前言

在上一篇文章中，讲过了vue的生命周期，今天我们要深入了解一下vue的模板语法。之前的文章中，也大致用过和了解过部分模板语法，通过今天的文章，你将对vue的模板语法有一个更深层次的理解。

v-html

在之前的内容中，我们会在template中用{{}}这样的插值表达式去获取data里面的数据，但是当我们出现下面这种情况的时候，还能不能正常输出我们想要的数据呢？

<script>
    const app = Vue.createApp({
        data(){
            return {
                message: '<strong>Hello World</strong>'
            }
        },
        template: "<div>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>

我们在data中给message定义的是一个HTML标签格式化的数据，那么我们输出看一下是什么效果。

在浏览器中可以看到，template模板将message里面的内容当做一个字符串去输出了，但是想要将message里面的内容正常输出Hello World该怎么办呢？

那就要用到一个vue里面的指令 v-html

template: "<div v-html='message'></div>"

将template里面的内容输出改为 v-html 指令的方式，就无需用插值表达式去获取data里面的数据了。

通过两次输出的内容进行对比之后，我们发现用 v-html 指令输出的内容会将 HTML 标签进行转义变成我们需要的格式。

定义

v-html：将data里面的数据通过HTML的方式进行展示。

v-bind

在以前的内容中，我们也用过v-bind指令，下面我们就来回顾一下，并且展开来讲一讲。

<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        template: "<div title='message'>hello world</div>"
    });
    const vm = app.mount('#root');
</script>

如果我们要在div标签中的title属性上获取到message内容的话，这样写可以获取到嘛？

很显然是获取不到的，在title上显示的就是一个字符串，而这个字符串的内容是message，如果想要获取到data中定义的message的值，我们可以在title属性前加上v-bind指令。

template: "<div v-bind:title='message'>hello world</div>"

上面这种用法，在以前的文章中已经见过了，下面我们就来拓展一下这种用法。

v-bind指令不仅仅可以用在title属性上，其他属性也是可以的，下面举个栗子看看

<script>
    const app = Vue.createApp({
        data(){
            return {
                disable: false
            }
        },
        template: "<input disabled='disable' />"
    });
    const vm = app.mount('#root');
</script>

在很多时候，表单上的input标签会通过不同的权限或者状态来让它禁用或者启用，那么我们这样写了之后，在页面上看到的效果肯定是禁用状态的。

那么我们就可以在disabled属性前面添加v-bind指令，让它可以根据data里面的数据进行改变。

template: "<input v-bind:disabled='disable' />"

在浏览器控制台中更新data中的数据之后，会明显看到input框禁用和启用的效果了。

上面的用法都是在标签的默认属性上操作的v-bind指令，那可以不可以让属性也变成动态的呢？

<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                name: 'title'
            }
        },
        template: "<div v-bind:[name]='message'>hello world</div>"
    });
    const vm = app.mount('#root');
</script>

通过代码会发现，在v-bind后面跟着的是[name]这样一个属性，name的数据值会在data方法中定义，然后让属性变成一个动态效果。

在浏览器控制台中会发现模板标签中出现了title属性，那我们把name的值改变一下，然后在看看对比。

name: 'abc'

定义

v-bind：属性值要去显示data里面的数据变量或者根据data里面的数据进行动态判断就可以用这个指令了。

v-once

通过上面的代码或者以前的代码中会发现，我们在代码中输出数据变量之后，在浏览器控制台改变数据时，页面也会重新渲染并更新页面上的数据。

如果我们只想让页面上的数据一直展示初始化时候的效果，当数据发生变化时，页面不去重新渲染，也不去更新页面上的数据，那我们就可以用到v-once指令了。

<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        template: "<div v-once>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>

我们只需在template模板中的div标签上加上v-once指令即可，无需携带参数。

定义

v-once：当指令用在标签上之后，当前标签中引用的数据只会在页面加载完成之后渲染一次，不会随着数据变化而更新DOM。

v-if

<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                show: true
            }
        },
        template: "<div v-if='show'>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>

在template模板中的标签上加上v-if指令，指令中绑定data里面的show变量

在浏览器页面上好像看不出什么效果，和正常的页面展示没什么区别。但是，当我们把data里面的show改为false之后会是什么效果呢？

const app = Vue.createApp({
    data(){
        return {
            message: 'Hello World',
            show: false
        }
    },
    template: "<div v-if='show'>{{message}}</div>"
});
const vm = app.mount('#root');

看到页面上没有任何内容显示，打开浏览器控制台可以看到root下面没有任何DOM被渲染出来，但是会有一个v-if的注释代码显示，这就是v-if指令帮我们做了一个判断，show为false的时候，就表示不显示改元素标签了。

定义

v-if：DOM元素中添加v-if指令之后，会根据v-if绑定的数据变量来判断DOM元素是否显示。

总结

本篇文章中，我们一起学习了vue的模板语法，在之后的文章中，我们会经常用到这些模板语法，希望大家能够熟练使用。