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

1.『View』：视图层（UI 用户界面）

2.『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）

3.『Model』：数据层（存储数据及对数据的处理如增删改查）

官方文档地址介绍 — Vue.js

发现传统的vue2 逻辑比较分散可读性差可维护性差

对比vue3 逻辑分明可维护性高

vue2是基于Object.defineProperty()实现

vue3 基于Proxy实现的

proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势：

//丢掉麻烦的备份数据

//省去for in 循环

//可以监听数组变化

//代码更简化

//可以监听动态新增的属性；

//可以监听删除的属性；

//可以监听数组的索引和 length 属性；

在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗 我们可以通过这个网站看到静态标记 Vue-Template-Explorer

模板插值语法

在script 声明一个变量可以直接在template 使用用法为{{变量名称}}

<template>
  <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
const message = "我是韩洺瑞"
</script>
 
<style>
</style>

模板语法是可以编写条件运算的

<template>
  <div>{{ message  + 1 }}</div>
</template>
 
<script setup lang="ts">
const message:number = 1
</script>
 
<style>
</style>

运算也是支持的

<template>
  <div>{{ message  + 1 }}</div>
</template>
 
<script setup lang="ts">
const message:number = 1
</script>
 
<style>
</style>

操作API 也是支持的

<template>
  <div>{{ message.split('，') }}</div>
</template>
 
<script setup lang="ts">
const message:string = "我，是，韩，洺，瑞"
</script>
 
<style>
</style>

指令

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修饰符冒泡案例

<template>
  <div @click="parent">
    <div @click.stop="child">child</div>
  </div>
</template>
 
<script setup lang="ts">
const child = () => {
  console.log('child');
 
}
const parent = () => {
  console.log('parent');
}
 
</script>

阻止表单提交案例

<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>
 
<script setup lang="ts">
const submit = () => {
  console.log('child');
 
}
</script>
 
<style>
</style>

v-bind 绑定class 案例 1

<template>
  <div :class="[flag ? 'active' : 'other', 'h']">12323</div>
</template>
 
<script setup lang="ts">
const flag: boolean = false;
</script>
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 绑定class 案例 2

<template>
  <div :class="flag">{{flag}}</div>
</template>
 
<script setup lang="ts">
type Cls = {
  other: boolean,
  h: boolean
}
const flag: Cls = {
  other: false,
  h: true
};
</script>
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 绑定style案例

<template>
  <div :style="style">2222</div>
</template>
 
<script setup lang="ts">
type Style = {
  height: string,
  color: string
}
 
const style: Style = {
  height: "300px",
  color: "blue"
}
 
</script>
 
<style>
</style>

v-model 案例

<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>

培训

模板插值语法

指令