❤️万字详解Vue知识体系❤️（建议收藏）

心语：见到你第一面我就想认识你，他们斯文人把这个叫做一见钟情

话说现如今都2021年了，Vue3都已经发布好长一段时间了，如今再来写这篇网络上随处可见的文章意义在哪里呢？其实在写之前我也一直在思考这个问题，最后我得出的原因主要有以下几点：

• 用vue做过一些项目，也实现了一些功能，但是总感觉还是缺乏知识体系
• 日常开发多数围绕业务需求展开，也没有仔细深入的细化一些知识点，导致有的东西可能时间长了会模糊
• 正所谓温故而知新，虽然基础的东西可能看似简单，但是通过自己的想法输出出来，并且时常回顾，我认为还是会有意想不到的收获的。

思维导图

在开始正文之前，需要说明一下，文章中每一个字都是我逐一编写的，难免会有疏漏或者错误，也恳请大家的理解，并期望留言区予以批评指证。本文主要介绍关于模版语法相关，因此不会过多涉及到js逻辑方面。下面是我整理的思维导图简要的来说明一下文章的内容脉络，这样不仅利于文章的编写，也很利于记忆。

1.vue的简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化 的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。具体可参阅 vue官方文档

2.如何引入Vue

初学vue，可能会觉得跟刚开始使用原生HTML.CSS JavaScript有所差异，所以对于初学者而言，其实还是建议使用创建.html文件的方式来学习vue框架，因为我以前也是这么走过来的，可以在html文件中引入下载好的vue.js或者使用cdn的方式(建议使用开发环境下的cdn)引入即可。下面为cdn的链接，有想使用其他框架的cdn可以查阅 BootCDN，后续的话一般不会用这样引入。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

3.内置指令

关于vue，它内置了我很多指令，其实也是自定义指令，只不过底层做了很多的处理而已。Vue中指令都是以 v- 开头，接下来我们就先来看看都有哪些指令吧

• v-clock
  该指令主要是为了防止页面加载时出现闪烁问题，这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，编译结束前标签一直有v-cloak属性。

<style>
        [v-cloak]{
   
            display: none;
        }
    </style>
<div id="app">
    <div v-cloak>
        {
   {
   content}}
    </div>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   
            content:"我是幕筱佳"
        }
    })
</script>

• v-pre
  跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

 <div id="app">
    <!--  显示的是{
   {
    hello }}跳过编译过程 -->
    <span v-pre>{
   {
    content}}</span>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   
            content:"我是幕筱佳"
        }
    })
</script>

v-text
更新元素的 textContent（标签内文字）。如果要更新部分的 textContent ，需要使用Mustache语法进行插值。

<div id="app">
    <div v-text="content">
    </div>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   
            content:"我是幕筱佳"
        }
    })
</script>

• v-html
  更新元素的innerHTML (html标签会被编译)。
  注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<div id="app">
    <div v-html="content">
    </div>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   
            content:"<h1>我是幕筱佳</h1>"
        }
    })
</script>

• v-show
  控制元素的显示与隐藏，
  原理：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display的属性

<div id="app">
    <div v-show="flag">显示</div>
    <div v-show="flag">未显示</div>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   
           flag:true,        
        }
    })
</script>

• v-once
  该指令只会渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<div id="app">
    <span v-once>{
   {
    content}}</span>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   
            hello:"我是幕筱佳"
        }
    })
</script>

• v-model
  常用于表单元素数据的收集，当视图发生变化的时候，数据也会跟着同步变化，

<div id="app">
    <input v-model="content">
    <div>{
   {
   content}}</div>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   
            content:""
        }
    })
</script>

• v-on
  用于绑定事件监听，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。该指令也可以缩写为@符号。

<div id="app">
    <button v-on:click="onClick">点我</button>
     <!--  简写形式  -->
      <button @click="onClick">点我</button>
</div>
<script>
    var vue = new Vue({
   
        el:"#app",
        data:{
   },
        methods:{
   
        	onClick() {
   
        		console.log("点我干嘛？");
			}
        }
    })
</script>

• v-bind
  v-bind 指令被用来响应地更新 HTML 属性，可以缩写为:属性名

<div id="app">
    <a v-bind:href="url">{
   {
   target}}</a>
    <!--  简写形式  -->