這段時間學(xué)習(xí)vue，寫了個小博客，后臺接口用的laravel，過程中遇到過很多問題，在此總結(jié)一下，并附上代碼鏈接：(我還沒有買域名，所以大家只看代碼就好)
https://github.com/rencong/bl...
https://github.com/rencong/bl...

我知道網(wǎng)上有很多寫好的分頁組件，但是我的初衷是學(xué)習(xí)，不求快，所以我自己寫的，遇到的問題是組件之間的雙向綁定。
我在list頁面調(diào)用paginator組件,并將分頁信息傳給它，結(jié)果paginator組件props的屬性不變化。
原因是組件內(nèi)不能修改props的值，同時修改的值也不會同步到組件外層。
同步組件外對props的修改：

props: [ html' target='_blank'>current , last ],watch: { current(val) {//監(jiān)聽current的變更，并同步帶currentPage中 this.currentPage = val; last(val) { this.lastPage = val;data() { return { currentPage: this.current, lastPage: this.last}

這里我只需要同步paginator外對props的修改，如果需要通知到paginator外，請參考如何在Vue2中實現(xiàn)組件props雙向綁定

覺得segmentfault的富文本編輯器很好看，找了個相似的，就是simpleMDE
附上翻譯的比較全面的simpleMDE的配置
使用過程中，覺得很有幫助的一篇文章是SimpleMDE編輯器 + 提取HTML + 美化輸出
唯一注意點是vue中引入fontawesome用以下代碼

npm install font-awesome --save-devimport font-awesome/scss/font-awesome.scss 

可以用npm、bower或cdn引入

npm install simplemde --save

bower install simplemde --save

 link rel= stylesheet href= https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css  script src= /uploads/allimg/190429/09495S333-0.jpg /script 

這里我在laravel里用的很順，就像GitHub上說的步驟一樣，但是在vue中，利用v-model怎么都獲取不到富文本中的內(nèi)容，最后研究結(jié)果是需要自己手動獲取編輯器的內(nèi)容，并賦值給變量。

this.markdown = new SimpleMDE({...});//獲取編輯器的值saveArticle() { this.params.content = this.markdown.value();//給編輯器賦值this.markdown.value(this.params.content);

另外simplemde還可以自定義工具欄，感興趣的同學(xué)可以去看下他的源碼，我是看了源碼自定義的，我展示一個設(shè)置標(biāo)題的舉例

 this.markdown = new SimpleMDE({ autoDownloadFontAwesome: false, element: that.$refs.markdownCreate, status: false, toolbar: [ name: title1 , action: function customFunction(editor) { var cm = editor.codemirror; that._toggleHeading(cm, title , 1); className: glyphicon glyphicon-align-left , title: title1  name: title2 , action: function customFunction(editor) { var cm = editor.codemirror; that._toggleHeading(cm, title , 2); className: glyphicon glyphicon-align-left , title: title2 _toggleHeading(cm, direction, size) { if (/editor-preview-active/.test(cm.getWrapperElement().lastChild.className)) return; var startPoint = cm.getCursor( start  var endPoint = cm.getCursor( end  var textNew =  for (var i = startPoint.line; i = endPoint.line; i++) { (function (i) { var text = cm.getLine(i); textNew += text; })(i); if (size === 1) { textNew === ? textNew = 標(biāo)題文字/n==== : textNew += /n====  } else if (size === 2) { textNew === ? textNew = 標(biāo)題文字/n---- : textNew += /n----  cm.replaceSelection(textNew); cm.focus();}

vue和laravel引入highlight還有點不一樣
laravel中這樣引入

 link rel= stylesheet href= //cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css  script src= //cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js /script  script hljs.initHighlightingOnLoad(); /script 

vue中這樣引入

 link rel= stylesheet href= http://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css  script src= http://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js /script main.js中Vue.directive( highlight , function (el) { let blocks = el.querySelectorAll( pre code  blocks.forEach((block) = { hljs.highlightBlock(block)});

用法是 p v-html= Marked v-highlight

之前本來只先做文章展示，但感覺用到的技能有點少，就想多做點，然后就開始做登錄注冊還有評論，登錄注冊我用的token認證，后臺很簡單，vue這邊我挑選出一個很好的文章，推薦給大家vue+vuex+axios做登錄、注冊頁權(quán)限攔截。看了之后對我很有幫助

上傳GitHub之后，再克隆到本地需要npm install,并 npm run dev
此時報錯Error: No PostCSS Config found in...
解決辦法參考postcss配置

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP ！

相關(guān)推薦：

Laravel中Macroable宏指令的用法

關(guān)于如何短時間內(nèi)搭建一個restful資源服務(wù)器的方法介紹

以上就是關(guān)于利用Vue-laravel前端和后端分離寫一個博客的方法的詳細內(nèi)容，PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。