관리 메뉴

moozi

vue.js ajax 본문

TIS_2019/응용sw2019_2기

vue.js ajax

moozi 2019. 11. 6. 12:17

<!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_2019 > 응용sw2019_2기' 카테고리의 다른 글

vue.js ajax with axios  (0) 2019.11.06
AjaxDB2.php  (0) 2019.11.06
jQuery연습문제03  (0) 2019.11.05
Ajax연습문제02  (0) 2019.11.04
suggestion  (0) 2019.11.04
Comments