관리 메뉴

moozi

vuejsAjax02.html with Axios 본문

TIS_2020/응용SW2020_1기

vuejsAjax02.html with Axios

moozi 2020. 5. 12. 13:53

<html>

  <head>

      <meta charset="utf-8">

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

      <title>Vue Router</title>

  </head>

  <body>

 

        <div id='app'>

            <div v-for='product in products'>

                <h3>{{ product.name }}</h3>

                <p>{{ product.price }}</p>

                

            </div>

        </div>

 

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

 

    var app = new Vue({

      el: '#app',

      data: {

            products: []

    },

      methods: {

        getData: function(){

          axios.get('http://pjs.dothome.co.kr/ajaxDB2.php')

          .then((response)=>{

          this.products = response.data;

        })

          .catch(function(e){

            console.error(e);

          })

        }

      }

    });

    app.getData();

    </script>

  </body>

</html>



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

vuejsAjax04 with jQuery $.ajax()  (0) 2020.05.12
vuejsAjax03.html  (0) 2020.05.12
vuejsAxios.html  (0) 2020.05.12
vuejsAjax01  (0) 2020.05.12
vue.js ajax  (0) 2020.05.12
Comments