Day11-旧网站重写成Vue_2_json抓取资料与渲染

今天要把「关於」的部分写完
首先因为架构是差不多的，所以我打算使用json做成文档然後再抓取渲染
先把文字都照ID、标题、内文创建好json档

回到HTML在date中新增一个abouts: [] 的空阵列，好储存抓取到的json档内容
接着在methods写抓取json的function

methods: {
    getData() {
        fetch("about.json").then(res => res.json())
            .then(abouts => this.abouts = abouts);
    }
}

还要在mounted中呼叫刚刚写好的function，让画面跑完的同时帮我们抓取好资料

mounted() {
    this.getData();
}

最後就能开始写入我们的网页上了
这边要用到v-for来渲染资料，拿之前写好的HTML框架来放上资讯

<div v-for="abt in abouts" class="ABT_content" :class="abt.ID" :id="abt.ID">
    <div class="content_title">
        <div class="subtitle">{{abt.subtitle}}</div>
        <div class="title">{{abt.title}}</div>
    </div>
    <div class="btm_content">
        {{ abt.btm_content }}
    </div>
</div>

在最外面的div加上v-for，然後在对应的部分放上json的内容，就可以成功将资料渲染出来了

这边已经先把需要的CSS加上去了，由於json档无法把内文做换行，所以之前在整理资料时有放入一些带有HTML元素的文字，比如<br/>这个换行的语法
但是vue在使用{{}}抓取json档时，会把内文转译成纯文字然後渲染上来，所以连我们的换行都被直接显示在画面中了
所以这边我们需要使用v-html来帮我们解析带有HTML元素的内容，并以HTML的形式加入网站中

<div class="btm_content" v-html="abt.btm_content"></div>

把btm_content的那个div的内文改以v-html放入，然後便能成功把内文跟写好的CSS放在网站上