- vue 3 的 script setup 特性
// 进一步简化了vue Composition API的代码
// 原来的写法是
<script>
export default {
setup(){}
}
</script>
<template>
<button @click="emit('click', 10)">点击</button>
// 直接把函数内容写在script标签内，作为其的属性
<script setup>
const msg = "hello"; // 在script中定义的变量|函数|组件 可直接在template模板中使用
return ()=>{
return h(SomeComponent, msg) // 可访问外部作用域的 msg
}
// 获取父组件传递过来的属性，接收一个对象作为参数，key为属性名 value为属性类型或对象，包含默认值，是否为必须的
const props = definedProps({
propsName:{
type: Object,
default:{},
required:true
}
})
const emit = defineEmit(['click', 'change'])
const {slots, attrs} = useContext()
</script>
- ref 和 reactive 「vue库中定义数据的函数」
// ref 用在简单数据类型 reactive用在对象等复杂数据
// ref()是vue库中定义数据的函数，方便访问变量属性
const blog = reactive({
title:"Vue 3 学习"
content：”Vue 3 在vue 2 的基础上发生了较大变化“
})
<h1>{{blog.title}}</h1>
<div>{{blog.content}}</div>
- vue 3 + template + scoped
//app1.vue
<script setup lang="ts">
import {ref} from 'vue'
const count = ref(0)
const onClick = ()=>{
count.value += 1
}
</script>
<template>
<div>
{{count}}
</div>
<div>
<button @click="onClick">+1</button>
</div>
<template>
<style>
</style>
- tsx
//app2.tsx
import {defineComponent, ref} from 'vue';
export const app2 = defineComponent({ // 具名导出组件对象
setup(){
const refCount = ref(0)
const onClick = ()=>{
count.value += 1
}
return ()=> <>
<div>
{refCount.value}
</div>
<div>
<button onClick={onClick}>+1</button>
</div>
<>
}
})
// return之前的都是声明变量和函数
// 多个div时 把结构用<Fregment>包裹，缩写为<>
// refCount.value 的写法需要牢记，容易忘写value
// 借鉴react写法，对比vue的写法是@click=“onClick”
- Vue Router 4 （兼容vue 3）
快速部署
如果是纯新建github：参考这篇文章
- GitHub新建仓库并关联本地（已提交VScode）
git remote set-url origin git@github.com:jianlong5296/morney-9.git
git branch -M main
git push -u origin main
