Vue3 梦开始的地方

🎉：作为一个后端菜鸟，因为有个全栈的梦想，自学Vue,跟随满大人的步伐出发~

一.简介

1.1 什么是Vue

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

MVVM（Model-View-ViewModel）架构

『View』：视图层（UI 用户界面）
『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）
『Model』：数据层（存储数据及对数据的处理如增删改查）

1.2 选项式 API (Options API) 与组合式 API (Composition API)

Vue 的组件可以按两种不同的风格书写：选项式API 和 组合式API

从图上的对比不难看出组合式API看着更清晰，由于我根本没过Vue之前的内容，根本不知道啥是选项是API所以没有纠结点😂

由于我根本不知道老的Vue有啥特性，所以完全谈不上新特性，对我来说一切都是新的，想了解新特性的哥哥们，去官网把~

二.构建项目

2.1 构建项目

要求安装：node.js -> 16+ (建议通过nvm讲解，关于nvm的使用请搜索相关内容自行解决)

打开你的控制台和我一起~

scss 复制代码

wangsiyao@wsy s01 % npm init vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
✔ Project name: ... vite-demo
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /Users/wangsiyao/WebstormProjects/study/s01/vite-demo...

Done. Now run:

  cd vite-demo
  npm install
  npm run dev

上面就是我们使用vite脚手架构建了一个Vue项目，设置了项目名字叫vite-demo,使用了TS语法，然后搜的一下他就给你生成了一个热乎的Vue项目。

在VsCode中打开我们的项目，从下面拉起终端框(不看老师的视频，我都找不到这个JB终端框！)然后输入

perl 复制代码

wangsiyao@wsy vite-demo % npm install

added 43 packages, and audited 44 packages in 35s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
wangsiyao@wsy vite-demo %

这样，项目需要的依赖就搞定了

2.2 目录结构

Vite目录 public 下面的不会被编译可以存放静态资源

assets 下面可以存放可编译的静态资源

components 下面用来存放我们的组件

App.vue 是全局组件

main ts 全局的ts文件

index.html 非常重要的入口文件（webpack，rollup 他们的入口文件都是enrty input 是一个js文件而Vite 的入口文件是一个html文件，他刚开始不会编译这些js文件只有当你用到的时候如script src="xxxxx.js" 会发起一个请求被vite拦截这时候才会解析js文件）

vite config ts 这是vite的配置文件具体配置项后面会详解

VsCode Vue3 插件推荐 Vue Language Features (Volar)

2.3 SFC 语法规范

*.vue 件都由三种类型的顶层语法块所组成：

当我们打开App.vue的时候，里面长这样

xml 复制代码

<script setup lang="ts">
//布拉布拉布拉
</script>

<template>
 //布拉布拉布拉
</template>

<style scoped>
//布拉布拉布拉
</style>

<template>

每个 *.vue 文件最多可同时包含一个顶层 <template> 块。
其中的内容会被提取出来并传递给 @vue/compiler-dom，预编译为 JavaScript 的渲染函数，并附属到导出的组件上作为其 render 选项。

<script>

每一个 *.vue 文件可以有多个 <script> 块 (不包括)。
该脚本将作为 ES Module 来执行。
其默认导出 的内容应该是 Vue 组件选项对象，它要么是一个普通的对象，要么是 defineComponent 的返回值。

<script setup>

每个 *.vue 文件最多只能有一个
该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行。

<style>

一个 *.vue 文件可以包含多个 <style> 标签。
<style> 标签可以通过 scoped 或 module attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混

三.模板语法

3.1 模板插值语法

在<script>声明一个变量可以直接在template 使用用法为{{变量名称}},在模板语法中支持运算和操作API

xml 复制代码

<template>
  <div>{{ message }}</div>
  <div>{{ message == 0 ? '我是小满0' : '我不是小满other' }}</div>
  <div>{{ message  + 1 }}</div>
  <div>{{ msg.split('，') }}</div>
</template>
 
<script setup lang="ts">
const message:number = 1
const msg:string = "我，是，小，满"
</script>
 
<style>
</style>

3.2 指令

v- 开头都是vue 的指令

v-text 用来显示文本

v-html 用来展示富文本

*v-if 用来控制元素的显示隐藏（切换真假DOM）

v-else-if 表示 v-if 的"else if 块"。可以链式调用

v-else v-if条件收尾语句

*v-show 用来控制元素的显示隐藏（display none block Css切换）

*v-on 简写@ 用来给元素添加事件

