如何使用

v-text是用于绑定数据的指令。

最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值或者直接使用v-text指令。

假定一个Vue实例中有个数据title='hello world',那把它显示在文本中，可以用以下方法：

<h1>{{ title }}</h1>
或
<h1 v-text="title"></h1>

从上述虽然可以看出，在Vue3中和Vue2中使用v-text是没有什么差异的，但是Vue3的初始化数据是和Vue2有些差异的，我们可以使用setup函数初始化数据，此篇文章setup函数不加以延伸，后面文章会提到，下面让我们看看Vue3中是怎么初始化数据的。

<div id="app">
    <h1>{{title}}</h1>
</div>

<script src="../dist/vue.global.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            const title = ref('hello world')
            return {
                title
            }
        }
    }).mount("#app")
</script>

vue.global.js是Vue3打包后的依赖文件，需要的可以自己打包一下，上述代码中显示了Vue3的基本初始化，与Vue2的初始化方式完全不一样，对里面的方法就不解释了，后面文章会加以阐述，在此需要了解的可以看下官网。

自定义指令

Vue3中如何自定义一个指令？

在Vue3中还是使用directive方法来自定义指令，对比Vue2里面的生命周期发生了一点变化。下面是模仿v-text指令的功能自定义的一个简易的指令v-ctext。

<div id="app">
    <h1>{{title}}</h1>
    <h1 v-ctext="title"></h1>
</div>

<script src="../dist/vue.global.js"></script>
<script>
    const { createApp, ref } = Vue
    const app = createApp({
        setup() {
            const title = ref('hello world')
            return {
                title
            }
        }
    })
    // 自定义v-ctext绑定数据
    app.directive('ctext',{
        mounted(el,{value}){
            el.textContent=value;
        }
    })
    app.mount("#app")
</script>

以上事例，运行结果与v-text的功能一样，但是还有很多未考虑的情况，比如监听数据变化，有无标签销毁等情况，大家根据自己的需求可以去尝试一下。

textContent

从上述代码中el.textContent=value可以看出，我们在改变el的文本变化时用的是textContent，而不是innerText，虽然平时我们在用的时候感觉不到他们的差异，但是他们还是有一定差异性的。

textContent获取所有元素的内容，包括 script和style元素。相比之下， innerText只显示“人类可读”的元素。
textContent返回节点中的每个元素。相反， innerText知道样式并且不会返回“隐藏”元素的文本。

需要查看更多的差异性

总结

Vue3中v-text的使用与Vue2中没有什么差异，但是数据初始化发生了改变。
在我们学习中，我们可以先学会使用，再学会模拟实现对应的功能，最后再深入了解源码，相应你一定会有收获，当然学习方法因人而异。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之指令篇（一）｜8月更文挑战

如何使用

自定义指令

Vue3中如何自定义一个指令？

textContent

总结