这篇文章主要介绍了vue.js实现一个会动的简历(包含底部导航功能，编辑功能),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
在网上看到一个这样的网站，STRML 它的效果看着十分有趣,如下图所示:
这个网站是用 react.js 来写的，于是，我就想着用 vue.js 也来写一版，开始撸代码。
首先要分析打字的原理实现，假设我们定义一个字符串 str ,它等于一长串注释加 CSS 代码，并且我们看到，当 css 代码写完一个分号的时候，它写的样式就会生效。我们知道要想让一段 CSS 代码在页面生效，只需要将其放在一对 标签对中即可。比如:
<title>JS Bin</title> 红色字体 body{ color:#f00; }
你可以狠狠点击此处 具体示例 查看效果。
当看到打字效果的时候，我们不难想到，这是要使用 间歇调用(定时函数:setInterval()) 或 超时调用(延迟函数:setTimeout()) 加 递归 去模拟实现 间歇调用 。一个包含一长串代码的字符串，它是一个个截取出来，然后分别写入页面中，在这里，我们需要用到字符串的截取方法，如 slice(),substr(),substring() 等，选择用哪个截取看个人，不过需要注意它们之间的区别。好了，让我们来实现一个简单的这样打字的效果，如下:
<title>JS Bin</title> <div id="result"></div>
你可以狠狠点击此处具体示例 查看效果。好的，让我们来分析一下以上代码的原理,首先放一个用于包含代码显示的标签，然后定义一个包含代码的字符串，接着定义一个初始值为 0 的变量，为什么要定义这样一个变量呢？我们从实际效果中看到，它是一个字一个字的写入到页面中的。初始值是没有一个字符的，所以，我们就从第 0 个开始写入， c 一个字一个字的加，然后不停的截取字符串，最后渲染到标签的内容当中去，当 c 的值大于等于了字符串的长度之后，我们需要清除定时器。定时函数看着有些不太好，让我们用超时调用结合递归来实现。
<title>JS Bin</title> <div id="result"></div>
你可以狠狠点击此处具体示例 查看效果。
好了，到此为止，算是实现了第一步，让我们继续，接下来，我们要让代码保持空白和缩进，这可以使用
标签来实现，但其实我们还可以使用css代码的 white-space 属性来让一个普通的 div 标签保持这样的效果，为什么要这样做呢，因为我们还要实现一个功能，就是编辑它里面的代码，可以让它生效。更改一下代码,如下:</p><div class="gaodaimacode"><pre class="prettyprint linenums"> <title>JS Bin</title> #result{ white-space:pre-wrap; oveflow:auto; } <div id="result"></div>
你可以狠狠点击此处 具体示例 查看效果。
接下来，我们还要让样式生效，这很简单，将代码在 style 标签中写一次即可，请看:
<title>JS Bin</title> #result{ white-space:pre-wrap; overflow:auto; } <div id="result"></div>
你可以狠狠点击此处 具体示例 查看效果。
我们看到代码还会有高亮效果，这可以用正则表达式来实现，比如以下一个 demo :
<title>代码编辑器</title> * { margin: 0; padding: 0; } .ew-code { tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; margin-left: .6em; background-color: #345; white-space: pre-wrap; color: #f2f2f2; text-indent: 0; margin-right: 1em; display: block; overflow: auto; font-size: 20px; border-radius: 5px; font-style: normal; font-weight: 400; line-height: 1.4; font-family: Consolas, Monaco, "宋体"; margin-top: 1em; } .ew-code span { font-weight: bold; } <code class="ew-code"> <div id="app"> <p>{{ greeting }} world!</p></div></code><code class="ew-code"> //定义一个javascript对象 var obj = { greeting: "Hello," }; //创建一个实例 var vm = new Vue({ data: obj }); /*将实例挂载到根元素上*/ vm.$mount(document.getElementById('app')); </code>
你可以狠狠点击此处 具体示例 查看效果。
不过这里为了方便，我还是使用插件 Prism.js ,另外在这里，我们还要用到将一个普通文本打造成 HTML 网页的插件 marked.js 。
接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件 .sync 事件修饰符，自行查看官网 vue.js 。本文来源gaodai#ma#com搞*代#码9网#
虽然这里用原生 js 也可以实现，但我们用 vue-cli 结合组件的方式来实现，这样更简单一些。好了，让我们开始吧:
新建一个 vue-cli 工程(步骤自行百度):
新建一个 styleEditor.vue 组件,代码如下:
<div class="container"> <div class="code"></div><div class="styleEditor"></div></div> .code{ display:none; }
新建一个 resumeEditor.vue 组件,代码如下:
<div class="resumeEditor"> <div></div><pre>{{result}}
.htmlMode{ anmation:flip 3s; } @keyframes flip{ 0%{ opactiy:0; } 100%{ opactiy:1; } }