*v-bind 简写: 用来绑定元素的属性Attr

*v-model 双向绑定

v-for 用来遍历元素

v-on修饰符冒泡案例

v-once 性能优化只渲染一次

v-memo 性能优化会有缓存具体请看我的掘金

Vue3.2 新增 v-memo

上面有几个比较常用的，单独说明:

3.2.1 v-if与v-show

v-if基于表达式值的真假性，来条件性地渲染元素或者模板片段。
v-show基于表达式值的真假性，来改变元素的可见性。

在效果上看v-if和v-show都可以让一个模块看不见，但是这个看不见是不一样的，他俩属性都是True的时候,都展示的出来，当"false"的时候，就有区别了：

xml 复制代码

<template>
    <div>
    <h1 v-if = "true"> v-if = "true" 效果 </h1>
    <br/>
    <h1 v-show = "true"> v-show = "true" 效果 </h1>
  </div>
  <br/>
  <div>
    <h1 v-if = "false"> v-if = "false" 效果 </h1>
    <br/>
    <h1 v-show = "false"> v-show = "false" 效果 </h1>
  </div>
</template>

从浏览器上检查结构的时候我们发现，v-if = "false"的时候指给把标签给注释掉了，而v-show = "false"的时候添加了一条display的属性给隐藏了，所以从性能上来说v-show的性能更高

3.2.2 v-on

是给元素绑定事件监听器。

缩写： @
期望的绑定值类型： Function | Inline Statement | Object (不带参数)
参数： event (使用对象语法则为可选项)
修饰符
- .stop - 调用 event.stopPropagation()：用于阻止捕获和冒泡
- .prevent - 调用 event.preventDefault()：用于阻止浏览器的默认行为，例如表单的提交
- .capture - 在捕获模式添加事件监听器。
- .self - 只有事件从元素本身发出才触发处理函数。
- .{keyAlias} - 只在某些按键下触发处理函数。
- .once - 最多触发一次处理函数。
- .left - 只在鼠标左键事件触发处理函数。
- .right - 只在鼠标右键事件触发处理函数。
- .middle - 只在鼠标中键事件触发处理函数。
- .passive - 通过 { passive: true } 附加一个 DOM 事件。
详细信息

事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。

当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。

xml 复制代码

<!-- 方法处理函数 Vue会默认传递event-->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 通过$event可以获取到浏览器参数的event对象-->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

3.2.3 v-bind

动态的绑定一个或多个属性，也可以是组件的 prop。

缩写： : 或者 . (当使用 .prop 修饰符)
期望： any (带参数) | Object (不带参数)
参数： attrOrProp (可选的)
修饰符
- .camel - 将短横线命名的 attribute 转变为驼峰式命名。
- .prop - 强制绑定为 DOM property。3.2+
- .attr - 强制绑定为 DOM attribute。3.2+
用途

当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。

在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。

当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。

当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。

xml 复制代码

<!-- 绑定 属性 -->
<img v-bind:src="imageSrc" />

<!-- 动态 属性名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。"prop" 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />

<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

Tips :在一个标签中，可以有一个动态的属性和一个静态的属性，比如<div style="color:red" :style="style">aaa</div>但是这样动态的属性会覆盖掉静态的，

个人粗浅的认为，这个标签就是把函数中的内容绑到标签上，并且是动态的

3.2.4 v-model

在表单输入元素或组件上创建双向绑定。

期望的绑定值类型：根据表单输入元素或组件输出的值而变化
仅限：
- <input>
- <select>
- <textarea>
- components
修饰符
- .lazy - 监听 change 事件而不是 input
- .number - 将输入的合法字符串转为数字
- .trim - 移除输入内容两端空格

xml 复制代码

<template>
  <input v-model="message" type="text" />
  <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
const message = ref("v-model")
</script>
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

Tips:要想让这绑定的数据具有相应是必须使用ref或者react包裹，这个暂时放在后面说

Vue3 学习笔记~梦开始的地方

Vue3 梦开始的地方

一.简介

1.1 什么是Vue

1.2 选项式 API (Options API) 与 组合式 API (Composition API)

二.构建项目

2.1 构建项目

2.2 目录结构

2.3 SFC 语法规范

三.模板语法

3.1 模板插值语法

3.2 指令

3.2.1 v-if与v-show

3.2.2 v-on

3.2.3 v-bind

3.2.4 v-model

1.2 选项式 API (Options API) 与组合式 API (Composition API)