![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue筆記
文章平均质量分 59
tp27933
这个作者很懒,什么都没留下…
展开
-
Vue3 Quasar簡易Lazy Loading
【代码】Vue3 簡易Lazy Loading。原创 2023-05-15 14:10:10 · 839 阅读 · 0 评论 -
純css 實現文字輪播顯示
多個文字進行像圖片那樣的自動輪播,以下已 vue 來示範 (主要使用css)原创 2022-11-23 15:28:36 · 1016 阅读 · 0 评论 -
在vue3使用Pinia
今年到今天已經過了一大半了,又有新的技術需要學習了。這次由於vue3的到來vuex也被官方deprecated , 隨之取代的則是Pina。本篇紀錄學習Pina的相關筆記!原创 2022-08-31 15:56:54 · 1971 阅读 · 0 评论 -
js 項目筆記紀錄
在此記錄在開發項目時遇到的問題,或是好用的方法~從某個對象中取出某些屬性並創建新的對象這是我在專案中最常碰到的事情,後臺傳來的參數中有很多是前端並不需要的資料,也就是只有幾項欄位需要而已,並且還會對這些參數進行格式化或過濾等等,因此淺拷貝(新建一個獨立的對象)是完全有必要的forEach方法最簡單的方法就是使用forEach了const cloneAndPluck = function(sourceObject, keys) { const newObject = {}; keys原创 2021-03-26 16:28:12 · 354 阅读 · 0 评论 -
Axios在vue中切換route時取消所有請求
在網路上看過很多版本的用法,理念都是相同的都是使用axios中的CancelToken方法在攔截器裡面統一在每次發送請求時,將請求加入至要取消地arry中這個arry網上有其他作法是使用vuex來調用,但是對於我的項目來說vuex管理數據已經太龐大,後來又看到更簡單的做法是直接把arry掛在window下window._axiosPromiseArr = [] // 全局聲明 (變數掛在window下) // http request 拦截器axios.interceptors.re原创 2021-01-21 09:29:19 · 298 阅读 · 0 评论 -
vue3 新增API整理
1. Ref / Reactivea. Ref可以接受 simple 或 Object type,但是不會對物件或陣列內部的屬性變動做監聽。聲明 並傳值 const state = ref ( 10 ) = > 調用 reactive 並創建對象 => 在對象自動聲成 { value : 傳遞的值 }因為這樣的過程,因此需要透過 .value來取值 ,如 state.value。b. Reactive只能接受物件或陣列,可以做深層的監聽。<script&g原创 2020-12-11 14:28:44 · 486 阅读 · 2 评论 -
在Vue Cli使用 normalize.css
使用方式安裝 npm install --save normalize.cssmain.js引入 import 'normalize.css/normalize.css'如果引入報錯,可能没有安装css-loader 和style-loader npm install css-loader style-loader原创 2020-11-29 21:37:02 · 589 阅读 · 1 评论 -
搭建Vue Cli / 文件架構
上次在面試時候要用vue cli寫個小練習,因為只有過一個cli專案,之後一直work on專案上於是許久沒有從頭建立vue cli,當時還是面試官幫忙搭了個環境,太尷尬此文章以window環境為範例搭建 Vue Cli1.安裝Vue Cilnpm install -g @vue/cli //全局安裝安裝過程有出現錯誤具體內容是啥忘記了,但是原因是我將npm 全局安裝文件夾給改變了但是設定還沒有,只要將設定改位置即可// 查看全局安装路径 npm root -g // 查看npm的基础原创 2020-11-29 21:10:07 · 54 阅读 · 0 评论 -
Vue cli4導入svg
在建立vue cli項目時免不了的需要圖,這裡已導入阿里巴巴圖庫並且在導航內使用圖標為範例。安装 svg-sprite-loader 用來編譯svg的圖片npm install --save-dev vue-svg-sprite-loader在根目錄創建vue.config.js,如果存在就不需要創建,並添加一下配置module.exports = { // eslint-loader 是否在保存的时候检查 lintOnSave: true, chainWebpack: con原创 2020-11-10 18:18:04 · 99 阅读 · 0 评论 -
axios 管理api方式
從傳統方式來看,是要一個一個調用接口,但是如果有天調用方式(post/get…)改變或是地址改了就會需要一個一個更改,非常沒有效率。此時我們可以將接口抽出來,在需要的時候引用接口,如果更改接口方法等時,只需要更改一個即可。以下為攔截三步驟第一步:調用接口 =>透過import調用<template>//some code</template><script>import { getSms } from '@/api/login'export d原创 2020-09-25 18:58:54 · 157 阅读 · 0 评论 -
vue.config 配置
這裡記錄下 練習vue時用到的configconst path = require('path')function resolve (dir) { return path.join(__dirname, '.', dir)}module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '' : '/', outputDir: process.env.NODE_ENV === 'production' ?原创 2020-09-25 14:38:56 · 826 阅读 · 0 评论 -
解决Vue cli 4.0 自动导入svg的问题
問題 :剛開始學著用vue cli時最常遇到一個問題是,想要修改某個標籤樣式時,老是失效,但是在別的頁面上此標籤正常運作。如果刪掉scope局部作用時,樣式才正常渲染,但是全局樣式同樣帶來很多問題。原因分析 :當時使用的是element ui組件,而在vue cli,此插件在scope作用域因为权重的问题一律被視為子組件。在vue裡,父组件中是不能直接修改子组件的样式的。解決方法 :需要在父组件中使用vue的深度作用选择器 /deep/<style lang="scss" scoped原创 2020-07-15 21:11:58 · 306 阅读 · 0 评论 -
Vue父子組件
vue 十分注重於解藕(解藕的目的就是让各个组件可以单独使用),而在有些情況下父子組件需要相互傳遞data父傳子 props :案例假設: 父子組件為一個容器,而子組件遍歷並展示data中的數據。此時,每次如果展示內容龐大,每次子組件都要向後台請求是效率很低的。這個情況下通常是由父組件向後台請求,然後再傳遞給子組件步驟:先在子組件內聲明一個props選項,並為數據命名(此處命名為data,可以任意命名),還有其他數據添加*export default { name:'navMenu',原创 2020-07-15 14:14:13 · 179 阅读 · 0 评论 -
vue 傳參方法
若為父子組件關系父傳子則使用:props子傳父則使用:emit若不為父子關系,想在兩個組件上傳參則使用vuex未完…原创 2020-07-08 21:38:45 · 144 阅读 · 0 评论