這兩天在看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.異步語句使用箭頭函數捕獲上下文

以上。