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/zh-tw/n/331841.html