vue3学习

1搭建项目

node -v

npm -v 判断是否有安装环境

npm install @vue/cli -init -g

npm create 项目名字  搭建项目名字

vue 添加vue-next  =>vue add vue-next 转换成vue3模式

---

2.vue.createComponent 创建模板

3.vue.createApp 创建实例

4.Vue.setup 初始化变量

5ref reactive 响应变量赋值

6props 属性

---

7vue 通过引入

import {reactive,toRefs,computed} from 'vue'

setup(){

//定义变量

const state=reactive({

//名值对的写法

name:'kayla',

age:10,

sex:'male',

num:computed(()=>100) //计算属性的写法

})

//定义要执行的函数

let beold=()=>{

 state.age++;

}

//要有返回值才显示

return {

...toRefs(sate),//包含的变量

beold//拥有的方法

}

}

8父子组件间传值的方法

import {provie} from 'vue';

//父组件

provide('传出去的名字'，对应的值)

//子组件

import {inject} from 'vue';

let newname=inject('传入的名字');

*****一定要在setup中return 出来

setup(){

  let title=inject('传入的名字')

return {

title

} ***一定要注意return 出来

}

---

页面路由跳转

npm install vue-router安装