01_Vue.js_Intro - pyohamen/TIL GitHub Wiki

01_Vue.js_Intro

01_Vue.js_Intro

Start

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

Intro

  • el ( Vue 의 μΈμŠ€ν„΄μŠ€λ‘œ μ–΄λŠ μš”μ†Œμ— λ§ˆμš΄νŠΈν• μ§€ κ²°μ • )

    <body>
    <div id='app' >  <!-- ν•˜λ‚˜μ˜ λΆ€λͺ¨μš”μ†Œλ₯Ό κ°–μŒ -->

    </div>

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

    <script>
        // el 은 Vue μΈμŠ€ν„΄μŠ€μ˜ μ†μ„±μœΌλ‘œ μ–΄λ–€ μš”μ†Œμ— λ§ˆμš΄νŠΈν• μ§€ κ²°μ •
         const app = new Vue ({
            el: '#app', 
         })
         console.log(app) => Vue
         console.log(app.$el) => <div id="app"></div>
    </script>

</body>

  • data ( 호좜 μ‹œ, app.data.message ( X ), app.message ( O ) )

    <body>
    <div id="app">
    </div>

    <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
    <script>
        const app = new Vue({
            el: '#app', //μ–΄λ–€ μš”μ†Œμ— λ§ˆμš΄νŠΈν• μ§€
            data: {    // MVVM => Model 이닀. data κ°€ 핡심!
                message: 'Hello Vue'
            },
        })
        console.log(app.message) => Hello Vue

    </script>
</body>

  • interpolation ( ) 보간법

    <body>
    <div id="app">
        {{ message }} 
    </div>

    <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
    <script>
        const app = new Vue ({
            el: '#app',
            data: {
                message : 'Hello Vue',
            }
        })

    </script> 

</body>

  • v-text / if / if-elseif-else / for / bind ( v- μ ‘λ‘μ‚¬λ‘œ μ‹œμž‘ν•˜λŠ” λ””λ ‰ν‹°λΈŒ ( λͺ…λ Ήν•˜λŠ” 것 ) )

    <body>

    <div id="app">
        text, if, if-elseif-else, for κΉŒμ§€λŠ” μ‰¬μš°λ‹ˆ 패슀
                <a href="{{ googleUrl }}">Bad Google link</a>
        <!-- v-bind: ν‘œμ€€ HTML 속성과 Vue μΈμŠ€ν„΄μŠ€λ₯Ό 연동할 λ•Œ. (+a) -->
        <a v-bind:href="googleUrl">Good Google link</a>
        <a href="{{ naverUrl }}">Bad Naver link</a>
        <a v-bind:href="naverUrl">Good Naver link</a>
        <img v-bind:src="randomImageUrl" v-bind:alt="altText">
    </div>

    <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
    <script>
        const app = new Vue ({
            el: '#app',
            data: {
                                googleUrl: '<https://google.com>',
                naverUrl: '<https://naver.com>',
                randomImageUrl: '<https://picsum.photos/200>',
            }})
    </script>
</body>

v-bind: : : 으둜 μ“Έ 수 μžˆλ‹€.

  • method / v-on

    <div id="app">
        {{ message }}
    </div>
    <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: { // μΈμŠ€ν„΄μŠ€
                message: 'Hello Vue'
            },
            methods: { // ν•¨μˆ˜λ“€μ˜ 집합, dataλ₯Ό 가지고 움직일 수 있게 됨
                alertWarning: function () {
                    alert('WARNING')
                },
                alertMessage () { // Syntactic Sugar: μœ„μ™€ μ•„λž˜ μ™„μ „νžˆ κ°™μŒ
                    alert(this.message)
                },
                changeMessage () {
                    this.message = 'CHANGED MESSAGE'
                },
            }
        })
    </script>
