这两天在看Vue的东西，发现个教程是基于vue-cli来做一个自动更新的简历。
敲了一遍，这里做一下总结。
这是原教程地址：https://github.com/jirengu-inc/animating-resume
其实自动更新的原理很简单，先把样式写好，放到一个字符串里，然后动态创建一个style标签，设置定时器setInterval，隔多少时间style标签里的样式自动更新一下，打开浏览器你会发现浏览器在不断的更新dom。
var n = 0;
setInterval(()=>{
//code是预先写好的字符串
this.code = this.code.substring(0,n);
n++;
},1000)
这是基本的原理。
但是呢，放到vue-cli里面，具体代码可能要更改一下。
vue-cli是一个完整的构建工具，帮你省了许多配置工作。
按照官网教程先搭建一个基本的工程。下图是工程的目录
dir.png
我们一般把代码放到src目录下，组件放到components目录下，图片，css放入assets目录，main.js作为主程序。如下图所示
要注意的是，写好的组件要结尾要写成.vue格式
而这个.vue文件也有挺多套路的，拿其中一个组件styleEditor举例
<template>
<div class="styleEditor" ref="container">
<div class="code" v-html="codeInStyleTag"></div>
<pre v-html="highlightCode"></pre>
</div>
</template>
<script>
//导入Prism库 实现语法高亮
import Prism from 'prismjs'
export default {
name: 'Editor',
props: ['code'],
computed:{
highlightCode:function(){
return Prism.highlight(this.code,Prism.languages.css);
},
codeInStyleTag:function(){
return `<style>${this.code}</style>`
}
},
methods:{
goBottom(){
this.$refs.container.scrollTop = 99999;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.code {
display: none;
}
</style>
1.template标签里面写入dom结构。
2.需要用到什么库，使用import..from(库名)语句，前提是你已在package.json文件里填入相应依赖，并运行npm install成功安装。
3 .vue文件会输出一个default对象，在这里你可以使用计算属性computed，方法methods，还有添加属性数组props。
4.要注意，在default对象中data属性不再是以对象方式出现，而是
data(){
return {
//私有数据写在这儿
key:value;
}
}
5.组件间相互联动依靠ref属性，再通过this.$refs.属性名 来做一些操作
6.最后的style标签填入组件样式。
7.引入写好的组件同样使用import语句，同时，在default的components对象加上组件名
最后总结一下这里主要知识点：
1.pre标签的使用
2.使用created()方法来操作元素，具体还有许多方法，详见vue生命周期图
3.this.$nextTick 下次dom刷新时的操控对象
4.对promise对象以及async函数的使用，优化异步
5.异步语句使用箭头函数捕获上下文
以上。
网友评论