관리 메뉴

moozi

vue.js ajax 본문

TIS_2020/응용SW2020_1기

vue.js ajax

moozi 2020. 5. 12. 12:13

<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>webpos-do</title>

 

  </head>

  <body>

   <div id='app'>

    <div v-for='post in posts'>

        <h3>{{ post.title }}</h3>

        <p>{{ post.userId }}</p>

        <p>{{ post.body }}</p>

    </div>

    </div>

    <script src="https://unpkg.com/vue"></script>

    <script>

     new Vue({

        el: '#app',

        data: {

            posts: []

        },

        created() {

            fetch('https://jsonplaceholder.typicode.com/posts/1')

                .then((response=> {

                    if(response.ok) {

                        return response.json();

                    }

                

                    throw new Error('Network response was not ok');

                })

                .then((json=> {

                    this.posts.push({

                        userId: json.userId,

                        title: json.title,

                        body: json.body

                    });

                })

                .catch((error=> {

                    console.log(error);

                });

        }

    });

    </script>

  </body>

</html>

 

'TIS_2020 > 응용SW2020_1기' 카테고리의 다른 글

vuejsAxios.html  (0) 2020.05.12
vuejsAjax01  (0) 2020.05.12
jquery03.html  (0) 2020.05.06
포트폴리오 url  (26) 2020.04.29
4/29 삼성데모  (0) 2020.04.29
Comments