Vue3 快速上手#

1
## 1.创建命令
2
npm create vue@latest
3

4
## 2.具体配置
5
## 配置项目名称
6
√ Project name: vue3_test
7
## 是否添加TypeScript支持
8
√ Add TypeScript?  Yes
9
## 是否添加JSX支持
10
√ Add JSX Support?  No
11
## 是否添加路由环境
12
√ Add Vue Router for Single Page Application development?  No
13
## 是否添加pinia环境
14
√ Add Pinia for state management?  No
15
## 是否添加单元测试
16
√ Add Vitest for Unit Testing?  No
17
## 是否添加端到端测试方案
18
√ Add an End-to-End Testing Solution? » No
19
## 是否添加ESLint语法检查
20
√ Add ESLint for code quality?  Yes
21
## 是否添加Prettiert代码格式化
22
√ Add Prettier for code formatting?  No

1
<template>
2
  <div class="app">
3
    <h1>你好啊！</h1>
4
  </div>
5
</template>
6

7
<script lang="ts">
8
export default {
9
  name: "App", //组件名
10
};
11
</script>
12

13
<style>
14
.app {
15
  background-color: #ddd;
16
  box-shadow: 0 0 10px;
17
  border-radius: 10px;
18
  padding: 20px;
19
}
20
</style>

1
setup(){ return ()=> '你好啊！' }

1
import { defineConfig } from "vite";
2
import VueSetupExtend from "vite-plugin-vue-setup-extend";
3

4
export default defineConfig({
5
  plugins: [VueSetupExtend()],
6
});

1
<template>
2
  <div>
3
    <h1>这是一个组件</h1>
4
    <p>{{ message }}</p>
5
  </div>
6
</template>
7

8
<script setup>
9
import { ref } from "vue";
10

11
// 使用 defineOptions 定义组件选项
12
defineOptions({
13
  name: "MyComponent", // 组件名称
14
  inheritAttrs: false, // 禁用属性继承
15
  customOption: "This is a custom option", // 自定义选项
16
});
17

18
const message = ref("Hello, Vue 3!");
19
</script>

1
<template>
2
  <div class="person">
3
    <h2>姓名：{{ name }}</h2>
4
    <h2>年龄：{{ age }}</h2>
5
    <button @click="changeName">修改名字</button>
6
    <button @click="changeAge">年龄+1</button>
7
    <button @click="showTel">点我查看联系方式</button>
8
  </div>
9
</template>
10

11
<script setup lang="ts" name="Person">
12
import { ref } from "vue";
13
// name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
14
let name = ref("张三");
15
let age = ref(18);
16
// tel就是一个普通的字符串，不是响应式的
17
let tel = "13888888888";
18

19
function changeName() {
20
  // JS中操作ref对象时候需要.value
21
  name.value = "李四";
22
  console.log(name.value);
23

24
  // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
25
  // name = ref('zhang-san')
26
}
27
function changeAge() {
28
  // JS中操作ref对象时候需要.value
29
  age.value += 1;
30
  console.log(age.value);
31
}
32
function showTel() {
33
  alert(tel);
34
}
35
</script>

1
<template>
2
  <div class="person">
3
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
4
    <h2>游戏列表：</h2>
5
    <ul>
6
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
7
    </ul>
8
    <h2>测试：{{ obj.a.b.c.d }}</h2>
9
    <button @click="changeCarPrice">修改汽车价格</button>
10
    <button @click="changeFirstGame">修改第一游戏</button>
11
    <button @click="test">测试</button>
12
  </div>
13
</template>
14

15
<script lang="ts" setup name="Person">
16
import { reactive } from "vue";
17

18
// 数据
19
let car = reactive({ brand: "奔驰", price: 100 });
20
let games = reactive([
21
  { id: "ahsgdyfa01", name: "英雄联盟" },
22
  { id: "ahsgdyfa02", name: "王者荣耀" },
23
  { id: "ahsgdyfa03", name: "原神" },
24
]);
25
let obj = reactive({
26
  a: {
27
    b: {
28
      c: {
29
        d: 666,
30
      },
31
    },
32
  },
33
});
34

