관리 메뉴

moozi

vue.js ajax with axios 본문

TIS_2019/응용sw2019_2기

vue.js ajax with axios

moozi 2019. 11. 6. 14:44

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

vueAjax04.html  (0) 2019.11.06
ajaxDB3.php  (0) 2019.11.06
AjaxDB2.php  (0) 2019.11.06
vue.js ajax  (0) 2019.11.06
jQuery연습문제03  (0) 2019.11.05
Comments