const post = {
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    likes: 12,
    comments: 14
}

<div class="post">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <span class="likes">12 likes</span>
    <span class="comments">14 comments</span>
</div> 
    

<div class="post">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <span class="likes">12 likes</span>
    <span class="comments">14 comments</span>
</div> 
    

const post = {
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    likes: 12,
    comments: 14
}

var post = document.querySelector('.post');

var likes = post.querySelector('.likes');
var comments = post.querySelector('.comments');

likes.textContent = post.likes;
comment.textContent = post.comments;

<div class="post">
    <p>{{ post.body }}</p>

    <span class="likes">{{ post.likes }}</span>
    <span class="comments">{{ post.comments }}</span>
</div> 
    

const post = {
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    likes: 12,
    comments: 14
}

<div class="post">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <span class="likes">12 likes</span>
    <span class="comments">14 comments</span>
</div> 
    

var post = document.querySelector('.post');

var likes = post.querySelector('.likes');
var comments = post.querySelector('.comments');

likes.textContent = post.likes;
comment.textContent = post.comments;

<div class="post">
    <p>{{ post.body }}</p>

    <span class="likes">{{ post.likes }}</span>
    <span class="comments">{{ post.comments }}</span>
</div> 
    

const post = {
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    likes: 12,
    comments: 14
}

<div class="post">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <span class="likes">12 likes</span>
    <span class="comments">14 comments</span>
</div> 
    

<div class="post">
    <p>{{ post.body }}</p>

    <span class="likes">{{ post.likes }}</span>
    <span class="comments">{{ post.comments }}</span>
</div> 
    

setState({
    foo: 'bar'
});

this.foo = 'bar'

const post = {
    body: 'Lorem ipsum dolor sit amet.',
    likes: 12,
    comments: 14
}

<div class="post">
    <p>Lorem ipsum dolor sit amet</p>

    <span class="likes">12 likes</span>
    <span class="comments">14 comments</span>
</div> 
    

<template>
    <div>{{ name }}</div> 
</template>

<script>
export default {
    name: 'MyComponent' 
};
</script>

<style>
div { color: white; }
</style>

<template>
    <div>{{ name }}</div> 
</template>

<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            name: 'foo'
        };
    }
};
</script>

<style>
div { color: white; }
</style>

export default {
    name: 'MyComponent',
    data() {
        return {
            name: 'foo'
        };
    }
    render(h) {
        h('div', [this.name]);
    }
};

<template>
    <div>{{ name }}</div> 
</template>

<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            name: 'foo'
        };
    }
};
</script>

<style>
div { color: white; }
</style>

export default {
    name: 'MyComponent',
    data() {
        return {
            name: 'foo'
        };
    }
    render(h) {
        h('div', [this.name]);
    }
};

{
    tag: 'div',
    children: ['foo']
}

<template>
    <div>{{ name }}</div> 
</template>

<script>
export default {
    name: 'MyComponent',
    data() {
        return {
            name: 'foo'
        };
    }
};
</script>

<style>
div { color: white; }
</style>

export default {
    name: 'MyComponent',
    data() {
        return {
            name: 'foo'
        };
    }
    render(h) {
        h('div', [this.name]);
    }
};

{
    tag: 'div',
    children: ['foo']
}

<div>foo</div>

[
    {
        "name": {
            "first": "juanita",
            "last": "adams"
        },
        "address": "887 james st, port macquarie, south australia",
        "email": "juanita.adams@example.com",
        "avatar": "https://randomuser.me/api/portraits/thumb/women/70.jpg"
    },
    {
        "name": {
            "first": "alba",
            "last": "hubert"
        },
        "address": "7534 place de l'abbé-basset",
        "email": "alba.hubert@example.com",
        "avatar": "https://randomuser.me/api/portraits/thumb/women/12.jpg"
    }
]