ej06.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejemplo 5</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <main>

        <button @click="loadData()" >CARGAR</button>
        <ol v-if="posts">
            <li v-for="(post,idx) in posts">
                {{post.title}}
            </li>

        </ol>

        <span v-else>ESPERANDO DATOS</span>

        {{$data}}
    </main>
    
</body>

<script type="text/javascript">
    new Vue({
        el:'main',
        data:{
            posts:null
           
        },
        methods:{
            loadData(){
                axios.get("https://jsonplaceholder.typicode.com/posts")
                .then((respuesta)=>{
                    this.posts=respuesta.data;
                    this.open11();


                });

            },

             open11(){
                    this.$notify.success({
                    title: 'Success',
                    message: 'This is a success message',
                    offset: 100
                    });
                }
                
            }

       
    });


</script>


</html>