home2 ๊ฒŒ์‹œํŒ Vue ๊ฒŒ์‹œํŒ ํ˜„์žฌ v-model ์ง„๋„

ํ˜„์žฌ v-model ์ง„๋„

  • ์ด ์ฃผ์ œ์—๋Š” 3๊ฐœ ๋‹ต๋ณ€, 2๋ช… ์ฐธ์—ฌ๊ฐ€ ์žˆ์œผ๋ฉฐ codingapple๊ฐ€ 3 ๋…„, 10 ์›” ์ „์— ์ „์— ๋งˆ์ง€๋ง‰์œผ๋กœ ์—…๋ฐ์ดํŠธํ–ˆ์Šต๋‹ˆ๋‹ค.
4 ๊ธ€ ๋ณด์ž„ - 1 ์—์„œ 4 ๊นŒ์ง€ (์ด 4 ์ค‘์—์„œ)
  • ๊ธ€์“ด์ด
    ๊ธ€
  • #32596

    ์œค์žฌํฌ
    ์ฐธ๊ฐ€์ž

    ๋ฐฐ์šด ์ง€์‹์„ ํ† ๋Œ€๋กœ cdn ๋ฐฉ์‹์œผ๋กœ  ์„œ๋ธŒํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋ ค ํ•˜๋Š”๋ฐ์š”

    ์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด ์ถœ๋ ฅ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. cdn ์œผ๋กœ ์ž‘์—…ํ•˜์—ฌ๋„ ๋‹ค๋ฅธ ์ž‘์—…์ด ํ•„์š”ํ•œ๊ฐ€์š”?

    #32624

    codingapple
    ํ‚ค ๋งˆ์Šคํ„ฐ

    cdn์€ ๊ทธ๋ƒฅ ์™ธ๋ถ€ํŒŒ์ผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฒ•์ผ ๋ฟ์ด๋ผ ๋ทฐ๋ž‘์€ ์ƒ๊ด€์—†๋Š”๊ฐœ๋…๊ฐ™์€๋ฐ 

    ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค์ง€ ๋ชปํ–ˆ๊ฑฐ๋‚˜ ๋ฐ์ดํ„ฐ๋ฐ”์ธ๋”ฉ ๋ฌธ๋ฒ•์ด ์ด์ƒํ•œ๊ฒฝ์šฐ๊ฐ™๊ตฐ์š” 

    #32674

    ์œค์žฌํฌ
    ์ฐธ๊ฐ€์ž

    ์†Œ์ธ ์ฝ”๋“œ๋ฅผ ๋ณด์—ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
        <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
        <link rel="stylesheet" href="./../dist/style.css">  
        <link rel="stylesheet" href="./../dist/reset.css">  
        <link rel="stylesheet" href="./../dist/subMnu.css">    

        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>  
     
        <style>
            .wrap{
                width: 100%;
                height: 100%;
            }
            .wrap>.container{
                width: 1100px;
                margin:0 auto;
                height:100%;
            }
            .container>ul{
                display: flex;
            }

        </style>
        </head>

    <body>
    <?php
          include ("head.php");
        ?>
        <template>

        <div id ="app" class="wrap">
            <div class="container">
                <ul>
                    <li v-for="(a,i) in list" :key="i">
                        <p>{{list[i].content}}</p>
                        <video src="list[i].src"></video>
                        <span>{{list[i].desc}}</span>
                    </li>
                </ul>

            </div>
        </div>

        </template>

    <?php
          include ("tail.php");
        ?>

    <script type="module">
     
    import data from '../dist/video.js';
     
      var app = new Vue({
        el: "#app",
        data() {
          return {
            list : data,
          };
        },
        methods: {

        },
      });

    </script>

    </body>

    </html>

    #32682

    codingapple
    ํ‚ค ๋งˆ์Šคํ„ฐ

    ์ผ๋ฐ˜ htmlํŒŒ์ผ์—์„  import ๋ฌธ๋ฒ•์€ ์ž˜ ์•ˆ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

    <script src="์™ธ๋ถ€jsํŒŒ์ผ"></script>์“ฐ๋ฉด ๋ฉ๋‹ˆ๋‹ค 

4 ๊ธ€ ๋ณด์ž„ - 1 ์—์„œ 4 ๊นŒ์ง€ (์ด 4 ์ค‘์—์„œ)
  • ๋‹ต๋ณ€์€ ๋กœ๊ทธ์ธ ํ›„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

About

ํ˜„์žฌ ์›” 700๋ช… ์‹ ๊ทœ์ˆ˜๊ฐ•์ค‘์ž…๋‹ˆ๋‹ค.

  (09:00~20:00) ๋น ๋ฅธ ์ƒ๋‹ด์€ ์นดํ†ก ํ”Œ๋Ÿฌ์Šค์นœ๊ตฌ ์ฝ”๋”ฉ์• ํ”Œ (๋งํฌ)
  admin@codingapple.com
  ์ด์šฉ์•ฝ๊ด€, ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ
โ“’ Codingapple, ๊ฐ•์˜ ์˜ˆ์ œ, ์˜์ƒ ๋ณต์ œ ๊ธˆ์ง€
top

ยฉ Codingapple, All rights reserved. ์Šˆํผ๋กœ์ผ“ ์—๋“€์ผ€์ด์…˜ / ์„œ์šธํŠน๋ณ„์‹œ ๊ฐ•๋™๊ตฌ ๊ณ ๋•๋กœ 19๊ธธ 30 / ์‚ฌ์—…์ž๋“ฑ๋ก๋ฒˆํ˜ธ : 212-26-14752 ์˜จ๋ผ์ธ ๊ต์œกํ•™์›์—… / ํ†ต์‹ ํŒ๋งค์—…์‹ ๊ณ ๋ฒˆํ˜ธ : ์ œ 2017-์„œ์šธ๊ฐ•๋™-0002 ํ˜ธ / ๊ฐœ์ธ์ •๋ณด๊ด€๋ฆฌ์ž : ๋ฐ•์ข…ํ