VUE知识整理

• VUE 准备工作

  • Node.js 安装 版本号 V16.14.2

安装路径不要加空格！！！！！！！

下载 https://nodejs.org/en/

image.png

image.png

修改全局缓存路径

npm config set registry https://registry.npm.taobao.org
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
npm install -g yarn --registry=https://registry.npm.taobao.org

如果安装的node 是17以上，对 yarn 的指令执行有影响
需在命令行执行 $env:NODE_OPTIONS="--openssl-legacy-provider"

.vue 文件解释

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件（MyCup.vue）的示例：

一、项目脚手架

• 第一步：

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

• 第二步：

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

• 第三步：运行项目

  npm run serve
  npm run lint   #修复一些ESLint 的规则限制
  npm run build  #打包工程用已使用
  

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

二、VUE相关概念

• vue3 渐进式javaScript 框架

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

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

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

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

  
  
  image.png

• 内置指令：

  • 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、@mouseup、@mousedown、@mousemove

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

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

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

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

• 属性相关

  • data： 返回一个对象，这个对象是局部的状态，可以通过this直接引用