这是一个vue3复习项目
1.从这里拉取代码
git clone https://github.com/zhangyuang/vue3-review.git
2.安装依赖
npm install
3.运行项目
npm run dev
开始学习
1.创建项目
npm create vue@latest
2.进入项目安装依赖
3.运行项目
4.开始写代码
1.删除src文件夹
2.自己创建src文件夹
3.配置main.ts,参数如下
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
4.创建App.vue,利用vbase选择ts+stup创建代码块如下,语法糖形式书写
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//书写ts代码,需要引入ref
//这个地方两种写法,按照官方文档说,ref<string>是覆盖默认推导行为
//1.const msg:Ref<string> = ref('hello world')
const msg = ref<string>('hello world')
</script>
<style scoped>
</style>
5.简单的就是上面这样,顺便进行elment-plus配置
1.配置
我们找到element-plus官网查看配置文档,按照按需加载来配置
配置地址
在快速开始的按需导入
6.基础语法
1.ref 和 reactive(响应式数据)
ref(基本数据类型和对象数据类型)
reactive(只能定义对象数据类型)
<template>
<div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const msg = ref<string>('hello world')
// 他会隐式推导类型,但是我们需要显示标注
interface X {
name: string
age: number
}
const x:X = reactive({name:'张三',age:18})
</script>
<style scoped>
</style>
2.computed
<script setup lang="ts">
const firstName = ref<string>('')
const lastName = ref<string>('')
// 计算属性,有缓存
let fullName = computed({
get(){
return firstName.value + lastName.value
},
set(val){
console.log(val);
const [first, last] = val.split('g')
console.log(first, last);
firstName.value = first
lastName.value = last
}
})
const edit: Function = () => {
fullName.value = 'zhangsan'
}
</script>
3.watch
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
const sum = ref<number>(0)
const sumPlus = () => {
sum.value += 1
}
// 监视sum的变化
const stopWatch = watch(sum, (newValue, oldValue) => {
console.log(newValue, oldValue)
// 停止监听
if(newValue>=10){
stopWatch()
}
})
let persion = ref({
name:'张三',
age:18
})
let persion1 = reactive({
name:'张三',
age:18
})
const editName = () => {
persion.value.name = '李四'
}
const editName1 = () => {
persion1.name = 'zz'
}
const editAge = () => {
persion.value.age = 20
}
const editAge1 = () => {
persion1.age = 30
}
const editPersion = () => {
persion.value = {
name:'王五',
age:30
}
}
const editPersion1 =() =>{
Object.assign(persion1,{
name:'赵六',
age:40
})
}
// 监事对象的变化,监视单个值需要深度监视
// 侦听器默认不侦听对象属性的变化,需要深度监视
// 第一个参数监视的对象,第二个参数回调函数,第三个配置对象(deep深度,immediate:true立即执行)
const stopWatchs = watch(persion, (newValue, oldValue) => {
console.log(newValue, oldValue)
},{deep:true,immediate:true})
console.log(stopWatchs);
// 监视reactive对象,默认开启深度,不能关闭,隐式监视
const stopWatchs1 = watch(persion1, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
console.log(stopWatchs1);
let per = reactive({
name:'zzz',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})
const changeNmae =()=>{
per.name = 'ldz'
}
const changeAge =()=>{
per.age = 21
}
const changeC1 =()=>{
per.car.c2 = '东风'
}
const changeC2 =()=>{
per.car.c1 = '凯迪拉克'
}
const changeC =()=>{
per.car = {c1:'别克',c2:'小米'}
}
// 监视对象具体某个属性的变化,基本
// watch(()=>per.name, (newValue, oldValue) => {
// console.log(newValue, oldValue)
// })
// 监视对象类型,用函数写法,具体属性需要加deep
watch(()=>per.car, (newValue, oldValue) => {
console.log(newValue, oldValue)
},{deep:true})
watch(()=>[per.name,()=>per.car], (newValue, oldValue) => {
console.log(newValue, oldValue)
})
</script>
4.watchEffect
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const count = ref(0)
const count1 = ref(0)
// 监视自动监视
watchEffect(() => {
if (count.value >= 25 || count1.value >= 65) {
console.log('count', count.value,count1.value)
}
})
</script>
7.TS
1.接口
// 接口
interface Persion {
id: number,
name: string,
age: number
}
// 自定义类型(泛型)
// type PersionList = Array<Persion>
// 自定义类型
type PersionList = Persion[]
let a: Persion = { id: 1, name: '张三', age: 60 }
let b: PersionList = [
{ id: 1, name: '张三', age: 60 },
{ id: 2, name: '李四', age: 50 },
{ id: 3, name: '王五', age: 40 }
]
8.组件通信方式
1.父传子
<!-- 父组件father.vue -->
<template>
<div>
<!-- 设置单项绑定a,等于msg -->
<son :a="msg"></son>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Son from './son.vue'
const msg = ref<string>('hello world')
</script>
<style scoped>
</style>
<!-- 子组件son.vue -->
<template>
<div>
<h1>子组件</h1>
<!-- 直接渲染a -->
<p>{{a}}</p>
</div>
</template>
<script setup lang="ts">
// 接受父组件的a传过来的值
defineProps<{
a: string
}>()
</script>
<style scoped>
</style>
2.子传父
<!-- 父组件father.vue -->
<template>
<div>
<h1>父组件</h1>
<h1>*********</h1>
<Son @message="reson"></Son>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Son from './sonS.vue'
const resonvalue = ref<string>('')
const reson = (msg: string) => {
resonvalue.value = msg
}
</script>
<style scoped>
</style>
<!-- 子组件sonS.vue -->
<template>
<div>
<h1>子传父</h1>
<el-button @click="sendSon">子组件点击</el-button>
</div>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue'
const emit = defineEmits(['message'])
const sendSon = () => {
emit('message', 'Hello from Child!');
}
</script>
<style scoped></style>