Vue3 使用详解

一、vue3使用axios

Vue3与Vue2相比带来了许多更为方便的特性，其中使用axios是我们最常用的。使用Vue3+axios可以很方便地实现前后端交互。

下面是Vue3中使用axios的示例：

  const axios = require('axios').default;
  const instance = axios.create({
    baseURL: 'http://localhost:3000/',
    timeout: 1000,
    headers: {'X-Requested-With': 'XMLHttpRequest'}
  });

  export default {
    get: async (path, payload) => {
      try {
        const res = await instance.get(path, {
          params: payload
        });
        return res.data;
      } catch (err) {
        return Promise.reject(err);
      }
    },
    post: async (path, data) => {
      try {
        const res = await instance.post(path, data);
        return res.data;
      } catch (err) {
        return Promise.reject(err);
      }
    }
  }

二、vue3使用svg图标

Vue3中可以使用svg图标，可以很方便地实现使用SVG图标的需求。与Vue2相比，Vue3在使用SVG图标时更为简便。

下面是Vue3中使用SVG图标的示例：

  
    
  

  <script>
    import SvgIcon from '@/components/SvgIcon/index.vue'
    export default {
      name: 'Example',
      components: {
        SvgIcon
      }
    }
  </script>

三、vue3使用ref

使用Vue3时，我们通常使用ref获取子组件。使用ref可以方便地操作DOM元素、子组件等，是Vue3中十分重要的新特性。

下面是Vue3中使用ref的示例：

 {{ message }}
原创文章，作者：OINMX，如若转载，请注明出处：https://www.506064.com/n/331841.html