기술노트/웹프론트엔드

웹 프론트 엔드 강의(8)

반응형

vue는 동적으로 html코드를 생성

 

 

요새 html은 죄다 MVC패턴

MVC : Model View Controller

여기서 model은 data 혹은 db, 기능 등으로 이해하면 됨.

model은 json을 데이터를 기술함.

 

여기서 view는 display, html 렌더링, 태그 등으로 이해하면 됨.

view는 html에서 사용하는 태그로 이해하면 쉬움.

 

여기서 controller : 제어 즉, model과 view를 연결하는 역할

 

근데 여기서 vue는 따로 controller가 없음.

 

 

vue라는 프로그램을 따로 설치하지말고

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

이거를 가져다 붙여서 사용하는 것이 편함.

 

new Vue({ }); 이게 Vue의 기본 틀.

json은 다시한번 말하지만 name value쌍으로 이루어짐.

 

 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> 

</head>
<body>
    나의 홈페이지<br>
<div id="app">{{message}} </div><br>
   주소 : ~~~
    
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         message : '홍길동'
     }
 });   
    
</script>

id=app인 위치에 ‘홍길동’ 출력하기

 

 

 

 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> 

</head>
<body>
    나의 홈페이지<br>
<div id="app">{{message}}/{{age}} </div><br>
   주소 : ~~~
    
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         message : '홍길동',
         age : 24
       
     }
 });   
    
</script>






</html>

 

나이도 같이 출력할 수 있음

 

 

 

 

 <div id="app"> </div>  <br>
data = {
            message : '홍길동', 
            age : 24
        }        
    
    $("#app").html(data.message + " / " + data.age)

Vue방식을 쓰면 이런식으로 쓰는것보다 많이 간략된다는 장점이 있음.

 

 

 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> 

</head>
<body>
   
<div id="app">
    <h1>{{name}}의 홈페이지</h1><br>
    <img src=movie.jpg width=400><br>
   주소 : {{address}}<br>
    </div> <!--지금쓴 div태그가 view라고 부름-->
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         name : '홍길동',
         address : "서울시 서초구 .... ..."
         
     }
 });   //지금이 스크립트 태그가 model이라고 부름
    
</script>

</html>

이렇게 하면 홍길동의 홈페이지, 영화사진, 주소 : 서울시 서초구.... ... 이런식으로 출력됨

 

 

 

 

 

 

 

ppt탬플릿을 가져다가 쓴다고하면 new Vue에 해당하는 부분을 우리가 뜯어 고치는거고

div 태그쪽이 ppt탬플릿의 뼈대라고 생각하면 쉬움.

 

 

<div id="app">
    <h1>{{name}}의 홈페이지</h1><br>
    <img src=movie.jpg width=400><br>
    {{content}}<br>
   주소 : {{address}}<br>
    </div> <!--지금쓴 div태그가 view라고 부르고-->
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         name : '홍길동',
         address : "서울시 서초구 .... ...",
         content : '<h1>쇼핑 아이템</h1>'
         
     }
 });   //지금이 스크립트 태그가 model

이렇게 쓰면 content의 태그까지 인식하지 못함.

쇼핑 아이템으로 출력되지 않고 '<h1>쇼핑 아이템</h1>'으로 출력됨.

 

 

 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> 

</head>
<body>
   
<div id="app">
    <h1>{{name}}의 홈페이지</h1><br>
    <img src=movie.jpg width=400><br>
   주소 : {{address}}<br>
   {{content}}<br>
    </div> <!--지금쓴 div태그가 view라고 부르고-->
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         name : '홍길동',
         address : "서울시 서초구 .... ...",
          content : '<h1>쇼핑 아이템</h1>'
     }
 });   //지금이 스크립트 태그가 model
    
</script>

</html>

 

 

 

 

 

 

그래서 이 경우는 

 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> 

</head>
<body>
   
