0%

Vue基本使用

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 4.2k 阅读时长 ≈ 4 分钟

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

描述

  1. 写代码之前需要将业务逻辑理顺
  2. 对接口要将想要的字段先解构或者直接取出来
  3. 如果接口服务报 500、数据为 null 或者字段有但是没有值返回，那么需要在本地做个判断处理
  4. 多组件传递数据可以使用状态机 Pinia。

Vue 介绍

  1. 文档

    官方文档

  2. 定位

    渐进式 JavaScript 框架
    vue、@vue/cli、vue-router、vuex

  3. 特点

    数据驱动视图的思想

    • Javascript document.querySelector
    • JQuery 封装方法，简化 DOM 操作代码 $('.cont')
    • Vue 开发者只需要操作数据包，不需要操作 DOM 了，Vue 帮我们操作 DOM

  4. 学习流程
    用、懂、改、造

  5. 思想转变
    找元素 DOM、定义并操作数据包

Vue 基本使用

  • 下载
  • 引入
  • 准备容器
  • 初始化 Vue

Vue 常用指令

  1. {{}} 普通数据渲染

  2. v-html 富文本渲染

  3. v-bind:class 属性控制

  4. v-if v-show 条件渲染

  5. v-on:click 事件绑定

菜单切换

  1. 定义一个合理的数据包格式

  2. 根据数据包（布尔值），控制 li 的 active 名称

  3. 通过事件触发修改数据包，自动触发视图更新

  4. 使用条件渲染，控制内容的显示

组件之间的通信(Vue3)

1.父子通信

父组件 App.vue

App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

const faData = ref([
  "父组件数据",
  1,
  2,
  {
    name: "张三",
    age: 18,
  },
]);
</script>

<template>
  <div>
    <HelloWorld :a="faData" />
  </div>
</template>

子组件 HelloWorld.vue

HelloWorld.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <p>{{ a }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

/**
 * 方式一：通过定义接口统一接收
 */
interface Prose {
  a?: Array<string | number | object>;
}
defineProps<Prose>();

/**
 * 方式二
 */
// defineProps<{
//   a: Array<string | number | object>;
// }>();
// </script>

<style scoped>
</style>

2.子父通信

子组件 HelloWorld.vue

HelloWorld.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div>
    <button @click="handleGetValue">传值</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";

const n = ref(15);
const emit = defineEmits(["getValue"]);
const handleGetValue = () => {
  emit("getValue", n.value);
};
</script>

<style scoped>
</style>

父组件 App.vue

App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";

const sonN = ref(0);
const getValue = (value: number) => {
  sonN.value = value;
};
</script>

<template>
  <div>
    <HelloWorld @getValue="getValue" />
    <p>{{ sonN }}</p>
  </div>
</template>

<style scoped>
</style>

Vue3 中使用第三方 Bus 总线

eventemitter3

1
2
3
4
// 子组件
import EventBus from "@/event-bus";
const busData = 88
EventBus.emit('bd',busData)
1
2
3
4
5
// 父组件
import EventBus from "@/event-bus";
EventBus.on('bd',(busData)=>{
	console.log('busData',busData)
})

Vue3 中使用@路径别名

安装@types/node

1
npm install @types/node --save-dev

修改 vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"; //这个path用到了上面安装的@types/node

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve("./src"), // @代替src
    },
  },
});

修改 tsconfig.json

在 compilerOptions 中添加下面的最后 2 项：“baseUrl”和”paths”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

参考文章：
Vue 官方文档
ECMAScript 6 入门
印记中文
Vue JSON Schema Form
知乎 live — justjavac《前端工程师的入门与进阶》

赏包辣条吃吧