</body>

    ```jsx

    {{ message }}

        <button v-on:click="alertWarning">Alert Warning</button>
    <button v-on:click="alertMessage">Alert Message</button>
    <button v-on:click="changeMessage">Change Message</button>
    <hr>
    <input @keyup.enter="onInputChange" type="text" name="" id="">
</div>

<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            alertWarning: function () {
                alert('WARNING')
            },
            alertMessage () {
                alert(this.message)
            },
            changeMessage() {
                this.message = 'CHANGED MESSAGE'
            },
            onInputChange(event) {
                // if (event.key == "Enter") {
                    this.message = event.target.value
                },

        }
    })

</script>

</body>

`v-on:`  : `@` 으둜 μ“Έ 수 μžˆλ‹€.

- v-model

  ```jsx
  <body>
      <div id="app">
          <h1>{{ message }}</h1>
          <!-- μ‚¬μš©μž μž…λ ₯ <=> data λ₯Ό μ™„μ „νžˆ 동기화 μ‹œν‚€κ³  μ‹Άλ‹€ -->
          <!-- v-model => input, select, textarea 에 μ–‘λ°©ν–₯ 바인딩 -->

          <hr>
          <!-- 단방ν–₯ 바인딩 (input => data) -->
          1way:
          <input v-on:keyup="onInputChange" type="text">
          <hr>
          <!-- μ–‘λ°©ν–₯ 바인딩 (input <=> data) -->
          2way:
          <input v-on:keyup="onInputChange" type="text" :value="message">
  value κ°€ ν‘œμ€€μ†μ„±μ΄κΈ° λ•Œλ¬Έμ— v-bind ν•΄μ€˜μ•Όν•¨
          <hr>
          <!-- v-model -->
          v-model/2way:
          <input v-model="message" type="text">
      </div>
      <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>

      <script>
          const app = new Vue({
              el: "#app",
              data: {
                  message: 'hi',
              },
              methods: {
                  onInputChange(event) {
                      this.message = event.target.value
                  }
              }
          })
      </script>

  </body>

  • v-show

    <body>    <div id="app">        <button @click="changeF" >changeF</button>        <!-- v-if λŠ” 평가(t/f)κ°€ 자주 λ°”λ€Œμ§€ μ•Šμ„λ•Œ μœ λ¦¬ν•˜λ‹€ => 초기 μ½”μŠ€νŠΈκ°€ 적닀. -->        <p v-if="t">            This is v-if        </p>        <p v-if="f">            This is v-if with false        </p>        <!-- v-show λŠ” 평가(t/f) κ°€ 자주 λ°”λ€” λ•Œ μœ λ¦¬ν•˜λ‹€ => ν† κΈ€ μ½”μŠ€νŠΈκ°€ 적닀 -->        <p v-show="t">            This is v-show with true        </p>        <p v-show="f">            This is v-show with false        </p>    </div>    <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>    <script>        const app = new Vue({            el: "#app",            data: {                t: true,                f: false,            },            methods: {                changeF () {                    this.f = !this.f                }            }        })    </script></body>

  • lodash

    <body>    <div id="app">        <button @click="getLuckySix">GET LUCKY 6</button>        <ul >            <li v-for="number in myNumbers">                {{ number }}            </li>        </ul>    </div>    <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>    <script src="<https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js>"></script>    <script>        const app = new Vue({            el: "#app",            // [1..45] μ—μ„œ 6개λ₯Ό λžœλ€ν•˜κ²Œ λ½‘λŠ”λ‹€.            data: {                allNumbers: _.range(1,46),                myNumbers: []            },            methods: {                getLuckySix() {                    this.myNumbers = _.sampleSize(this.allNumbers, 6)                    // this.myNumbers.sort((a,b) => a-b)                    this.myNumbers.sort(function(a,b){                        return a-b                    })                }            },        })    </script></body>

  • computed

    μ–΄λ–€ ν•¨μˆ˜λ“€μ„ computed 에 μ •μ˜ν•˜λ‚˜μš”? β†’ Data λ₯Ό Create Update Delete ν•˜μ§€ μ•Šκ³ , Read(return) ν•˜λŠ” ν•¨μˆ˜λ“€! (SQL WHERE)

    <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>VueJS</title></head><body>  <div id="app">    <h1>Poor people</h1>    {{ bankruptPeople }}  </div>  <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>  <script>    const app = new Vue({      el: '#app',      data: {        accounts: [          { name: 'neo', balance: 500, isBankrupt: true },          { name: 'tak', balance: 700, isBankrupt: false },          { name: 'john', balance: 350, isBankrupt: false },          { name: 'justin', balance: 200, isBankrupt: true },        ],      },      methods: {},      /*        μ–΄λ–€ ν•¨μˆ˜λ“€μ„ computed 에 μ •μ˜ν•˜λ‚˜μš”?        Data λ₯Ό Create Update Delete ν•˜μ§€ μ•Šκ³ ,         Read(return) ν•˜λŠ” ν•¨μˆ˜λ“€! (SQL WHERE)      */       computed: {        // ν•¨μˆ˜μ§€λ§Œ, 이름은 λͺ…μ‚¬ν˜•μœΌλ‘œ μ§“λŠ”λ‹€.        numOfAccounts: function() {          return accounts.length        },        bankruptPeople: function() {          // filter λŠ” μƒˆλ‘œμš΄ 배열을 λ¦¬ν„΄ν•œλ‹€.          const newArr = this.accounts.filter((account) => {            return account.isBankrupt          })          // filter κ°€ λ¦¬ν„΄ν•œ 배열을 리턴          return newArr        },      }    })  </script></body></html>
⚠️ **GitHub.com Fallback** ⚠️