vue3入门极简教程

1. 通过 vue-cli 创建项目

步骤：

• 1. vue create 项目名
• 2. 选择 “ Manually select features”
• 3. 选择以下：

2. vue3 组件写法

<template>
  <div></div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'Home', // 组件名称
  // 接收父组件的数据
  props: {

  },
  // 定义子组件
  components: {

  },
  setup(props, ctx) {     // 组件创建过程  
    // 组件挂载的过程
    // 数据dom...
    onMounted(() => {
      console.log('onMounted')
    })
    // 组件卸载时的生命周期
    onUnmounted(() => {
      
    })
    return {

    }
  },
})
</script>
<style scoped lang="scss">

</style>

3. 使用ref定义单个数据

• 1. ref引入方式

  import { defineComponent, ref } from 'vue'
  

• 2. ref使用方式

  <template>
    <div>ss{{name}}--{{age}}</div>
  </template>
  <script>
      import { defineComponent, ref } from 'vue'
      ...
      export default defineComponent({
          ...
          setup(props, ctx) {
              let name = ref('xiaoMing') // 括号内为初始值
              let age = ref(18) // 括号内为初始值
              return {
                name,  // 需添加到return里
                age
              }
          },
          ...
      })    
  </script>
  

4. 使用reactive定义对象类型的数据

• 1. reactive引入方式

  import { defineComponent, reactive } from 'vue'
  
  

• 2. reactive使用方式

  <template>
    <div>{{data.name}}--{{data.age}}</div>
  </template>
  <script>
      import { defineComponent, reactive } from 'vue'
      ...
      export default defineComponent({
          ...
          setup(props, ctx) {
              let data = reactive({
                name: 'xiaoMIng',
                age: 18
              })
              return {
                data
              }
          },
          ...
      })
  </script>
  

• 3. toRefs 配合 reactive使用方式

   <template>
     <div>{{name}}--{{age}}</div>
   </template>
   <script>
       import { defineComponent, reactive, toRefs } from 'vue'
       ...
       export default defineComponent({
           ...
           setup(props, ctx) {
               let data = reactive({
                 name: 'xiaoMIng',
                 age: 18
               })
               return {
                 ...toRefs(data)
               }
           },
           ...
       })    
   </script>
  

5. 方法的定义和使用

• 1. 在setup里定义

  setup(props, ctx) {
      let title = ref('哈哈')
      let data = reactive({
        name: 'xiaoMIng',
        age: 18
      })
      let clickEvent = (val) => {   // 事件名: clickEvent,  参数：val
        console.log('点击事件')
        console.log(title.value)  //访问ref定义的数据，要写数据名.value
        console.log(data.name)  // 访问reactive定义的数据，不需要.value，直接访问data.name
      }
      return {
        title,
        ...toRefs(data),
        clickEvent    // 需添加到return里
      }
  }
  

6. 计算属于的使用

import { defineComponent, ref, reactive, toRefs, computed } from 'vue'   //引入‘computed’
export default defineComponent({
   setup(props, ctx) {
       let title = ref('哈哈')
       let title2 = ref('哦哦')
       let titlStr = computed(() => {  // 定义计算属性
         return title.value + title2.value
       })
       return {
         title,
         title2,
         titlStr       // 计算属性需添加到return里
       }
   },
})

7. 通过计算属性获取vuex中的数据

<script>
   import { defineComponent, computed } from 'vue'
   import { useStore } from 'vuex'  // 引入useStore

   export default defineComponent({
     ...
     setup(props, ctx) {
       let store = useStore();  // 获取store
       let storeData = computed(() => {  // 获取vuex中的数据
         return store.state.list;
       })
       return {
         storeData      // 计算属性需添加到return里
       }
     },
   })
   </script>

8. vue-router使用

<script>
   import { defineComponent } from 'vue'
   import { useRouter, useRoute} from 'vue-router'; //引入useRouter
</script>   
export default defineComponent({
    ...
    setup(props, ctx) {
       // router是全局路由对象
       let router = useRouter();
       // route是当前路由对象
       let route = useRoute();
       // 获取路由参数(query传递过来的参数都是字符串类型)
       console.log(route.query);
       let goto = () => {
         router.push('/about');
       }
       return {
         goto
       }
    }   
    ...
})

9.父子组件传参

父组件
<child :msg="msg"></child>

子组件
props: {
   msg: {
     type: String,
     default: ''
   }
},
setup(props, ctx) {   // 第一个参数获取父组件传过来的参数props
   console.log(props.msg)
   let send = () => {
     ctx.emit('send','哈哈')   // 通过ctx.emit分发事件
   }
   return {
     
   }
 },

vue3还有很多知识点， 中文文档链接 v3.cn.vuejs.org/