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：跳过编译指令