vue
基础内容
文本插值
1 | |
属性绑定
1 | |
条件渲染
1 | |
列表渲染
1 | |
事件处理
1 | |
事件传参
1 | |
事件修饰
1 | |
setup
<script setup></script>等效于setup(){},且在setup中不能使用this，在渲染过程中，setup先于vue2的data(){}、method(){}等，因此在这个内部可以调用setup的内容，反之不行。
使用原则：
- 需要一个基本类型的响应式数据，必须用ref、
- 需要一个响应式对象，层级不深，使用ref，reactive都可
- 需要一个响应式对象，层级较深（如表单），推荐使用reactive
ref创建
基本类型的响应式数据
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<template>
<div class="person">
<h1>姓名：{{ name }}</h1> <!-- 自动帮你.value了 -->
<h1>年龄：{{ age }}</h1>
<button @click="changename">修改名字</button>
<button @click="changeage">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</template>
<script>//配置组件名字,大多情况下组件名字于文件名相等
export default {
name: 'person1',
}
</script>
<script setup>//等效于setup(){}
import {ref} from 'vue'
let a = 666
let name = ref('John Doe')
let age = ref(30)
let templete = '123456'
function changeage() {
age.value++//ref中需要.vaula来使用属性
}
function changename() {
name.value = 'zhangsan'
}
function showTel() {
alert(templete)
}
</script>
<style>
.person{
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding:20px;
}
button{
margin: 0 10px;
}
</style>基本类型的响应式数据
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50<template>
<div>
<h2>一辆{{ car.band }}车，价值{{ car.price }}</h2>
<button @click="changeprice">修改汽车价格</button>
<br>
<h2>游戏列表：</h2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
<button @click="changegame">修改游戏名字</button>
<hr>
<h2>测试：{{ obj.a.b.c }}</h2>
<button @click="chagec">修改值</button>
</div>
</template>
<script setup name="person3">
import { ref } from 'vue';
//使用ref，对象在value属性中，先点value再访问属性
let car =ref({
band: '奔驰',
price: 1000
})
let games = ref([
{ id: '1', name: '王者荣耀' },
{ id: '2', name: '英雄联盟' },
{ id: '3', name: '绝地求生' }
])
let obj = ref({
a: {
b: {
c: 1
}
}
})
function changeprice(){
car.value.price += 100
}
function changegame(){
games.value[0].name = '王者荣耀2'
}
function chagec(){
obj.value.a.b.c += 1
}
</script>
<style>
</style>
reactive创建
只能定义对象类型的响应式数据
当修改整个对象时可以理解为重新分配一个新对象，会使其响应式失效
也不可在修改整个对象外包一个reactive，因为setup是第一个执行的，运行期vue实例以及拿到了car的引用，再修改car，改的是setup中定义car引用而不是vue组件实例中的car引用。
1 | |
toRefs
不新建变量，解构原有的响应式对象，并将之绑定
1 | |
computed计算属性
1 | |
watch监视
监视四种数据：ref定义的数据，reactive定义的数据，函数返回一个值（getter函数），一个包含上述内容的数组
监视ref定义的基本类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<template>
<div>
<h2>当前求和为{{ sum }}</h2>
<button @click="changesum">点我sum+1</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
let sum = ref(0);
function changesum() {
sum.value++;
}
const stopwatch=watch(sum, (newSum,oldSum) => {
console.log('sum发生了变化', newSum, oldSum);
if(newSum>10){
console.log('sum>10了');
stopwatch();
}
});
</script>
<style>
</style>监视ref定义的对象类型数据
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
28
29
30
31
32
33
34
35
36<template>
<div>
<h1>监视ref对象类型数据</h1>
<h2>{{ person.name }}</h2>
<h2>{{ person.age }}</h2>
<button @click="changename">修改年龄</button>
<button @click="changeage">修改名字</button>
<button @click="changeperson">修改全部</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
let person = ref({ name: 'tom', age: 18 });
function changename() {
person.value.name += '~';
}
function changeage() {
person.value.age += 1;
}
function changeperson() {
person.value = { name: 'jerry', age: 20 };//创建一个新的对象，地址值改变
}
//监视的是对象的地址值，开启深度监视才能监视对象内部的数据变化
//在实际开发中，基本上不管旧的值，因此只需要一个value参数即可
watch(person,(newvalue,oldvalue)=>{
console.log('person changed');
console.log(newvalue);
console.log(oldvalue);
}, { deep: true, immediate: true });//deep:true表示开启深度监视,immediate:true表示立即执行一次，旧的值为undefined
//当改变对象内部的数据时，但因为对象（的地址值）没有改变，改变的是对象内部的数据，因此oldvalue和newvalue是一样的
</script>
<style>
</style>监视reactive定义的对象类型数据，且默认开启了深度监视。
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
28
29
30
31
32
33<template>
<div>
<h1>监视reactive对象类型数据</h1>
<h2>{{ person.name }}</h2>
<h2>{{ person.age }}</h2>
<button @click="changename">修改年龄</button>
<button @click="changeage">修改名字</button>
<button @click="changeperson">修改全部</button>
</div>
</template>
<script setup>
import { reactive, watch } from 'vue';
let person = reactive({ name: 'tom', age: 18 });
function changename() {
person.name += '~';
}
function changeage() {
person.age += 1;
}
function changeperson() {
Object.assign(person, { name: 'jerry', age: 20 });//修改对象内部的数据，地址值不变
}
watch(person,(newvalue,oldvalue)=>{
console.log('person changed');
console.log(newvalue);
console.log(oldvalue);
}, {immediate: true });//reactive对象默认开启深度监视,且不能关闭
</script>
<style>
</style>监视ref或reactive定义的对象裂隙的数据中的某个属性(监视函数，函数返回改属性)
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<template>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h2>汽车:{{ person.car.c1 }}\{{ person.car.c2 }}</h2>
<button @click="changename">修改名字</button>
<button @click="changeage">修改年龄</button>
<button @click="changec1">修改第一台车</button>
<button @click="changec2">修改第二台车</button>
<button @click="changecar">修改全部车</button>
<button @click="changeperson">修改全部人</button>
</template>
<script setup>
import { reactive, watch } from 'vue';
let person = reactive({
name: 'xiaoming',
age: 18,
car: {
c1:'benz',
c2:'bmw'
}
})
function changename(){
person.name = 'xiaohong'
}
function changeage(){
person.age = 20
}
function changec1(){
person.car.c1 = 'audi'
}
function changec2(){
person.car.c2 = 'landrover'
}
//可以直接修改reactive对象内部的的对象
function changecar(){
person.car = {
c1:'audi',
c2:'landrover'
}
}
function changeperson(){
Object.assign(person,{name:'xiaohong',age:20,car:{c1:'audi',c2:'landrover'}})
}
//必须监视的是对象，不能只监视对象内部的属性，想要只监视内部属性，需要写成函数
//由于是监视函数，所以输出的是属性变化前后的值
//若属性是对象，则要区分是要监视整个对象，还是对象内的值，两个都要监视可以加个深度监视
watch(()=>{return person.name},(newvalue,oldvalue)=>{
console.log('person changed');
console.log(newvalue);
console.log(oldvalue);
}, {immediate: true });
</script>
<style>
</style>监视上述多个数据
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54<template>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h2>汽车:{{ person.car.c1 }}\{{ person.car.c2 }}</h2>
<button @click="changename">修改名字</button>
<button @click="changeage">修改年龄</button>
<button @click="changec1">修改第一台车</button>
<button @click="changec2">修改第二台车</button>
<button @click="changecar">修改全部车</button>
<button @click="changeperson">修改全部人</button>
</template>
<script setup>
import { reactive, watch } from 'vue';
let person = reactive({
name: 'xiaoming',
age: 18,
car: {
c1:'benz',
c2:'bmw'
}
})
function changename(){
person.name = 'xiaohong'
}
function changeage(){
person.age = 20
}
function changec1(){
person.car.c1 = 'audi'
}
function changec2(){
person.car.c2 = 'landrover'
}
function changecar(){
person.car = {
c1:'audi',
c2:'landrover'
}
}
function changeperson(){
Object.assign(person,{name:'xiaohong',age:20,car:{c1:'audi',c2:'landrover'}})
}
//也可以直接()=>{return [person.name,person.car.c1]}
watch([()=>{return person.name},()=>{return person.car.c1}],(newvalue,oldvalue)=>{
console.log('person changed');
console.log(newvalue);
console.log(oldvalue);
}, {immediate: true });
</script>
<style>
</style>
watcheffect
1 | |
ref标记（等价于id）
1 | |
TS接口调用
PersonInter
1 | |
1 | |
Axio发送异步请求
对Ajax进行封装
vue
http://2819461143wp.github.io/vue/