vue.js實現(xiàn)會動的簡歷(包含底部導航功能，編輯功能)

你可以狠狠點擊此處 具體示例 查看效果。

當看到打字效果的時候，我們不難想到，這是要使用 間歇調用(定時函數(shù):setInterval()) 或 超時調用(延遲函數(shù):setTimeout()) 加 遞歸 去模擬實現(xiàn) 間歇調用 。一個包含一長串代碼的字符串，它是一個個截取出來，然后分別寫入頁面中，在這里，我們需要用到字符串的截取方法，如 slice(),substr(),substring() 等，選擇用哪個截取看個人，不過需要注意它們之間的區(qū)別。好了，讓我們來實現(xiàn)一個簡單的這樣打字的效果，如下:

你可以狠狠點擊此處具體示例 查看效果。好的，讓我們來分析一下以上代碼的原理,首先放一個用于包含代碼顯示的標簽，然后定義一個包含代碼的字符串，接著定義一個初始值為 0 的變量，為什么要定義這樣一個變量呢？我們從實際效果中看到，它是一個字一個字的寫入到頁面中的。初始值是沒有一個字符的，所以，我們就從第 0 個開始寫入， c 一個字一個字的加，然后不停的截取字符串，最后渲染到標簽的內容當中去，當 c 的值大于等于了字符串的長度之后，我們需要清除定時器。定時函數(shù)看著有些不太好，讓我們用超時調用結合遞歸來實現(xiàn)。

你可以狠狠點擊此處具體示例 查看效果。

好了，到此為止，算是實現(xiàn)了第一步，讓我們繼續(xù)，接下來，我們要讓代碼保持空白和縮進，這可以使用

 標簽來實現(xiàn)，但其實我們還可以使用css代碼的 white-space 屬性來讓一個普通的 div 標簽保持這樣的效果，為什么要這樣做呢，因為我們還要實現(xiàn)一個功能，就是編輯它里面的代碼，可以讓它生效。更改一下代碼,如下:



 
 
 
 


 

 

你可以狠狠點擊此處 具體示例 查看效果。
接下來，我們還要讓樣式生效，這很簡單，將代碼在 style 標簽中寫一次即可，請看:



 
 
 
 


 

 
 
 

你可以狠狠點擊此處 具體示例 查看效果。
我們看到代碼還會有高亮效果，這可以用正則表達式來實現(xiàn)，比如以下一個 demo :




 
 
 
 
 



 
  

   
{{ greeting }} world!
  
 
 
  //定義一個javascript對象
  var obj = { 
   greeting: "Hello," 
  }; 
  //創(chuàng)建一個實例
  var vm = new Vue({ 
   data: obj 
  });
  /*將實例掛載到根元素上*/
  vm.$mount(document.getElementById('app'));
 
 

你可以狠狠點擊此處 具體示例 查看效果。
不過這里為了方便，我還是使用插件 Prism.js ,另外在這里，我們還要用到將一個普通文本打造成 HTML 網(wǎng)頁的插件 marked.js 。
接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時器，然后重新調用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件 .sync 事件修飾符，自行查看官網(wǎng) vue.js 。
雖然這里用原生 js 也可以實現(xiàn)，但我們用 vue-cli 結合組件的方式來實現(xiàn)，這樣更簡單一些。好了，讓我們開始吧:
新建一個 vue-cli 工程(步驟自行百度):
新建一個 styleEditor.vue 組件,代碼如下:


新建一個 resumeEditor.vue 組件,代碼如下:


新建一個底部導航菜單組件 bottomNav.vue ,代碼如下:


接下來是核心 APP.vue 組件代碼:




到此為止，一個可以快速跳過動畫，可以暫停動畫，還有音樂播放，還能自由編輯代碼的會動的簡歷已經(jīng)完成，代碼已上傳至 git源碼 ,歡迎 fork ,也望不吝嗇 star 。
在線預覽
總結
以上所述是小編給大家介紹的vue.js實現(xiàn)會動的簡歷(包含底部導航功能，編輯功能)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
            
            
                        

            標題名稱：vue.js實現(xiàn)會動的簡歷(包含底部導航功能，編輯功能)            

            標題URL：http://weahome.cn/article/pessjd.html