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

在网上看到一个这样的网站，STRML 它的效果看着十分有趣,如下图所示:

成都创新互联公司是一家集网站建设,高淳企业网站建设,高淳品牌网站建设,网站定制,高淳网站建设报价,网络营销,网络优化,高淳网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

这个网站是用 react.js 来写的，于是，我就想着用 vue.js 也来写一版，开始撸代码。

首先要分析打字的原理实现，假设我们定义一个字符串 str ,它等于一长串注释加 CSS 代码，并且我们看到，当 css 代码写完一个分号的时候，它写的样式就会生效。我们知道要想让一段 CSS 代码在页面生效，只需要将其放在一对

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

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




 
 
 JS Bin

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




 
 
 JS Bin

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

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

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




 
 
 JS Bin

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

接下来，我们还要让样式生效，这很简单，将代码在 style 标签中写一次即可，请看:




 
 
 JS Bin

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

我们看到代码还会有高亮效果，这可以用正则表达式来实现，比如以下一个 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://mswzjz.cn/article/pessjd.html

网站建设知识

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

其他资讯