20180515_vuejs - denlyou/AIL GitHub Wiki

Vuejs

์ปดํฌ๋„ŒํŠธ๊ฐ„ ํ†ต์‹ 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>์ปดํฌ๋„ŒํŠธ๊ฐ„ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ</title>
</head>
<body>
  <div id="app">
    <child-component v-bind:propsdata="message"></child-component>
    <sibling-component v-bind:propsdata="date" v-on:showmsg="printHello"></sibling-component>
  </div>
  <!--
    ๊ฐ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ณ€์ˆ˜๋‚˜ ๋ฉ”์†Œ๋“œ๋Š” ๊ณ ์œ ํ•œ scope๋ฅผ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ฐ˜ ํ˜ธ์ถœ ๋ฐฉ๋ฒ•์œผ๋กœ call ํ• ์ˆ˜ ์—†์Œ
    ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ -> ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ props์„ ์ด์šฉํ•ด ๋ฐ์ดํ„ฐ ์ „๋‹ฌ๋งŒ
    ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ -> ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” event๋ฅผ ์ „๋‹ฌ๋งŒ
    ํ•˜๋Š” ๊ฒƒ์ด vue.js์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ„ ๋ฐ์ดํ„ฐ ํ†ต์‹  ๋ฐฉ๋ฒ•์ž„

    (๋‹จ, ์ „ํ˜€ ๋‹ค๋ฅธ ๋ ˆ๋ฒจ์ด๋‚˜ ์œ„์น˜์˜ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ์€ eventBus๋ฅผ ์‚ฌ์šฉํ•จ)
  -->

  <script src="https://unpkg.com/vue" charset="utf-8"></script>
  <script type="text/javascript">
    Vue.component('child-component', {
      props: ['propsdata'] ,
      template: '<p>{{ propsdata }}</p>'
    });

    Vue.component('sibling-component', {
      props: ['propsdata'] ,
      methods: {
        showMesssage: function(){
          this.$emit('showmsg');
        }
      },
      template: '<button v-on:click="showMesssage">{{ propsdata }}</button>'
    });

    var app = new Vue({
      el : '#app' ,
      data: {
        message: 'hello vuejs!' ,
        date: "new Date()"
      },
      methods: {
        printHello: function(){
          // console.log("hello");
          this.message = new Date();
        }
        // ,
        // printWorld: function(){
        //   console.log("world");
        // }
      }
    });
  </script>
</body>
</html>
Add a custom footer
โš ๏ธ **GitHub.com Fallback** โš ๏ธ