精宏技术部试用期学习笔记（vue）
什么是vue？
我个人对 vue 的理解
是把 html\css\js 三件套融合起来的结构，同时用组件化的思维把一个页面装填起来
同时让页面形成树状结构
优点是方便多人员维护 提高代码复用性
如何创建一个 vue 项目？
我这里使用的是 vite+vue 的轻量化项目，使用 pnpm 包管理器
- 安装 node.js (建议使用长期维护版)
node -v
//cmd 查询安装版本 同时确认安装完成
- 安装 pnpm
npm install -g pnpm
//cmd 安装 pnpm -g代表全局安装
pnpm -v
//cmd 查询安装版本 同时确认安装完成
- 用 pnpm 创建 vue 项目
//创建一个vite-vue实例
npm create vite {{name}} --template vue
来看一下 vue项目
的目录ba
- .vscode文件夹
配置文件
- public文件夹
公共文件 里面只有一个 svg 的图标（不用管
- src文件夹
资源文件夹：大多数你写的代码存放的地方
也包括各种执行的ts js文件
- .gitignorn
在你 git 的时候把不需要的依赖给省略 git
用于减少 git量 或者省略需要保密的文件
- index.html
整个 vue 项目的起始（接下来会细讲）
- package.json
表明了你项目中的依赖项，方便他人使用 pnpm i 来安装你的依赖
- README.md
项目简介：你可以把对你项目的描述写在这里
- vite.config.js
vite 的配置文件
vue的挂载逻辑
index.html[一切的开始] >>执行-> src/mian.js
main.js >>取用-> app.vue[vue项目的根] >>挂载-> index.html
这一套操作实现了 把vue挂载在html上的操作
让之后的 vue组件 都能挂载在 app.vue 上
vue语法
v-指令
- v-bind
<div v-bind:id="idName"></div>
<div :id="idName"></div>
//简写
作用：将变量绑定到属性值上，并实时同步
- 动态绑定多个值
const objectOfAttrs = {
id: "idName",
class: "className"
}
<div v-bind="objectOfAttrs"></div>
- v-on
<div v-on:click="clickFunc"></div>
<div @click="clickFunc"></div>
//简写
作用：监听dom事件
- v-if/v-else
const b = true;
<div v-if="b">将被渲染</div>
<div v-else>无法被渲染</div>
- v-for
const arr = [{id:1,num:10}]
const add = () => {
//添加元素至arr
}
<vue1 v-for="a in arr" :id="a.id" :num="a.num"></vue1>
<!-- 能够在 arr 添改时实时变化 vue1 -->
作用：动态创建多个vue组件
- v-html
const rawHtml = '<span style="color:red">red</span>'
<span v-html="rawHtml"></span>
作用：将变量里的 html 字符串执行
动态参数
语法：
<a :[attrName]="varName"></a>
响应式基础
语法：
import { ref } from "vue"
const a = ref(0)
const a_val = a.value
//取用其值
import { reactive } from "vue"
const state = reactive({ count:0 })
const sc = state.count
//取用其值