Vue.js 기초 1

Vue.js 기초

이번에 시작하는 프로젝트는 Vue.js라는 프레임워크를 이용해서 프론트단을 개발할 예정이므로 기초부터 다시 공부 시작!

Vue 시작하기

일단 코드를 작성하기 전에 Vue.js cdn을 추가한 후 사용한다

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

or

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1. 데이터를 출력하기 : 설명은 주석을 참고해주세요

<div id="app">
        <!-- v-model: 사용자 입력 태그를 받음 -->
        <input type="text" id="user_id" v-model="userId">
        <!-- v-model을 사용하면 input tag의 value값과 js의 변수값이 동기화된다 -->
        <input type="password" id="user_password" v-model="userPassword">
        <button type="button">로그인</button>
        <br/>
        <!-- 정의한 변수를 출력하고 싶을 때  를 사용 -->
        아이디:
        <br/>
        비밀번호: 
	</div>

	 <div id="app1">
        <!-- id값이 vue에 지정되지않았으므로 일단 html dom으로 읽힘  -->
        <input type="text" id="user_id" v-model="userId">
        아이디:
    </div>
	
	<script>
        //Vue 인스턴스 생성해서 Vue를 사용한다
        //사용할 데이터는 data() method 안에 정의해서 사용
        new Vue({
            el:"#app",
            //el : Vue가 실행될 HTML의 DOM요소를 지정한다
            //여러개의 요소 지정 불가능! ex) el:"#app, #app1"
            data(){ //vue가 바라보는 data 객체를 지정
                return{
                    userId:'',
                    userPassword:''
                }
            }
        });

직접 실행해보기

1. 기본 반복문 출력하기

    <div id="app2"> 
       <ul style="list-style: none;">
           <li v-for="item in items">
	<!-- 태그 attribute에 변수값을 대입시키려면 attribute앞에 : 붙인 후에 변수값을 입력 -->
             <img :src="item.image">
            <br>
             
            </li> 
       </ul>
    </div>

직접 실행해보기

1. Template을 이용한 반복문

<div id="app2"> 
       <ul style="list-style: none;">
<!-- 2개이상의 태그를 반복해야하는 경우 template을 사용 -->
        <template v-for="item in items">
            <li> <img :src="item.image"></li>
            <li></li>
        </template>
       </ul>
    </div>

직접 실행해보기