<div id="app">
    <h1>{{name}}의 홈페이지</h1><br>
    <img src=movie.jpg width=400><br>
   주소 : {{address}}<br>
    <p v-html="content"> </p> 
    </div> <!--지금쓴 div태그가 view라고 부르고-->
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         name : '홍길동',
         address : "서울시 서초구 .... ...",
         content : '<h1>쇼핑 아이템</h1>'
         
     }
 });   //지금이 스크립트 태그가 model
    
</script>
</html>

아까 {{content}} 라고 적었던 부분을 p태그에 v-html을 써서 하면 제대로 보여진다.

 

 

 

 

<p>{{name}}</p> 이거랑 <p v-text="name"></p> 이거랑 똑같은 의미

 

 

 

 

 

 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> 

</head>
<body>
   
<div id="app">
    <h1>{{name}}의 홈페이지</h1><br>
    <img src=movie.jpg width=400><br>
   <p v-html="content"> </p> 
   <p v-text="name"></p>  
   <ul>
       <li v-for="i in item"><font color=grenn> {{i}}</font></li>   
   </ul>
   <p>{{name}}</p>
   주소 : {{address}}<br>
   
    </div> <!--지금쓴 div태그가 vue라고 부름.-->
    
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         name : '홍길동',
         address : "서울시 서초구 .... ...",
         content : '<h1>쇼핑 아이템</h1>',
         item : ["사과", "배","감","참외"] // item을 변수명으로 안하고 abc라고 하면 위에 i in abc로 바꿔주어야함.
         
     }
 });   //지금이 스크립트 태그가 model
    
</script>


</html>

p태그에 v-text를 사용하여 홍길동이라는 이름을 출력하는 것이며

사과 배 참 감 참외를 초록색으로 출력하여 보여준다.

 

 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> 

</head>
<body>
   
<div id="app">
    <h1>{{name}}의 홈페이지</h1><br>
    <img src=movie.jpg width=400><br>
   <p v-html="content"> </p> 
   <p v-text="name"></p>  
   <ul>
       <li v-for="i in item"><font color=grenn> {{i}}</font></li>  <!-- n in item이라고 쓰면 {{i}} 가 아니라 {{n}}으로 써야함-->
   </ul>
  <table border=1>
  <tr v-for="x in item">
      <td>과일명</td>
      <td>{{x}}</td>
        </table>
        <table border=1>
        <tr><td>과일명</td> <td>가격</td></tr>
      <tr v-for="x in item2" v-if="x.price>700"> // <!-- itme2에서 가격이 700미만이면 출력x-->
      <td>{{x.name}}</td>
      <td>{{x.price}}</td>
        
  </tr>
</table>
   주소 : {{address}}<br>
    
    </div> <!--지금쓴 div태그가 view라고 부름.-->
    
</body>


<script>
 new Vue({
     el: "#app",//id가 app인 노드에 결과물을 출력한다.
     data : {
         name : '홍길동',
         address : "서울시 서초구 .... ...",
         content : '<h1>쇼핑 아이템</h1>',
         item : ["사과", "배","감","참외"], // item을 변수명으로 안하고 abc라고 하면 위에 i in abc로 바꿔주어야함.
          item2 : [{name:"사과", price:1000},
                     {name:"배", price:500},
                     {name:"감", price:800}
                    ]
     }
 });   //지금이 스크립트 태그가 model
    
</script>






</html>

이렇게하면 가격이 700원 미만인 '배'는 출력되지 않는다.

 

 

 

 

맨위에 홍길동의 홈페이지 입니다 부분은 캡처 과정에서 짤렸다.

 

 

 

<html>
    
    
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    
</head>
        
<body>    
    
    <button>go~~~~~ </button> 
    <div id="app"> 
        <h1>{{title}} </h1>
        
        <table border=1>
            <tr v-for="x in lists">
                <td>{{x.id}}</td>
                <td><a :href="x.link">{{x.title}}</a></td>
                <td><img :src="x.image"> </td>                
            </tr>     
        </table>    
        
        <div>{{copyright}} </div> 
    </div>  
        
<script>
    new Vue({
        el :"#app",
        data : {
            title : "공부의신",
            copyright : "~~~~~~~",
            lists : [
            {id:1, title:"new", image:"movie.jpg", link:"http://google.co.kr"},
            {id:2, title:"n", image:"present.jpg", link:"http://google.co.kr"},
            ]
        } ,
        methods:{
            add : function() { alert('ok');}
        }
    });    
    
