20180508_Vuejs - denlyou/AIL GitHub Wiki

20180508_Vuejs

๊ณต์‹ ํ™ˆํŽ˜์ด์ง€ => https://vuejs.org/

์‹œ์ž‘ํ•˜๊ธฐ ๊ฐ€์ด๋“œ(ํ•œ๊ธ€) => https://kr.vuejs.org/v2/guide/index.html

Vue.js ๋ž€?

  • front-end javascript framework
  • ์ ์ง„์ ์œผ๋กœ ์ ์šฉ ๊ฐ€๋Šฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ (progressive frameworks)
  • MVVM ํŒจํ„ด์„ ์ ์šฉํ•œ UI Library
  • Component ๊ธฐ๋ฐ˜์˜ ํ”„๋ ˆ์ž„์›Œํฌ (์š”์ฆ˜ ๋Œ€์„ธ! ์•ต๊ทค๋Ÿฌ, ๋ฆฌ์—‘ํŠธ๋„ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜)
  • ์•ต๊ทค๋Ÿฌ(2way Data Binding)์™€ ๋ฆฌ์—‘ํŠธ(1way Data Flow)์˜ ์žฅ์ ์„ ๋‘๋ฃจ ๊ฐ–์ถค

๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์ฐธ๊ณ 

  • node.js๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์Œ~
  • chrome์˜ ๋””๋ฒ„๊ทธ์šฉ extension => vue.js devtools ๊ฒ€์ƒ‰ ํ›„ ์„ค์น˜

Vue instance

  • Vue.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ๋‹จ์œ„
  • new Vue({ /* ... */ });
  • Example
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app'
        , data: {
          message : "Hello vue.js!"
        }
      });
    </script>
  </body>
</html>
  • ์ธ์Šคํ„ด์Šค์˜ ์œ ํšจ๋ฒ”์œ„ : el๋กœ ์ง€์ •ํ•œ DOM ์š”์†Œ ๋‚ด๋ถ€

Vue์˜ life Cycle KR

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • befroeUpdate
  • updated
  • beforeDestory
  • destoryed

Vue Component

  • ํ™”๋ฉด์˜ ํŠน์ • ์˜์—ญ์„ ์ชผ๊ฐ  ๋‹จ์œ„(?!)
  • ์ „์—ญ ์ปดํฌ๋„ŒํŠธ์™€ ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
      <my-component></my-component>
      <my-local-compo></my-local-compo>
    </div>

    <div id="app2">
      <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
      <my-component></my-component>
      <my-local-compo></my-local-compo>
    </div>

    <script src="https://unpkg.com/vue" charset="utf-8"></script>
    <script type="text/javascript">
      Vue.component("my-component", {
        template: "<div>์ „์—ญ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.</div>"
      });

      new Vue({
        el: "#app"
        , components: {
          "my-local-compo" : {
            template : "<div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.</div>"
          }
        }
      });

      new Vue({
        el: "#app2"
        // , components: {
        //   "my-local-compo" : {
        //     template : "<div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ2๊ฐ€ ๋“ฑ๋ก ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.</div>"
        //   }
        // }
      });
    </script>
  </body>
</html>

์ปดํฌ๋„ŒํŠธ๊ฐ„ ํ†ต์‹ (๋ฐ์ดํ„ฐ ์ „๋‹ฌ๋ฐฉ๋ฒ•)

  • ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฉค๋ฒ„ ๊ฐ’๋“ค์€ ๊ฐ๊ฐ์˜ scope๋ฅผ ๊ฐ€์ง, ๋”ฐ๋ผ์„œ ์„œ๋กœ ๊ณต์œ ๋˜์ง€ ์•Š์Œ(ํ˜ธ์ถœ ๋ถˆ๊ฐ€)
  • (๊ณ„์† ๊ณต๋ถ€์ค‘...)
Add a custom footer
โš ๏ธ **GitHub.com Fallback** โš ๏ธ