Vue3基础知识（待续）
Vue是什么
构用户界面的js的渐进式框架，基于htlm、css、js，并提供声明式组件化的编程模型，帮你高效开发用户界面。无论简单或复杂的界面Vue都可以胜任。
vue是一个框架，同时也是一个生态。因为有很多程序员支持vue，开发了很多如轮播图的东西就形成了一个生态。考虑到web世界的多样性，vue注重灵活性和可被逐步继承。可在一个完整项目中使用vue，或某一个功能上使用vue，或某一个html中使用vue的某个功能。
后期主要是一个完整的项目中使用Vue。
vue分为vue2和vue3。vue3涵盖了vue2，vue3增加了很多新的特性。
官网：cn.vuejs.org v2.cn.vuejs.org
Vue API风格
vue2和vue3新老版本的问题，代码书写风格不一样：选项式API（vue2）、组合式API（vue3）。
使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data 、methods 和(mounted。选项所定义的属性都会暴露在函数内部的this 上，它会指向当前的组件实例.
具体参见Vue2如Vue2基础入门_阳光明媚UPUP的博客-CSDN博客
通过组合式API，我们可以使用导入的API函数来描述组件逻辑。
组合式api如：
这两种风格的api虽然写法完全不同，但是效果确实完全相同的。
当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式API
当你打算用Vue构建完整的单页应用，推荐采用组合式API＋单文件组件
学习Vue前的准备
熟悉命令行
要求安装15.0或更高版本的nodejs cmd下node -v检测
nodejs简单了解
node.js：是一个开源的，跨平台的javaScript运行环境，简单来说它是一款应用程序，是一款软件，可运行javaScript。
nodejs可开发服务器端应用，nodejs就可在服务器中进行处理，将视频发给用户端。将资源返回给浏览器解析。nodejs就运行在服务器端，将用户的请求做处理，并把资源返回给浏览器。
nodejs可开发工具类应用如webpack、vite、babel，这三个工具可提高前端开发的效率和质量，都是借助于是借助于nodejs。
nodejs可以开发桌面端应用：vscoder、figma、postman，这三都借助于electron框架，electron又是借助于nodejs开发出来的。
nodejs下载安装
Node.js
选中LTS长期支持版下载
旧版本可在中文网站中全部按转包中CNPM Binaries Mirror
下载 | Node.js 中文网
下载.mis直接安装，途中不用勾选那个自动install的选框。
下载zip参考【转载】windows下Nodejs zip版下载安装及环境变量配置_nodezip版如何配置_AllTimeLow丶的博客-CSDN博客
创建Vue项目
进入空文件夹，上方cmd敲，会进入到该目录，然后 npm init vue@latest
D:\VueProject>npm init vue@latest
Vue.js - The Progressive JavaScript Framework
√ Project name: ... vue-base 起个项目名，不要有大写字母
√ Add TypeScript? ... No / Yes //添加TS默认NO直接回车即可
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes 添加路由，先no
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / YesScaffolding project in D:\VueProject\vue-base... //全部no默认，然后回车即可。
Done. Now run:
cd vue-base
npm install
npm run dev
D:\VueProject>
然后执行它的提示代码即可：
先cd vue-base
然后执行cnpm install 也可安装cnpm后执行cnpm install
安装cnpm命令为npm install -g cnpm --registry=https://registry.npm.taobao.org
然后使用cnpm install
然后npm run dev运行项目 运行成功后复制地址到浏览器url输入访问即可。
也可使用vscoder打开一个空文件夹，然后ctrl+`在终端里敲上面的初始化代码等。
开发环境
vscoder+volar扩展
vscoder打开vue项目根目录
由于App.vue是字体为灰色，我们在vsccoder左侧扩展里加上一个vue language feature volar
这时App.vue就有颜色了
Vue项目目录结构
.vscode --- vscode工具的配置文件
node_modules --- Vue项目的运行依赖文件夹 执行npm install安装的就是它
public --- 资源文件夹（浏览器图标)
src --- 源码文件夹 进行编码的文件夹 写代码的文件夹
.gitignore --- git忽略文件
index.html --- 入口的HTML文件
package.json --- 信息描述文件 依赖vue3，开发环境dev详细依赖vite脚手架类似webpack
README. md --- 注释文件
vite.config.js --- vue配置文件 做配置，如跨域、打包
模板语法
基于html的模板语法，是我们能够声明式的将其组件实例的数据绑定到呈现的dom上，所有的vue模板都是语法层面合法的html，可被符合规范的浏览器和html解析器解析。
1.文本插值
最基本的数据绑定形式，采用双大括号mustache语法
我们可先删除vue项目src下的components目录下所有的东西，然后App.vue中只保留
template和script上下顺序可颠倒，template建议放在script上面。
我们在App.vue中写入
模板语法
{{msg}}
重新运行终端npn run dev访问即可（后期保存自动更新页面）。发现还有样式剧中，样式在main.js中引入了资源文件夹assets文件夹下的main.css删除import语句即可。
assets为资源文件夹，日后公共css及实现都可放在这里，目前assets中资源直接删除掉即可。
2、使用js表达式
仅支持单一表达，即一个有结果的js表达式，可放在return语句中的。
不支持var，不支持for这种换行的表达式，可三元表达式。
模板语法
{{msg.split("").reverse().join("")}}
{{number+1}}
{{ok?'yes':'no'}}
3、原始html
双大括号将会将数据插值为纯文本，而不是HTML。若想插入HTML，你需要使用vhtml指令
模板语法
{{url}}
属性绑定
双大括号不能在HTML attributes 中使用。想要响应式地绑定一个attribute，应该使用v-bind指令。
App.vue中改成引入组件文件夹中的HelloWorld.vue
src下components下的HelloWorld.vue
测试
一次性绑定多个属性
刷新网页即可。所有的标签的属性都可通过这个v-bind为其绑定vue的data值
条件渲染
在vue中，提供了条件渲染，这类似于JavaScript中的条件语句
v-if、v-else、v-else-if、v-show
先src的components文件夹下创建ifDemo.vue
条件渲染
你能看见我吗？
那你还是看看我吧
A
B
C
Not A/B/C
你能看见我吗？
在App.vue中引入：
v-if是基于对标签的渲染与否，v-show是基于display属性设置为true或false。
总的来说，ve-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好;如果在运行时绑定条件很少改变，则v-if会更合适。
v.if 也是惰性的:如果在初次渲染时条件值为false，则不会做任何事。条件区块只有当条件首次变为true时才被渲染。
列表渲染
我们可以使用v-for指令基于一个数组来渲染一个列表。v-or指令的值需要使用item in items 形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名
src下的components中创建ListDemo.vue
列表渲染
{{item}}
{{item}}--{{ index }}
{{item}}
{{item}}--{{ index }}
{{ item }}
{{ value }}-{{ key }}--{{index}}
App.vue中引入
通过key管理状态
Vue默认按照"就地更新"的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染
为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的key attribute:使用key可用节省开销。
src的component中创建KeyDemo.vue
key属性添加到v-for循环中
{{item}}
{{ item.name }}
链接
App.vue中引入
事件处理
我们可以使用von指令(简写为 @)来监听DOM事件，并在事件触发时执行对应的JavaScript。用法:on:click="methodName”或@click="handler"
事件处理器的值可以是
内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似)方法事件处理器:一个指向组件上定义的方法的属性名或是路径
事件参数
事件参数可以获取event对象和通过事件传递数据
事件修饰符
在处理事件时调用event.preventDefault(或event stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好
为解决这一问题，Vue为v-on提供了事件修饰符，常用有以下几个:
.stop 阻止事件冒泡
.prevent 阻止默认事件
.once4 事件只会被触发一次
.enter 回车按键触发的具体参考
地址:https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers
demo如下
src下的component创建EventDemo.vue
事件处理
{{ count }}
{{ number }}
{{ number }}
{{ number }}
{{ item }}
{{ item }}
百度链接
百度链接
测试事件冒泡
测试事件冒泡
App.vue中加上
数组变化的侦测
1变更方法：Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2、替换一个数组
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变
(immutable)方法，例如fiter)，concat)和islice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的数组。
src下的components中创建ArraysDemo.vue
数组变化侦听
- {{ item }}
数组1
{{ item }}
数组2
{{ item }}
App.vue中引入
计算属性
模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。
src下的components中新建ComputedDemo.vue文件
{{ user.name}}
{{ user.hobbies.length>0? 'yes':'no' }}
{{ userContent }}
{{ userContents() }}
App.vue中引入
计算属性缓存vs方法
你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：计算属性:计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算
方法:方法调用总是会在重渲染发生时再次执行函数