35
function changeCarPrice() {
36
  car.price += 10;
37
}
38
function changeFirstGame() {
39
  games[0].name = "流星蝴蝶剑";
40
}
41
function test() {
42
  obj.a.b.c.d = 999;
43
}
44
</script>

1
<template>
2
  <div class="person">
3
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
4
    <h2>游戏列表：</h2>
5
    <ul>
6
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
7
    </ul>
8
    <h2>测试：{{ obj.a.b.c.d }}</h2>
9
    <button @click="changeCarPrice">修改汽车价格</button>
10
    <button @click="changeFirstGame">修改第一游戏</button>
11
    <button @click="test">测试</button>
12
  </div>
13
</template>
14

15
<script lang="ts" setup name="Person">
16
import { ref } from "vue";
17

18
// 数据
19
let car = ref({ brand: "奔驰", price: 100 });
20
let games = ref([
21
  { id: "ahsgdyfa01", name: "英雄联盟" },
22
  { id: "ahsgdyfa02", name: "王者荣耀" },
23
  { id: "ahsgdyfa03", name: "原神" },
24
]);
25
let obj = ref({
26
  a: {
27
    b: {
28
      c: {
29
        d: 666,
30
      },
31
    },
32
  },
33
});
34

35
console.log(car);
36

37
function changeCarPrice() {
38
  car.value.price += 10;
39
}
40
function changeFirstGame() {
41
  games.value[0].name = "流星蝴蝶剑";
42
}
43
function test() {
44
  obj.value.a.b.c.d = 999;
45
}
46
</script>

1
<template>
2
  <div class="person">
3
    <h3>情况一：监视【ref】定义的【基本类型】数据</h3>
4
    <h3>{{ sum }}</h3>
5
    <h3><button @click="add">点击++</button></h3>
6
  </div>
7
</template>
8

9
<script setup lang="ts" name="Person">
10
import { ref, watch } from "vue";
11

12
let sum = ref(0);
13

14
const add = () => {
15
  sum.value++;
16
};
17

18
let stopWatch = watch(sum, (newValue, oldValue) => {
19
  console.log("新", newValue);
20
  console.log("旧", oldValue);
21
  if (sum.value == 10) {
22
    stopWatch(); // 停止监听
23
  }
24
});
25
</script>

1
<template>
2
  <div class="person">
3
    <h3>情况二：监视【ref】定义的【对象类型】数据</h3>
4
    <h3>{{ person.name }}</h3>
5
    <h3>{{ person.age }}</h3>
6
    <h3><button @click="changeName">update Name</button></h3>
7
    <h3><button @click="changeAge">update Age</button></h3>
8
    <h3><button @click="changePerson">修改整个</button></h3>
9
  </div>
10
</template>
11

12
<script setup lang="ts" name="Person">
13
import { ref, watch } from "vue";
14

15
let person = ref({
16
  name: "张三",
17
  age: 30,
18
});
19

20
const changeName = () => {
21
  person.value.name += "~";
22
};
23
const changeAge = () => {
24
  person.value.age++;
25
};
26

27
const changePerson = () => {
28
  person.value = { name: "Jack", age: 60 };
29
};
30

31
// 监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
32
// watch的第一个参数是:被监视的数据
33
// watch的第二个参数是:监视的回调
34
// watch的第三个参数是:配置对象(deep、immediate等等)
35
watch(
36
  person,
37
  (newValue, oldValue) => {
38
    console.log("新", newValue);
39
    console.log("旧", oldValue);
40
  },
41
  { deep: true, immediate: true }
42
);
43
</script>

1
<template>
2
  <div class="person">
3
    <h3>情况三：监视【reactive】定义的【对象类型】数据</h3>
4
    <h3>{{ person.name }}</h3>
5
    <h3>{{ person.age }}</h3>
6
    <h3><button @click="changeName">update Name</button></h3>
7
    <h3><button @click="changeAge">update Age</button></h3>
8
    <h3><button @click="changePerson">修改整个</button></h3>
9
  </div>
10
</template>
11

12
<script setup lang="ts" name="Person">
13
import { reactive, watch } from "vue";
14

15
let person = reactive({
16
  name: "张三",
17
  age: 30,
18
});
19

20
const changeName = () => {
21
  person.name += "~";
22
};
23
const changeAge = () => {
24
  person.age++;
25
};
26

