引言

本文将带您踏上Vue小白之旅-简单指令篇，深入探索Vue指令的奥秘，助您从容驾驭这一关键概念。让我们一同启程，探寻Vue指令的精彩世界！

操作{{}}

在上一节内容，我们讲到可以使用{{ }}来获取数据源中的数据，那么当我们读取到数据并且想对属性进行一些如字符串反转，切换等操作时，我们该怎么办呢？我们先来一起看看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>{{count*2}}</h2>
        <h2>{{message.split(' ').reverse().join(' ')}}</h2>
        <h1>{{getReverse()}}</h1>
        <h2>{{emo?'难过':'开心'}}</h2>
        <button @click = "change">切换心情</button>
    </template>
    
    <script>
        const App = {
            template:'#my-app',
            data(){
                return {
                    message:'🐂 🐎 🤡',
                    count:100,
                    emo:false
                }
            },
            methods:{
                getReverse(){
                    return this.message.split(' ').reverse().join(' ')
                },
                change(){
                    this.emo = !this.emo
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

1 .运算操作

在数据源中存入了Number类型的count，在template中引用，当我们需要输出二倍的count的时候，我们要怎么办呢？更改数据源?那是万万不可的，要是还有其他的地方需要使用数据源，那一处更改，处处更改。我们可以直接在{{ }}中来对count进行*2的操作，此时在浏览器上展现的效果为200

2 .字符串反转

操作message

在数据源中有一个字符串类型的message，在template中引用，当我们要对这串字符串进行反转的时候，该怎么操作？同运算操作一样，我们可以直接在{{ }}中对message进行直接操作。对于给定的字符串（message），按照空格进行分割（split），将单词顺序反转（reverse），然后用空格连接（join），最终得到反转后的消息。

定义方法

除了直接操作message，我们还可以在method中直接定义一个方法，在template中调用就可以实现相同的效果。

3.切换心情

在一些时候，我们需要对值进行切换，在这里，我们点击button按钮，就可以让心情在开心和难过之间转换，在Vue里，我们使用@来进行绑定事件，在这里我们绑定了一个点击事件，在数据源中有一个布尔类型的属性，每当我们点击按钮就对他进行取反，并且我们在{{}}中使用三元运算符设定如果emo为true就显示开心。

注意：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。所以进行的任何改变我们都可以在浏览器中立即看见。

v-text 和 v-html

1 .v-text

首先我们应该明白，我们的指令应该放在哪里。

<template id="my-app">       
        <div v-text="msg">你好</div>
    </template>

指令放在标签里面，我们在数据源中有一个msg:hello，当我们未使用v-text时，浏览器应该会出现一个“你好”，当我们添加v-text = "msg"时，页面上的内容变成了 hello，总结一下，v-text会将原本的内容使用msg覆盖。

2 .v-html

想想一种场景，当我们拿到数据时，数据上存在h2标签，但是我们直接用{{}}获取会出现什么效果

<template id="my-app">
        <div>{{info}}</div>
        <div v-html="info"></div>
    </template>

<script>
        const App={ 
            template:'#my-app',
            data() {
                return {
                    msg:'hello',
                    info:'<h1>这是一个文本</h1>'
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>

结果是：h1标签没有被识别，直接显示info中的内容

那我们该怎么办?v-html就是用来解决这个问题的，当我们加上v-html指令后，h1标签就会被识别到

来看效果：

v-once

仅渲染元素和组件一次，并跳过之后的更新。

什么意思？就是使用v-once以后，仅在页面加载时渲染一次，以后不再改变。

<template id="my-app">
       <h2>{{count}}</h2>
       <h2 v-once>{{count}}</h2>
       <button @click="add">+1</button>
    </template>

这里我们用的是同一个count，没有加v-once的count会在点击按钮后继续改变，而添加了v-once的却不会改变

v-pre

跳过该元素及其所有子元素的编译。很简单，我们直接看效果：

<template id="my-app">
       <h2 v-pre>{{message}}</h2>
    </template>

此时我们不会读取在数据源中messag的内容，直接显示 {{message}}

结尾

Vue中还有许多其他的指令，在下一篇的内容里，我将为大家带来另外的一些重要的指令。

Vue小白之旅-简单指令（一）

引言

操作{{}}

v-text 和 v-html

v-once

v-pre

结尾