前端环境
编码工具: VSCode
依赖管理:NPM
项目构建: Vuecli
NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。
依赖管理NPM安装配置
NPM官网
https://nodejs.org/en/download/
下载安装完成后
验证 Node.js 是否已成功安装
node -v
在nodejs安装目录创建node_global和node_cache文件夹
cmd命令，依次输入：
npm config set prefix "D:\Nodejs\node_global"
npm config set cache "D:\Nodejs\node_cache"
npm config set prefix “D:\Nodejs\node_global”：将 Node.js 全局安装包的安装路径设置为 “D:\Nodejs\node_global”。在使用 npm install -g 命令全局安装 Node.js 模块时，将会将模块安装到指定的目录中。
npm config set cache “D:\Nodejs\node_cache”：将 Node.js 模块缓存路径设置为 “D:\Nodejs\node_cache”。在使用 npm install 命令安装 Node.js 模块时，将会将模块缓存到指定的目录中。
修改系统环境变量
F:\Program Files\nodejs\node_global
NODE_PATH
F:\Program Files\nodejs\node_modules
使用npm install express -g全局安装 Express 模块
说明文件权限不够，允许完全控制得以解决
更改 npm 的默认源为淘宝源
npm config set registry https://registry.npm.taobao.org
恢复默认的 npm 官方源
npm config set registry https://registry.npmjs.org
查看当前npm 源的 URL
使用淘宝源全局安装 cnpm。cnpm 是一个基于 npm 的淘宝定制版，可以在国内更快地安装 Node.js 包
npm install -g cnpm --registry=https://registry.npm.taobao.org
创建Vue项目
npm init vue@latest
安装依赖npm install
VITE v5.0.11 ready in 479 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
模板语法
文本插值{{ }}
最基本的数据绑定形式是文本插值，“Mustache”语法
支持三元表达式
<template> <p>{{ msg }}</p> </template> <script> export default{ data(){ return{ msg:"123" } } } </script>
v-html
插入HTML，使用v-html，而{{ }}只是插入纯文本
<template> <p>{{ msg }}</p> <p>{{ ok ? 'yes':'no' }}</p> <p><span v-html="insertHtml"></span></p> </template> <script> export default{ data(){ return{ msg:"123", ok:true, insertHtml:"<a href='https://www.baidu.com'></a>" } } } </script>
属性绑定
{{ }}不能在attributes中使用，绑定arrtibute需要使用v-bind, v-bind的缩写:className
v-bind将元素的attribute与组件的dynamicld属性保持一致。如果绑定的值是null遇undefined，则将attribute从渲染的元素上移除
<template> <div v-bind:class="divColour"> 123 </div> </template> <script> export default{ data(){ return{ divColour:"Colourclass" } } } </script>
v-bind简写
<template> <div :class="divColour"> 123 </div> </template> <script> export default{ data(){ return{ divColour:"Colourclass" } } }
条件渲染
v-if 、v-else-if 、v-else
<template> <!-- <div v-if="no">看不见</div> <div v-if="ok">看得见</div> <div v-else>123</div> --> <div v-if="no">1</div> <div v-else-if="ok">2</div> <div v-else>3</div> </template> <script> export default{ data(){ return{ ok:true, no:false } } } </script>
v-show
666
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
v-if是惰性的，也是真实的按条件渲染，应为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。条件区块只有条件首次变为true时才被渲染。
v-show元素无论初始条件如何，始终会被渲染，只有CSS的display属性会被切换
v-if有更高的切换开销，而v-show有更高的初始化渲染开销。
v-if应用场景更适合初始化，只渲染一次
v-show应用场景更适合频繁的切换
列表渲染v-for
<div> <p v-for="name in names">{{ name }}</p> </div>
Index，数组下标
<div> <p v-for="(name,index) in names">{{ index }} : {{ name }}</p> </div>
可以使用of代替in，of更接近javaScript迭代器语法
<div> <p v-for="(name,index) of names">{{ index }} : {{ name }}</p> </div> <div> <p v-for="(value,key,index) of user"> {{ key }} :{{ value }} : {{ index }} </p> </div>
状态管理
Vue默认通过“就地更新”策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue就地更新每一个元素，不会移动位置，确保元素在原本的指定位置上。
为给Vue一个提示，以便可以跟踪每个节点的标识，从而重用和重新排序现有元素，需为每个元素提供唯一的attribute(key)
v-for中添加key是通过v-bind绑定特殊attribute
推荐在任何时候为v-for提供唯一的attribute(key)
实际场景中不推荐使用index作为key，使用数据源中的唯一值，如数据库表中的唯一ID
<div> <p v-for="(value,key,index) of user" :key="index"> {{ key }} :{{ value }} : {{ index }} </p> </div>
事件
用法：v-on:click=”handler” 或 @click=”handler”
事件
- 内联事件：事件被触发执行的内联javaScript语句(类似onclick)
- 方法事件：指组件上指定的方法的属性名或路径
内联事件处理
内联事件通常用于简单场景
+1
{{ count }}
方法事件处理
推荐使用
<button @click="addCount">+1</button> <p>{{ count }}</p> methods:{ addCount(){ this.count +=1; } },
事件传参
<input type="text" v-model="message"> <button @click="addCount(message.$event)">+1</button> <p>{{ message }}</p> methods:{ //event对对象 addCount(msg,e){ console.log(msg); //e.target.innerHTML ="+"+this.count this.count +=1; } },
事件修饰符
处理事件时经常调用event.stopPropagation()或event.preventDefault()。
Vue为v-on提供了常用的修饰符
.stop .privent .once .enter等
.privent阻止触发
<a @click.prevent="clickhandle" href="https://www.baidu.com/">baidu</a>
.stop 阻止冒泡事件
<div @click="clickhandle"> <p @click.stop="addCount('P')">冒泡</p> </div>
以下类推
.once只执行一次
.enter回车触发
…
小白浅学Vue3（中）：https://developer.aliyun.com/article/1431692