27
const changePerson = () => {
28
  person = Object.assign(person, { name: "Jack", age: 60 });
29
};
30

31
watch(person, (newValue, oldValue) => {
32
  console.log("新", newValue);
33
  console.log("旧", oldValue);
34
});
35
</script>

1
<template>
2
  <div class="person">
3
    <h3>{{ person.name }}</h3>
4
    <h3>{{ person.age }}</h3>
5
    <h3>{{ person.car.car1 + "、" + person.car.car2 }}</h3>
6
    <h3><button @click="changeName">update Name</button></h3>
7
    <h3><button @click="changeAge">update Age</button></h3>
8
    <h3><button @click="changeCar1">update Car1</button></h3>
9
    <h3><button @click="changeCar2">update Car2</button></h3>
10
    <h3><button @click="changeCar">修改整个车</button></h3>
11
  </div>
12
</template>
13

14
<script setup lang="ts" name="Person">
15
import { reactive, watch } from "vue";
16

17
let person = reactive({
18
  name: "张三",
19
  age: 30,
20
  car: {
21
    car1: "宝马",
22
    car2: "奔驰",
23
  },
24
});
25

26
const changeName = () => {
27
  person.name += "~";
28
};
29
const changeAge = () => {
30
  person.age++;
31
};
32

33
const changeCar1 = () => {
34
  person.car.car1 = "奥迪";
35
};
36
const changeCar2 = () => {
37
  person.car.car2 = "大众";
38
};
39
const changeCar = () => {
40
  person.car = { car1: "雅迪", car2: "台铃" };
41
};
42

43
// 监视，情况四:监视响应式对象中的某个属性，且该属性时基本类型的，要写成函数式
44
watch(
45
  () => person.name,
46
  (newValue, oldValue) => {
47
    console.log("新", newValue);
48
    console.log("旧", oldValue);
49
  }
50
);
51

52
// 监视，情况四:监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
53
watch(
54
  () => person.car,
55
  (newValue, oldValue) => {
56
    console.log("car变化了", newValue, oldValue);
57
  },
58
  { deep: true }
59
);
60
</script>

1
<template>
2
  <div class="person">
3
    <h3>{{ person.name }}</h3>
4
    <h3>{{ person.age }}</h3>
5
    <h3>{{ person.car.car1 + "、" + person.car.car2 }}</h3>
6
    <h3><button @click="changeName">update Name</button></h3>
7
    <h3><button @click="changeAge">update Age</button></h3>
8
    <h3><button @click="changeCar1">update Car1</button></h3>
9
    <h3><button @click="changeCar2">update Car2</button></h3>
10
    <h3><button @click="changeCar">修改整个车</button></h3>
11
  </div>
12
</template>
13

14
<script setup lang="ts" name="Person">
15
import { reactive, watch } from "vue";
16

17
let person = reactive({
18
  name: "张三",
19
  age: 30,
20
  car: {
21
    car1: "宝马",
22
    car2: "奔驰",
23
  },
24
});
25

26
const changeName = () => {
27
  person.name += "~";
28
};
29
const changeAge = () => {
30
  person.age++;
31
};
32

33
const changeCar1 = () => {
34
  person.car.car1 = "奥迪";
35
};
36
const changeCar2 = () => {
37
  person.car.car2 = "大众";
38
};
39
const changeCar = () => {
40
  person.car = { car1: "雅迪", car2: "台铃" };
41
};
42

43
// 监视，情况五:监视上述的多个数据
44
watch(
45
  [() => person.name, () => person.car.car1],
46
  (newValue, oldValue) => {
47
    console.log(newValue, oldValue);
48
  },
49
  { deep: true }
50
);
51
</script>

1
<template>
2
  <div class="person">
3
    <h3 ref="title">亚洲</h3>
4
    <h3>中国</h3>
5
    <h3><button @click="showLog">show log</button></h3>
6
  </div>
7
</template>
8

9
<script setup lang="ts">
10
import { ref } from "vue";
11

12
defineOptions({
13
  name: "Person",
14
});
15

16
let title = ref();
17
const showLog = () => {
18
  console.log(title.value);
19
};
20
</script>
21

22
<style scoped>
23
.person:first-child {
24
  font-size: 12px;
25
}
26
</style>