vue.js实现会动的简历(包含底部导航功能，编辑功能)

你可以狠狠点击此处 具体示例 查看效果。

当看到打字效果的时候，我们不难想到，这是要使用 间歇调用(定时函数:setInterval()) 或 超时调用(延迟函数:setTimeout()) 加 递归 去模拟实现 间歇调用 。一个包含一长串代码的字符串，它是一个个截取出来，然后分别写入页面中，在这里，我们需要用到字符串的截取方法，如 slice(),substr(),substring() 等，选择用哪个截取看个人，不过需要注意它们之间的区别。好了，让我们来实现一个简单的这样打字的效果，如下:

你可以狠狠点击此处具体示例 查看效果。好的，让我们来分析一下以上代码的原理,首先放一个用于包含代码显示的标签，然后定义一个包含代码的字符串，接着定义一个初始值为 0 的变量，为什么要定义这样一个变量呢？我们从实际效果中看到，它是一个字一个字的写入到页面中的。初始值是没有一个字符的，所以，我们就从第 0 个开始写入， c 一个字一个字的加，然后不停的截取字符串，最后渲染到标签的内容当中去，当 c 的值大于等于了字符串的长度之后，我们需要清除定时器。定时函数看着有些不太好，让我们用超时调用结合递归来实现。

你可以狠狠点击此处具体示例 查看效果。

好了，到此为止，算是实现了第一步，让我们继续，接下来，我们要让代码保持空白和缩进，这可以使用

 标签来实现，但其实我们还可以使用css代码的 white-space 属性来让一个普通的 div 标签保持这样的效果，为什么要这样做呢，因为我们还要实现一个功能，就是编辑它里面的代码，可以让它生效。更改一下代码,如下:



 
 
 
 


 

 

你可以狠狠点击此处 具体示例 查看效果。
接下来，我们还要让样式生效，这很简单，将代码在 style 标签中写一次即可，请看:



 
 
 
 


 

 
 
 

你可以狠狠点击此处 具体示例 查看效果。
我们看到代码还会有高亮效果，这可以用正则表达式来实现，比如以下一个 demo :




 
 
 
 
 



 
  

   
{{ greeting }} world!
  
 
 
  //定义一个javascript对象
  var obj = { 
   greeting: "Hello," 
  }; 
  //创建一个实例
  var vm = new Vue({ 
   data: obj 
  });
  /*将实例挂载到根元素上*/
  vm.$mount(document.getElementById('app'));
 
 

你可以狠狠点击此处 具体示例 查看效果。
不过这里为了方便，我还是使用插件 Prism.js ,另外在这里，我们还要用到将一个普通文本打造成 HTML 网页的插件 marked.js 。
接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件 .sync 事件修饰符，自行查看官网 vue.js 。
虽然这里用原生 js 也可以实现，但我们用 vue-cli 结合组件的方式来实现，这样更简单一些。好了，让我们开始吧:
新建一个 vue-cli 工程(步骤自行百度):
新建一个 styleEditor.vue 组件,代码如下:


新建一个 resumeEditor.vue 组件,代码如下:


新建一个底部导航菜单组件 bottomNav.vue ,代码如下:


接下来是核心 APP.vue 组件代码:




到此为止，一个可以快速跳过动画，可以暂停动画，还有音乐播放，还能自由编辑代码的会动的简历已经完成，代码已上传至 git源码 ,欢迎 fork ,也望不吝啬 star 。
在线预览
总结
以上所述是小编给大家介绍的vue.js实现会动的简历(包含底部导航功能，编辑功能)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
            
            
                        

            本文名称：vue.js实现会动的简历(包含底部导航功能，编辑功能)            

            本文路径：http://cxhlcq.com/article/pessjd.html