關於自己學vue的一些基礎總結

2021-09-25 21:46:01 字數 2711 閱讀 9740

安裝4.0以上的webpack還需要再安裝webpack-cli

webpack.config.js 中的api如果是複數,一般是陣列

webpack.config.js配置檔案中的plugins:htmlwebpackplugin要放在外掛程式的首位,不然會出錯

匹配vue檔案時,要在plugins裡面配置new vueloaderplugin()

打包js檔案時 要避免打包 node_modules

配置不同的檔案,需要不同的載入器loader,部分loader會依賴其他loader,被依賴的loader不一定要加入匹配規則

要先全域性安裝webpack

安裝cli3:npm install @vue/cli -g

安裝cli2模板:npm install @vue/cli-init -g

vue-cli2執行方式:vue init webpack [專案名稱]

選項解析:

runtime-compiler 是註冊元件,然後替換模板,template=>ast=>render=>dom

runtime-only 比上面輕了6kb,是直接渲染模板物件到頁面中,因為vue-template-complier會將元件的template編譯成物件, 直接render=>dom, 效能更高,**量更少.

執行專案方式:npm run dev

vue-cli3執行方式:vue create [專案名稱]

在選項配置時可以手動新增各種loder和test,目錄多了個瀏覽器管理檔案和public資料夾存放資源

通過命令vue ui來進入使用者圖形介面來操作webpack配置檔案和各種依賴和loader還有執行引數等等

安裝vue-cli3時多了個vue-service,裡面封裝了webpack配置檔案,負責編譯和熱更新,用於開發環境

執行專案方式:npm run service

通過axios.create建立例項,不需要設定全域性介面,並且具有promise屬性,可以直接返回例項來呼叫.then

請求攔截: 例項物件.interceptors.request.use()

響應攔截: 例項物件.interceptors.response.use()

router-link每次被選中時,身上會有兩個動態class,可以通過linkactiveclass: 'myactive』來修改該類表示活動狀態

router-view預設放置de****t元件,可以給router-view加name屬性,並在元件前面加』name的值』做到單頁面多個 router-view布局

this.$ router是乙個路由導航物件,可以方便的使用js**實現路由的跳**

const userid = 『123』

router.push( }) // -> /user/123

router.push(}) // -> /user/123

// this will not work

router.push( }) // -> /user

通過new vuex.store() 例項,得到乙個 資料倉儲物件

state中的資料,不能直接修改,如果想要修改,必須通過 mutations

如果元件想要直接 從 state 上獲取資料: 需要 this.$store.state.***

如果 元件,想要修改資料,必須使用 mutations 提供的方法,需要通過 this.$store.commit(『方法的名稱』, 唯一的乙個引數)

如果 store 中 state 上的資料, 在對外提供的時候,需要做一層包裝,那麼 ,推薦使用 getters, 如果需要使用 getters ,則用 this.$store.getters.***

##要先建立賬號和密碼,並且設定遠端資料庫,還要新增readme.md檔案和.gitignore來避免不必要的檔案

git add .

git commit -m 「提交資訊」

git push

除了上面的操作,可以在設定遠端資料庫後,可以在vs code上進行儲存和推送資料

為保證**的可維護性,多個元件不能對 第三方包 太過依賴,可以將第三方包 封裝 在乙個檔案

v-bind:is="" 引號裡面的內容當作表示式來解析

將非超連結改為router-link影響樣式時,可以使用tag轉換回原來的使用樣式

匯入其他目錄的js檔案來建立物件 需要新增{}存放物件 例:import from 『./network/request』

從網上資料獲取資訊時,傳過來的是個物件,img標籤要加v-bind指令

使用v-for渲染,一定要加:key="" key裡面的內容要唯一,不能重複,建議為數值和字串

template模板中 只能有乙個根元素, 如果模板裡面有v-for 可以用template-group做模板標籤

在元件中的 data 被定義為乙個方法,並且要返回乙個物件

父元件向子元件傳值時要把別名和資料用v-bind繫結在一起,子元件中要使用 props 屬性來接收別名,

通過別名使用資料裡面的資料,接收的資料只能讀,不能更改,不然會報錯

父元件向子元件傳遞方法:在子元件中用v-on把別名和方法繫結在一起,別名就能引用父元件的方法,如果子元件在模板 物件中設立乙個子元件的方法,然後在子元件的methods裡面設定這個方法使用this.$emit觸發父元件的方法

可以在父元件方法中新增引數,然後子元件呼叫父元件方法時,可以把資料傳遞回來給父元件

在標籤和元件中可以新增ref="",使用this.$refs來獲取標籤和元件的物件

關於vue的一些總結

最近學習了一段時間的vue js 除了路由沒用過之外 基本上其他的都用過了 對於vue的一些用法 在此做乙個總結。開始使用vue之前 需要匯入vuejs這個檔案到專案中 在做專案的過程中 我們基本上需要用到的就是vue的雙向繫結 條件與迴圈了 下面先介紹一下vue的雙向繫結 指令 v model v...

寫一些關於自己的

我的大學四年就快結束了,再過幾個月就要離開這所大學了。慶幸的是自己又考上了研究生,還能夠繼續在校園裡讀3年的書,也可以算是一件幸福的事情吧。這次讀研的專業是學計算機了,算是自己選擇的,也是自己喜歡的。不用再像本科那時,選了乙個自己不喜歡的,還整天混日子。導師選好了,做的是圖形影象處理。目前,自己的專...

關於自己的一些思考

說真的最近有些迷茫,一天恍恍惚惚,天天在期盼什麼,卻又什麼也沒有期盼到,乙個朋友說,讓我去學校,可我覺得還是離家太遠,也許生活就是這樣,總不會那麼如意,人到一定階段後,就沒有那麼衝動,沒有那麼著迷,開始走向理性,從目前的形式來看,外面的環境不是太好,就業形式比較緊張,目前聯絡的地方都還沒有回音,看來...