1/*for development ===>*/ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2/*for production ===>*/ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
3

1I like the vue

1<!-- production version, optimized for size and speed -->
2<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1<script>
2  import { butter } from '@/buttercms'
3  export default {
4    name: 'blog-home',
5    data() {
6      return {
7        page_title: 'Blog',
8        posts: []
9      }
10    },
11    methods: {
12      getPosts() {
13        butter.post.list({
14          page: 1,
15          page_size: 10
16        }).then(res => {
17          this.posts = res.data.data
18        })
19      }
20    },
21    created() {
22      this.getPosts()
23    }
24  }
25</script>
26
27<template>
28  <div id="blog-home">
29      <h1>{{ page_title }}</h1>
30      <!-- Создаём `v-for` и добавляем `key` для Vue. -->
31      <!-- Для этого используем комбинацию slug и index -->
32      <div
33        v-for="(post,index) in posts"
34        :key="post.slug + '_' + index"
35      >
36        <router-link :to="'/blog/' + post.slug">
37          <article class="media">
38            <figure>
39              <!-- Привязываем результаты с помощью `:` -->
40              <!-- Используем `v-if`/`else` для отображения картинки записи блога (`featured_image`) -->
41              <img
42                v-if="post.featured_image"
43                :src="post.featured_image"
44                alt=""
45              >
46              <img
47                v-else
48                src="http://via.placeholder.com/250x250"
49                alt=""
50              >
51            </figure>
52            <h2>{{ post.title }}</h2>
53            <p>{{ post.summary }}</p>
54          </article>
55        </router-link>
56      </div>
57  </div>
58</template>

1return Vue.h('h2', {}, this.blogTitle)
2

1return Vue.h('h1', {}, this.blogTitle)
2hi rahim this is test
3