這段時(shí)間學(xué)習(xí)vue，寫了個(gè)小博客，后臺(tái)接口用的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的值，同時(shí)修改的值也不會(huì)同步到組件外層。
同步組件外對(duì)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外對(duì)props的修改，如果需要通知到paginator外，請(qǐng)參考如何在Vue2中實(shí)現(xiàn)組件props雙向綁定

覺得segmentfault的富文本編輯器很好看，找了個(gè)相似的，就是simpleMDE
附上翻譯的比較全面的simpleMDE的配置
使用過程中，覺得很有幫助的一篇文章是SimpleMDE編輯器 + 提取HTML + 美化輸出
唯一注意點(diǎn)是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é)果是需要自己手動(dòng)獲取編輯器的內(nèi)容，并賦值給變量。

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

另外simplemde還可以自定義工具欄，感興趣的同學(xué)可以去看下他的源碼，我是看了源碼自定義的，我展示一個(gè)設(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還有點(diǎn)不一樣
laravel中這樣引入

 link rel= stylesheet href= //cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css  script src= //cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js /script  script hljs.initHighlightingOnLoad(); /script 

vue中這樣引入

 link rel= stylesheet href= http://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css  script src= http://cdn.jsdelivr.net/gh/highlightjs/[email protected]/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

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

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

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

相關(guān)推薦：

Laravel中Macroable宏指令的用法

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

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

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