vue3的使用

创建vue3

创建vue3的指令

 vue create xxx

选择手动功能

3. 选择如下

4. 选择vue3的版本

vue3生命周期函数

setup() 页面创建之前执行的函数。所以整个面用setup()函数来初始化参数；
onBeforeMount：页面渲染之前执行；onMounted：页面渲染时；
onBeforeUpdate：页面更新之前；onUpdated：页面更新之后；
onBeforeUnmount：页面销毁之前；onUnmounted：页面销毁之后；

vue3升到vue3.2

升vue3.2的指令

npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2
// yarn
yarn add vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

升到vue3.2.8之后package.json的版本

    "vue": "3.2.8",
    "vue-router": "4.0.11",
    "vuex": "4.0.2"

Vue3.0 setup的使用

vue3.0在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用

Vue3.2 setup的使用

vue3.2 中只需要在 script 标签上加上 setup 属性，无需return直接使用。

style中引用的方式

<template>
  <div class="box">hello linge</div>
</template>
 
<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  color: v-bind(color);
}
</style>