VUE知识点汇总：

已安装好node.js 16.14.2

一、项目脚手架

• 第一步：

npm install -g @vue/cli 或 yarn add -g @vue/cli

• 第二步：

vue create 项目名字（尽量用英文）

• 第三步：运行项目

npm run serve

安装新的软件包，使用npm i 依赖包的名字 或 yarn add依赖包的名字

二、vue相关概念：

• vue3渐进式javaScricpt框架

• 特点：组件化、虚拟dom、diff算法

• vue文件以vue结尾，是一个SFC（Single-File-Component）单文件组件

• 遵循MVVM 架构、Model-ViewModel, 重点是实现了数据的双向绑定，指令用的是v-modle、v-bind、v-on

• 理解M-A-VM模型，VlewModel 是实现虚拟dom、diff算法的核心点

• 

   

• 内置指令：

  • v-text：插值绑定、语法也可以是{{ }}

  • v-html:绑定html代码片段，相当于是原生的innerHtml、有安全性问题，容易XSS攻击

  • v-show：显示一个dom元素，dom元素不会被删除、

  • v-if、v-else-if、v-else:动态显示一个dom元素，条件成立，dom元素才会真正显示出来，否则移除（不新增）真实dom

  • v-for ：循环当前所在的元素，当前！当前！当前！

  • v-on：简写@ 绑定事件，鼠标事件，键盘事件，例如：@click，@dbclick、@mounseup、@mousedown、@mousemove

  • v-bind:绑定属性指令，是组件的prop或者attribute（width、height、style）

  • v-model：值的双向绑定，通常用与input（text、password、radio、checkbox、number）、select

  • v-slot：声明具名插槽或是期望接收props的作用域插槽

    <!-- 具名插槽 -->
    <BaseLayout>
      <template v-slot:header>
        Header content
      </template>
    ​
      <template v-slot:default>
        Default slot content
      </template>
    ​
      <template v-slot:footer>
        Footer content
      </template>
    </BaseLayout>
    ​
    <!-- 接收 prop 的具名插槽 -->
    <InfiniteScroll>
      <template v-slot:item="slotProps">
        <div class="item">
          {{ slotProps.item.text }}
        </div>
      </template>
    </InfiniteScroll>

    • v-cloak：防止闪现指令、 v-once:静态内容指令、v-pre：跳过编译指令