</script>
    

</body>
    
    
</html>

 

 

 

 

<html>
    
    
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    
</head>
        
<body>    
    
    
    <div id="app"> 
        <button v-on:click="add()">go~~~~~ </button>  <!-- v-on을 @로 간추릴 수 있음-->
 <input type=text @keyup.enter="add()"> <!-- 키보드 ‘enter’키 눌렀을 때 이벤트 발생-->
        <h1>{{title}} </h1>
        
        <table border=1>
            <tr v-for="x in lists">
                <td>{{x.id}}</td>
                <td><a :href="x.link">{{x.title}}</a></td>
                <td><img :src="x.image"> </td>                
            </tr>     
        </table>    
        
        <div>{{copyright}} </div> 
    </div>  
        
<script>
    new Vue({
        el :"#app",
        data : {
            title : "공부의신",
            copyright : "~~~~~~~",
            lists : [
            {id:1, title:"new", image:"movie.jpg", link:"http://google.co.kr"},
            {id:2, title:"n", image:"present.jpg", link:"http://google.co.kr"},
            ]
        },
        methods : {
            add : function() { 
                alert("click~~~~~~");
            },
            sub : function() {
                alert("click2 !!!!!!!");
            }
        }
        
    });    
    
</script>
    

</body>
    
    
</html>

 

go키를 누르면? 

 

 

onclick을 쓰면 전역함수를 사용하고 @click을 쓰면 vue함수를 사용.

 

 

 

 


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>    
</head>        
<body>    
    <div id="app"> 
        <button @click="add()">go~~~~~ </button> 
        <input type=text @keyup.enter="add()"> <br>
        <input type=text v-model="b_title">
        <input type=text v-model="b_image">
        <input type=text v-model="b_link">
        <button @click="append()">작성</button>                 
        <h1>{{title}} </h1>
        
        <table border=1>
            <tr v-for="(x, index) in lists">
                <td>{{index+1}}</td>
                <td><a :href="x.link">{{x.title}}<img v-if="x.visible" ></a></td>
                <td><img :src="x.image">  </td>                
                
            </tr>     
        </table>    
        
        <div>{{copyright}} </div> 
    </div>  
        
<script>    
    new Vue({
        el :"#app",
        data : {
            title : "공부의신",
            copyright : "~~~~~~~",
            b_title : "제목^^^^^",
            b_image  : "이미지",
            b_link : "URL",            
            lists : [
            {title:"new", image:"movie.jpg", link:"http://google.co.kr", visible:1},
            {title:"n", image:"present.jpg", link:"http://google.co.kr", visible:0},
            ]
        },
        methods : {
            add : function() {        alert("click");                         },
            sub : function() {            alert("click2 !!!!!!!");        },
            append : function() {                                
                // this.lists.push({        title:"33333", image:"present.jpg", link:"http://naver.com"  });             
                d = {title:this.b_title, image:this.b_image, link:this.b_link};
                this.lists.push(d);
                this.b_title = "";
                this.b_image = "";
                this.b_link = "";
            }            
        }
    });   
    
</script>
</body>
</html>

이렇게하면 내가 무언가를 입력할때마다 그게 출력됨.

 

초기 화면은 다음과 같고 입력하는 창에

이렇게 쓰고 작성을 누르면?

밑에 칸에 이렇게 추가되며 길현멋쟁이를 누르면 네이버 사이트로 들어가진다.

'기술노트 > 웹프론트엔드' 카테고리의 다른 글

웹 프론트 엔드 강의(7)  (0) 2020.12.29
웹 프론트 엔드 강의(6)  (0) 2020.12.28
웹 프론트 엔드 강의(5)  (0) 2020.12.28
웹 프론트엔드 강의(4)  (0) 2020.12.25
웹 프론트엔드 강의(3)  (0) 2020.12.25
길현우
전문적인 노하우가 담긴 기술노트를 적는 블로그입니다.