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

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

v-text指令是咱们在项目中常常用到的指令之一，那么这个指令它是怎么实现的呢，在Vue3和Vue2中它们的使用方式是否有差别呢，下面让咱们一探究竟。

如何使用

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，虽然平时咱们在用的时候感受不到他们的差别，可是他们仍是有必定差别性的。

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

须要查看更多的差别性

总结

1. Vue3中v-text的使用与Vue2中没有什么差别，可是数据初始化发生了改变。

2. 在咱们学习中，咱们能够先学会使用，再学会模拟实现对应的功能，最后再深刻了解源码，相应你必定会有收获，固然学习方法因人而异。