1搭建項(xiàng)目

node -v

npm -v 判斷是否有安裝環(huán)境

npm install @vue/cli -init -g

npm create 項(xiàng)目名字? 搭建項(xiàng)目名字

vue 添加vue-next? =>vue add vue-next 轉(zhuǎn)換成vue3模式

2.vue.createComponent 創(chuàng)建模板

3.vue.createApp 創(chuàng)建實(shí)例

4.Vue.setup 初始化變量

5ref reactive 響應(yīng)變量賦值

6props 屬性

7vue 通過引入

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

setup(){

//定義變量

const state=reactive({

//名值對的寫法

name:'kayla',

age:10,

sex:'male',

num:computed(()=>100) //計(jì)算屬性的寫法

})

//定義要執(zhí)行的函數(shù)

let beold=()=>{

?state.age++;

}

//要有返回值才顯示

return {

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

beold//擁有的方法

}

}

8父子組件間傳值的方法

import {provie} from 'vue';

//父組件

provide('傳出去的名字'，對應(yīng)的值)

//子組件

import {inject} from 'vue';

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

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

setup(){

? let title=inject('傳入的名字')

return {

title

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

}

頁面路由跳轉(zhuǎn)

npm install vue-router安裝