자바 공부/[자바] 기본 공부

[Vue.js] v-문법

햅2024 2024. 11. 28. 21:39

3. Express

  • Node.js의 웹 프레임워크 중 하나
  • 웹 프레임워크로는 Express, Koa, Hapi 등이 존재
  • 디렉토리 별로 역할을 분담하여 해당 기능을 수행
    public : 정적요소(css, js)
    router : 티켓 분배의 역할(ex login, buy)
    views : HTML과 같은 사용자에게 보여줄 화면
    server.js가 메인 기능을 수행
  • 기술구조가 python의 대표적인 웹 프레임워크인 Flask와 유사

4. Vue.js

  • 가장 중요한 사용 이유 :  SPA이기 때문
    SPA : Single Page Application
    페이지 접속 시 모든 리소스를 로드 시켜, 페이지 이동 또는 전환 발생 시
    페이지 전체가 바뀌지 않고, 변경이 필요한 부분만 바뀌는 어플리케이션
  • 보통 js 프레임워크의 대표주자는 jQuery
    새롭게 부상하고 있는 프레임워크로 React, Angular, Vue.js
  • Angular : TypeScript를 사용할 줄 알아야 함
  • React : 기존 Javascript 문법을 많이 활용
  • Vue.js : Vue 문법을 새롭게 익혀야 함
    • Vue 문법은 태그 위주, 코드가 짧음
  • 개발 환경
    • 일반 편집기
      • Vue.js의 기본 코드들을 익히는 데 집중하는 기간에 유용
        <script src="CDN주소"></script>
        방식으로 Vue.js 라이브러리를 CDN으로부터 사용
      • Vue Project
        Node.js + Vue.js + Vue.cli
        Node.js 설치 후 npm install 을 통해 설치
        웹 서버 구축 + 서비스 형태로 개발 가능
    • Vue.js 기초 문법
      • { {} } - Mustache
        뷰 인스턴스의 데이터를 html 태그에 연결하는 텍스트 삽입 방식
      • Directives(Cont' d)
        Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어로 시작
        DOM에 특수한 반응형 동작 실행
        • v-bind
          <span v-bind:title= "message"></span>
          <span :title="message>로 약어 사용이 가능
          기본적으로 이 요소의  title 속성을 Vue 인스턴스의 message 속성과 연결
        • v-if
          조건값이 true일 때 해당 태그가 유효함
        • v-for
          특정한 행동을 반복하고 수행하고 싶은 경우 사용
        • v-on
          <button v-on:click="reverse">
          <button @click="reverse">로 약어 사용이 가능
          특정 이벤트가 발생했을 때 해야할 작업 설정
        • v-model
          양방향 데이터 바인딩


v-bind 

<!DOCTYPE html>
<html>
<head>
    <title>Hello Vue!</title>
</head>
<!--Vue.js 사용을 위한 CDN 활용-->
<!--개발 버전으로, 콘솔의 경고 등을 포함-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Hello Vue : First Vue Page</h1>
    <hr>
    <div id="hello">
        <h2>나의 첫 메세지 : {{ message }}</h2>
        <h2>나의 두번째 메세지: {{ message2 }}</h2>
    </div>
</body>
<script>
    var app1 = new Vue({
        el: '#hello', //Element, div 안에 있는 id인 hello를 얘기하는 것
        data : {
            message: 'Vue, 난 아직 배고프다',
            message2: '짜장면 먹고 싶다'
        }
    });
</script>
</html>

 

 

<body>
    <div id="dbind">
        <span v-bind:title="message">여기에 마우스를 올리시면 현재 시간이 표시됩니다.</span>
        <br>
        <!-- v-bind 를 생략할 수 있음-->
        <span :title="message">여기도 마찬가지 입니다.</span> 
        <br>
        <a :href="url">이동하시려면 하세요</a>
    </div>
</body>

01_HelloVue.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello Vue!</title>
</head>
<!--Vue.js 사용을 위한 CDN 활용-->
<!--개발 버전으로, 콘솔의 경고 등을 포함-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Hello Vue : First Vue Page</h1>
    <hr>
    <div id="hello">
        <h2>나의 첫 메세지 : {{ message }}</h2>
        <h2>나의 두번째 메세지: {{ message2 }}</h2>
    </div>
    <div id="dbind">
        <span v-bind:title="message">여기에 마우스를 올리시면 현재 시간이 표시됩니다.</span>
        <br>
        <!-- v-bind 를 생략할 수 있음-->
        <span :title="message">여기도 마찬가지 입니다.</span> 
        <br>
        <a :href="url">이동하시려면 하세요</a>
    </div>
</body>
<script>
    var app1 = new Vue({
        el: '#hello', //Element, div 안에 있는 id인 hello를 얘기하는 것
        data : {
            message: 'Vue, 난 아직 배고프다',
            message2: '짜장면 먹고 싶다'
        }
    });

    var app2 = new Vue({
        el: '#dbind',
        data: {
            message: '현재 시간은 말이죠' + new Date() + "입니다.",
            url: 'http://map.google.com'
        }
    })
</script>
</html>

 

 

v-if

 

seen_ok: false

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Conditional Statement</h1>
    <hr>
    <div id="ifs">
        <p v-if="seen_ok">이 글이 보이십니까?</p>
    </div>
</body>
<script>
    var app3 = new Vue({
        el: '#ifs',
        data:{
            seen_ok: false
        }
    })
</script>
</html>

 

 

seen_ok:true

 

 

 

조건문을 써도 됨

    var app3 = new Vue({
        el: '#ifs',
        data:{
            seen_ok: 3 > 0
        }
    })

<div id="ifs">
    <button v-if="button_yn">버튼입니당</button>
</div>
<script>
    var app3 = new Vue({
        el: '#ifs',
        data:{
            button_yn: true
        }
    })
</script>

 

 

v-for

<body>
    <div id="fors">
        <ul>
            <li v-for="food in foods"> <!--이거 문장이 아니라 for문임-->
                {{
                    food.name
                }}
            </li>
        </ul>
    </div>
</body>

<script>
    var app4 = new Vue({
        el: '#fors',
        data: {
            foods: [
                { name: '햄버거 + 콜라'},
                { name: '김치볶음밥'},
                { name: '식혜'},
            ]
        }
    })
</script>

 

v-on (이벤트)

<!DOCTYPE html>
<html>
<head>
    <title>Events</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Vue.js Events</h1>
    <hr>
    <div id="eve">
        <p>{{ message }}</p>
        <button v-on:click="reverseMsg" @dblclick="reverseMsg2">Reverse</button> <!--@click으로 축약 가능-->
    </div>
</body>
<script>
    var app5 = new Vue({
        el: '#eve',
        data: {
            message: '가나다 라마바사 아자차 ',
        },
        methods:{
            reverseMsg: function(){
                //split: 나누기, reverse:순서 바꾸기, join:합치기
                this.message = this.message.split('').reverse().join('');
            },
            reverseMsg2: function(){
                this.message = this.message.split('');
            }
        }
    });
</script>
</html>

 

클릭 시 (reverse)
더블클릭시 (split)

 

v-model

<!DOCTYPE html>
<html>
<head>
    <title>v-model</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Vue.js v-model</h1>
    <hr>
    <div id="vmodel">
        <h2>{{myMessage}}</h2>
        <h2>{{yourMessage}}</h2>
        <input type="text" v-model="yourMessage">
    </div>
</body>
<script>
    var app6 = new Vue({
        el: '#vmodel',
        data: {
            myMessage: "Welcome to my sweet home",
            yourMessage: ''
        }
    });
</script>
</html>

yourMessage와 input text값이 binding 됨

 

<body>
    <h1>Vue.js v-model</h1>
    <hr>
    <div id="vmodel">
        <h2>{{myMessage}}</h2>
        <!-- 변수의 단순 출력 뿐 아니라 기초 연산 가능-->
        <h2>{{1 + 3}}</h2>
        <h2>{{5 > 3 ? 'a':'b'}}</h2>
        <h2>{{myMessage + "입니다"}}</h2>
        <h2>{{yourMessage}}</h2>
        <!-- v-model을 이용하여 변수와 양방향 통신이 가능 -->
        <!-- 여러 인풋 형태에도 동일하게 적용 가능 -->
        <input type="text" v-model="yourMessage">
        <h2>{{yourMessage2}}</h2>
        <textarea v-model="yourMessage2"></textarea>
        <h2>{{yourMessage3}}</h2>
        <input type="checkbox" v-model="yourMessage3">Apple</input>
    </div>
</body>
<script>
    var app6 = new Vue({
        el: '#vmodel',
        data: {
            myMessage: "Welcome to my sweet home",
            yourMessage: '',
            yourMessage2: '',
            yourMessage3: ''
        }
    });
</script>
</html>

 

 

 

04_model.htrml

<!DOCTYPE html>
<html>
<head>
    <title>v-model</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Vue.js v-model</h1>
    <hr>
    <div id="vmodel">
        <h2>{{myMessage}}</h2>
        <!-- 변수의 단순 출력 뿐 아니라 기초 연산 가능-->
        <h2>{{1 + 3}}</h2>
        <h2>{{5 > 3 ? 'a':'b'}}</h2>
        <h2>{{myMessage + "입니다"}}</h2>
        <h2>{{yourMessage}}</h2>
        <!-- v-model을 이용하여 변수와 양방향 통신이 가능 -->
        <!-- 여러 인풋 형태에도 동일하게 적용 가능 -->
        <input type="text" v-model="yourMessage">
        <h2>{{yourMessage2}}</h2>
        <textarea v-model="yourMessage2"></textarea>
        <h2>{{yourMessage3}}</h2>
        <input type="checkbox" v-model="yourMessage3">Apple</input>
    </div>
</body>
<script>
    var app6 = new Vue({
        el: '#vmodel',
        data: {
            myMessage: "Welcome to my sweet home",
            yourMessage: '',
            yourMessage2: '',
            yourMessage3: ''
        }
    });
</script>
</html>