八 VueJs 填坑日記之引數傳遞及內容頁面的開發

2021-09-25 22:44:09 字數 1956 閱讀 8451

編寫內容頁面

還是廢話少說，先上**，將以下**儲存到/src/pages/content.vue中：

關於樣式的東西，咱們後期整合amaze ui的時候再來實現，暫時只實現功能。

重點分析

其他的內容，我們在列表頁面已經見過了。這裡第一次出現 這個東西。同樣是渲染內容， v-html 和 v-text 有什麼區別呢？其實區別非常簡單，v-text 會把所有的內容當成字串給直接輸出出來。而 v-html 會把字串給轉換為 html 標記語言給渲染出來。

更多關於vue的指令內容請參見：

注意： 我們在列表中，我們使用的是 header 注意的元件命名方式，為什麼我這邊用了 myheader 注意的元件命名方式呢？其實，我想說明的是，我們不要使用 html 本身就支援的標籤名稱來自定義我們的元件，這容易導致混亂，最好，是像內容頁裡面這樣，使用自定義的標籤名。（先前忘記了，現在強調一下。大家可以對之前的**進行修改。）

script 部分

**基本上是一致的，重點是 id: this.$route.params.id, 這一句。還記得我們先前是怎麼配置路由的嗎？忘記了不要緊，再回顧一下，/src/router/index.js裡是這樣寫的：

import vue from 'vue'


import router from 'vue-router'


import index from '@/pages/index'


import content from '@/pages/content'


vue.use(router)


export default new router(,]})
看重點：path: '/content/:id', 中，我們使用了 :id 這個東西。這是動態路由匹配。我們需要從我們的 url 中，來獲取我們的 id 然後根據這個 id 來進行資料的查詢。那麼我們已經在 url 包含了這個 id 了。

http://localhost:8080/#/content/5a11132da6731ee928cc6bbc
如上：5a11132da6731ee928cc6bbc這個就是 id ，奇怪是奇怪了點，但確實就是 id。如何獲取id引數，不用多想，vuerouter 早就給我們準備了解決方法。

我們可以在專案中列印，可以看到下圖紅框圈住的就是router物件：

我們再看下我們的介面資料呼叫，**如下：

this.$api.get('topic/' + this.id, null, r => )
等於沒什麼要說的，就是把資料拿過來了而已，需要注意的是，我們的請求的介面位址是根據 id 進行變化的。所以，我這邊採用了字串拼接的方法，'topic/' + this.id 來得到我們真正想要請求的介面資料。

錯誤處理

在上面圖中，我們發現出了乙個錯誤，意思是說不能讀取名為loginname的屬性，因為沒有定義，那我們console.log(r.data)的時候，會發現loginname確實給我們返回了。那這是為什麼呢？其實也沒有大不了的，這個意思是說初始的時候我們data裡的dat: {}是空，確實是沒有author.loginname屬性存在。那怎麼解決呢？很簡單，看**：

data () 


}}},

十二 VueJs 填坑日記之專案打包發布

打包專案 進入到我們的專案根目錄 d cd vueworks my vue 然後執行如下 進行打包 npm run build結果如下 現在我們已經把專案打包好，打完好的專案預設位置在 dist資料夾裡。我們從打包時的cmd的日誌來看，裡面有很多的map檔案的生成，由於截圖有限，上面只是擷取了結尾，...

Pdfjs dist 填坑日記

vue mobile 專案中乙個需求是預覽pdf，需要能加水印，可以縮放，另外需要無汙染零新增。找到了pdfjs dist。h5實現，功能比較強大。文件真的一般。網上找了個例子，寫上，發現好用。let vm this let url xx var canvas document.getelement...

Git填坑日記

問題 cmd命令列在進行http傳輸的時候輸不了密碼 解決 使用git bash來輸入 問題 git在通過http clone的時候使用者名稱是你的登入時的使用者名稱，密碼是你自己另外設定的密碼 問題 git最常用的指令 add commit push 解決 如果提示沒東西push的話你一定是忘了之...