[vue]精弘技术部试用期学习笔记 I

精弘技术部试用期学习笔记（vue）

什么是vue？

我个人对 vue 的理解

是把 html\css\js 三件套融合起来的结构，同时用组件化的思维把一个页面装填起来

同时让页面形成树状结构

优点是方便多人员维护 提高代码复用性

如何创建一个 vue 项目？

我这里使用的是 vite+vue 的轻量化项目，使用 pnpm 包管理器

1. 安装 node.js (建议使用长期维护版)

node -v
//cmd 查询安装版本 同时确认安装完成

2. 安装 pnpm

npm install -g pnpm
//cmd 安装 pnpm -g代表全局安装
pnpm -v
//cmd 查询安装版本 同时确认安装完成

3. 用 pnpm 创建 vue 项目

//创建一个vite-vue实例
npm create vite {{name}} --template vue

来看一下 vue项目

的目录ba

1. .vscode文件夹

配置文件

2. public文件夹

公共文件 里面只有一个 svg 的图标（不用管

3. src文件夹

资源文件夹：大多数你写的代码存放的地方

也包括各种执行的ts js文件

4. .gitignorn

在你 git 的时候把不需要的依赖给省略 git

用于减少 git量 或者省略需要保密的文件

5. index.html

整个 vue 项目的起始（接下来会细讲）

6. package.json

表明了你项目中的依赖项，方便他人使用 pnpm i 来安装你的依赖

7. README.md

项目简介：你可以把对你项目的描述写在这里

8. vite.config.js

vite 的配置文件

vue的挂载逻辑

index.html[一切的开始] >>执行-> src/mian.js

main.js >>取用-> app.vue[vue项目的根] >>挂载-> index.html

这一套操作实现了 把vue挂载在html上的操作

让之后的 vue组件 都能挂载在 app.vue 上

vue语法

v-指令

1. v-bind

	<div v-bind:id="idName"></div>
	
	<div :id="idName"></div>
	//简写

作用：将变量绑定到属性值上，并实时同步

• 动态绑定多个值

	const objectOfAttrs = {
		id: "idName",
		class: "className"
	}

	<div v-bind="objectOfAttrs"></div>

2. v-on

	<div v-on:click="clickFunc"></div>
	
	<div @click="clickFunc"></div>
	//简写

作用：监听dom事件

3. v-if/v-else

	const b = true;

	<div v-if="b">将被渲染</div>
	<div v-else>无法被渲染</div>

4. 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组件

5. 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
	//取用其值