01 初始化vue3项目

安装环境

1.安装node

2.npm init vite@latest // 通过vite构建vue3项目

其他的方式构建vue3

npm init vue@latest //脚手架方式 配置更全

3.vscode 插件

Vue - Official ，若之前安装了vetur禁用即可

npm run dev 直接运行vite会报错查看规则是vite做了个软链接 先在当前项目的node_moudles再到全局最后到环境变量

setup函数语法糖

<template>
  <div class="div">a:{{ a }}</div>
</template>
<script>
export default {
  setup() {
    const a = 1;
    return { // 必须要return出去很麻烦
      a,
    };
  },
};
</script>

语法糖：

<template>
  <div class="div">a:{{ a }}</div>
</template>
<script setup lang="ts">
const a: number = 1;
const b: number[] = [2, 3];
</script>

模块插值语法

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

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

运算也是支持的

操作API 也是支持的

<template>
  <div class="div">a:{{ a }}</div>
  <div class="div">{{ a + 1 }}</div>
  <div class="div">{{ a ? "true" : "false" }}</div>
  <div class="div">
    {{ b.map((item) => ({ item: item })) }}
  </div>
</template>
<script setup lang="ts">
const a: number = 1;
const b: number[] = [2, 3];
</script>

map使用方式

let a = 1, 2

let b = a.map(item => ({ item: item }))

let c = a.map(item => (item))

console.log(b) // { item: 1 }, { item: 2 }

console.log(c) // 1, 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 性能优化会有缓存具体请看我的掘金

<template>
  <div class="div" v-text="a"></div>
  <div class="div" v-html="b"></div>
  <button @[cus1]="xxx">点击</button>
  <div @click="parent">
    <button @click.stop="xxx">stop阻止冒泡</button>
  </div>
</template>
<script setup lang="ts">
const a: string = "一段文字";
const b: string = "<h1 style='color:red'>一段文字</h1>";
const cus1: string = "click"; // 支持动态事件的切换
const xxx = (): void => {
  console.log("xxx1");
};
const parent = () => {
  console.log("parent");
};
</script>

阻止表单提交案例

<template>
  <form action="/">
    <button @click="submit" type="submit">
        提交,会刷新页面
      </button>
      <button @click.prevent="submit" type="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>