'Front-End/Vue-js' 카테고리의 글 목록

'Front-End/Vue-js'에 해당되는 글 3건

Vue-js 기본적인 사용법-1

Front-End/Vue-js 2020. 4. 27. 14:00

Vue-js 기본적인 사용법

1. JavaScript에서 new를 사용해 Vue라는 생성자를 만들고, data나 methods등을 정의한다.

2. jsp쪽에서 JavaScript단에서 정의한 컴포넌트를 가져와서 사용한다.

ㄴ 2-1. if문은 v-if, else문은 v-else, v-model은 data의 키값으로 values를 가져와서 출력할 수 있음, 

ㄴ 2-2. data에서 정의한 키에 해당하는 값을 가져올 때에는 {{msg}} 같이 키값에 중괄호를 두번쳐서 가져올 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<title>Vuejs</title>
</head>
<body>
    <!-- 태그 값 id는 한곳에서만 사용가능하고, class는 여러곳에 사용이 가능하다.-->
    <!-- 데이터 바인딩이 쉽고, 데이터가 변경되었을때 바로 알 수 있다. -->

<!--버튼을 클릭하면 Hide와 Show로 번갈아가면서 변경되면서 문자가 출력되고, 사라지는것을 반복한다. -->
    <div id="vue-app">
        <div>
            <input type = "text" v-model = "msg">
            <!-- 버튼을 클릭하면 Vue 인스턴스의 button_handler 메소드로 매핑이 되어서, msg_active값이 true면 false로, false면 true로 변경되게 된다. -->
            <button @click="button_handler">
                <span v-if = "msg_active">Hide</span>
                <span v-else>Show</span>
            </button>
        </div>
        <div v-if="msg_active">
<!-- 중괄호 안에 다시 중괄호를 쓰고, 아래 생성자에 있는 데이터의 키값을 쓰면 그 안에 있는 값이 담겨서 나온다. -->
            {{msg}}
        </div>
    </div>
 
 
    <!-- cndjs홈페이지에서 vuejs를 연결시킴 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        //vue라는 생성자를 만들고 어느영역에 있는 컴포넌트를 사용할 것인지를 정한다.
        new Vue({
 
            'el' : '#vue-app',
            'data' : {
                'msg' : 'vue.js',
                'msg_active' : true
            },
            methods:{
                button_handler: function(){
                    //바인딩을 할때 this를 앞에 써주어야 매핑된다.                    
                    this.msg_active=!this.msg_active;
                }
            
            }
        });
    </script>
</body>
</html>
Colored by Color Scripter
cs

실행결과 (Hide & Show)

출처

https://www.youtube.com/watch?v=fgHG0fCnhow

저작자표시

'Front-End > Vue-js' 카테고리의 다른 글

Vue-js로 list 사용해보기 (0)	2020.03.27
Vue-js 기본 (0)	2020.03.27

Vue-js로 list 사용해보기

Front-End/Vue-js 2020. 3. 27. 14:49

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang = "ko">
<head...>
<title>Insert title here</title>
 
<body>
<div id="app">
    <!-- 반복문을 사용할때는 v-for이라는 태그를 써서 사용한다. -->
    <ul style = "list-style: none;">
<!-- Vue인스턴스에 있는 data인 items배열을 받아서 item에 넣고 반복하면서 출력한다. -->
 
<!-- 이미지를 삽입할때는 <img src="{{item.image}}"> 이런식으로 작성하면 값이 들어가지 않기 때문에 
<img :src="item.image">이런식으로 attribute앞에 콜론(:)을 작성해야 인식이된다. -->
        <template v-for="item in items">
        <li>
            <img :src="item.image">    
        </li>
        <li>
            {{item.title}}
        </li>
        </template>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<script>
 
/* 뷰 인스턴스를 변수에 담으면 변수 안에 접근할 수 있습니다, 바람직한 방법은 아님 */
아래처럼 app변수에 접근해서 값을 담아줄수 있습니다.
ex) app.items.push({id: 4, image : 'https://picsum.photos/210/118/?image=350', title: '추가아이템'});

 
    let app = new Vue({
        el: '#app',
        data() {
            return {
                items:[
                    {
                        id: 1,
                        image: 'https://picsum.photos/210/118/?image=1',
                        title: 'computer'
                    },
                    {
                        id: 2,
                        image : 'https://picsum.photos/210/118/?image=100',
                        title: 'beach'
                    },
                    {
                        id: 3,
                        image : 'https://picsum.photos/210/118/?image=160',
                        title: 'handphone'
                    },
                    {
                        id: 4,
                        image : 'https://picsum.photos/210/118/?image=200',
                        title: 'cow'
                    }
                ]    
            
            }
            
        }
        
    })
 
    
</script>
 
</body>
</html>
Colored by Color Scripter
cs

실행화면

코드상에는 4번까지만 있지만 push로 2줄을 더 추가해주었다.

우측 개발자화면에서 Vue 인스턴스에 접근해서 push로 값을 넣어주면 좌측 화면에 표시된다.

출처

https://www.youtube.com/watch?v=zLoEUKEA7Hw&list=PLwawSyI26pfuGsEzp7AzP_TJVhSdwFuwh&index=3

저작자표시

'Front-End > Vue-js' 카테고리의 다른 글

Vue-js 기본적인 사용법-1 (0)	2020.04.27
Vue-js 기본 (0)	2020.03.27

Vue-js 기본

Front-End/Vue-js 2020. 3. 27. 11:15

Vue js는 new Vue로 인스턴스를 만들어 사용하고,

외부에서 사용할 데이터는 데이터메소드에 정의해서 사용,

사용자 입력값을 받는 태그에는 v-model이라는 attribute를 사용해서 Vue 인스턴스의 데이터와 연결해서 사용할 수 있습니다.

Vue 인스턴스의 데이터를 출력할때는 중괄호 두개를 사용해서 데이터를 출력하면 됩니다.

ex) {{userId}}, {{userPassword}}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang = "ko">
<head...>
<title>Insert title here</title>
 
<body>
<div id="app">
<!-- vuejs에서 제공하는 v-model이라는 attribute로 변수명을 지정해주면 자동으로 input 태그의 v-model값과 input태그의 값이 동기화 됩니다.-->    
 
//태그에 v-model을 사용해서 Vue 인스턴스의 data()와 연결해서 사용
    <input type = "text" id = "user_id" v-model="userId" onchange="userIdChanged(this)">
    <input type = "password" id = "user_password" v-model="userPassword">
    <button type = "button">login</button>
    <br />

//Vue 인스턴스의 데이터를 출력할때는 중괄호 두개를 사용해서 데이터를 출력하면 됨.
    id : <span id="user_id_text">{{userId}}</span>
    <br />
    password : {{userPassword}}
</div>
 
//Vue 라이브러리 사용
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<script>

//Vue 인스턴스를 생성
    new Vue({
        el: '#app',
        data() {
            return {
                userId:'',
                userPassword:''
            }
            
        }
        
    })
    
    //var과 let의 다른점은 let은 변수의 재선언이 불가하고, 재할당은 가능하다.
    
    //function에서 아이디와 비밀번호를 받아서 출력하는 대신 위쪽에 있는 Vue에서 data()로 값을 받아서 출력할 수도 있다.
    
    function userIdChanged(obj){
        
         document.getElementById('user_id_text').innerText = obj.value;    
 
    }
    
</script>
 
</body>
</html>
Colored by Color Scripter
cs