동일한 컴포넌트로 데이터 넘기기 props $emit 사용

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header :propsdata="num"></app-header>
        <app-content @pass="deliverNum"></app-content>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
    <script>
        var appHeader = {
            template : '<h1>header</h1>',
            props : ['propsdata']
        }
 
        var appContent = {
            template : '<div>content<button @click="passNum">pass</button></div>',
            methods : {
                passNum : function(){
                    this.$emit('pass'10);
                }
            }
        }
 
        new Vue({
            el: '#app',
            components : {
                'app-header' : appHeader,
                'app-content' : appContent
            },
            data:{
                num : 0
            },
            methods:{
                deliverNum : function(value){
                    this.num = value;
                }
            }
        });
    </script>
 
</body>
</html>
cs


1. Vetur


2. Meterial Icon Theme


3.Night Owl 코드강조 플러그인

 

4. Live Server


5. Auto Close Tag 자동으로 태그를 닫아주는 플러그인




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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    
    <hr>    
    <hr>
    <div id="app-1">
        <my-component></my-component>
    </div>
 
    <script>
        Vue.component('my-component',{
            template: `
            <div>
            {{ name }}<br>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        });
 
        const app = new Vue({
            el: '#app',
        });
 
        const app1 = new Vue({
            el: '#app-1',
        });
    </script>
</body>
 
</html>
cs



컴포넌트를 다른컴포넌트에서도 사용가능하다.


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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    
    <hr>    
    <hr>
    <div id="app-1">
        <my-component></my-component>
    </div>
 
    <script>
        Vue.component('hello-world',{
            template: '<div>hello world </div>'
        });
        
        Vue.component('my-component',{
            template: `
            <div>
            {{ name }}<br>
            <hello-world/>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        });
 
        const app = new Vue({
            el: '#app',
        });
 
        const app1 = new Vue({
            el: '#app-1',
        });
    </script>
</body>
 
</html>
cs





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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component/>
    </div>
    
      <script>
        Vue.component('hello-world',{
            template: '<div>hello world </div>'
        });
 
        const KossieButton = {
            template: `
            <div>
            {{ name }}<br>
            <hello-world/>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        };
 
        const app = new Vue({
            el: '#app',
            components:{
                'my-component' : KossieButton
            }
        });
 
      
    </script>
</body>
 
</html>
cs


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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
    
    <div id="app-1">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                name : 'koko'
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
 
        });
 
        new Vue({
            el: '#app-1',
            data: {
                name : 'koko1'
            },
            methods: {
                changeText(){
                    this.name = 'kossie1 updated'
                }
 
            }
 
        });
    </script>
</body>
 
</html>
cs


각 인스턴스에 접근을 할 수 가 없을 것이다.



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
<body>
    <div id="app">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
    
    <div id="app-1">
        {{ name }}
        <button @click="changeText">Click</button>
    </div>
 
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name : 'koko'
            },
            methods: {
                changeText(){
                    app1.name = 'kossie updated'
                }
 
            }
 
        });
 
        const app1 = new Vue({
            el: '#app-1',
            data: {
                name : 'koko1'
            },
            methods: {
                changeText(){
                    this.name = 'kossie1 updated'
                }
 
            }
 
        });
    </script>
</body>
cs


위의 클릭을 누르면 아래의 메시자가 변경된다. 


'Vue' 카테고리의 다른 글

vscode 플러그인  (0) 2020.02.16
전역 component 예제, 지역 component 예제  (0) 2020.02.16
여러개의 Vue인스턴스 사용하기  (0) 2020.02.16
v-for 리스트렌더딩  (0) 2020.02.15
v-if, v-show 버튼클릭시 보이게 안보이게  (0) 2020.02.15
스타일 바인딩  (0) 2020.02.15


위와같이하면 추가작업이나 수량관리가 힘들다. 리스트가 거대해지면...

그래서 v-for을 사용한다.




v-for 사용예제(어느것을 사용하겠는가?)

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
<body>
    <div id="app">
        <div v-for="person in people">
            {{ person.name }} {{ person.age}}
        </div>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                people: [
                    { name'a', age: 20 },
                    { name'b', age: 21 },
                    { name'c', age: 22 },
                    { name'd', age: 23 },
 
                ]
            },
            methods: {
 
            }
 
        });
    </script>
</body>
cs


배열의 index를 보여줄 수 도 있음


key값 넣기(유니크한 값) id값을 넣는게 제일 일반적이라고 함.



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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="show">YES</div>
        <button @click="toggleShow">Toggle</button>
    </div>
 
    <script>
        new Vue ({
            el: '#app',
            data :{
                show: true
            },
            methods:{
                toggleShow(){
                    this.show = !this.show;
                }
            }
        });
    </script>
</body>
</html>
cs


2. 버튼클릭시 여러개 그룹으로 보이게 안보이게 하기


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
<body>
    <div id="app">
        <template v-if="show">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </template>
        
        <div v-else>No</div>
        <button @click="toggleShow">Toggle</button>
    </div>
 
    <script>
        new Vue ({
            el: '#app',
            data :{
                show: true
            },
            methods:{
                toggleShow(){
                    this.show = !this.show;
                }
            }
        });
    </script>
</body>
cs


v-else 는 show : false 일때 보여준다.


3. v-if, v-else-if, v-else


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
<body>
    <div id="app">
        <template v-if="number === 1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </template>
 
        <div v-else-if="number === 2">Hi</div>
 
        <div v-else>No</div>
        <button @click="increaseNumber">Increase</button>{{ number }}
    </div>
 
    <script>
        new Vue ({
            el: '#app',
            data :{
                number: 1
            },
            methods:{
                increaseNumber(){
                    this.number++;
                }
            }
        });
    </script>
</body>
cs


'Vue' 카테고리의 다른 글

여러개의 Vue인스턴스 사용하기  (0) 2020.02.16
v-for 리스트렌더딩  (0) 2020.02.15
v-if, v-show 버튼클릭시 보이게 안보이게  (0) 2020.02.15
스타일 바인딩  (0) 2020.02.15
클래스 스타일 변경하기  (0) 2020.02.15
바인딩 양방향바인딩  (0) 2020.02.10



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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div :style="{ color: red, fontSize: size}">Hello</div>
        <button @click="update">Click</button>
    </div>
 
    <script>
        new Vue ({
            el: '#app',
            data :{
               red : 'red',
               size : '30px' 
            },
        });
    </script>
</body>
</html>
cs


'Vue' 카테고리의 다른 글

v-for 리스트렌더딩  (0) 2020.02.15
v-if, v-show 버튼클릭시 보이게 안보이게  (0) 2020.02.15
스타일 바인딩  (0) 2020.02.15
클래스 스타일 변경하기  (0) 2020.02.15
바인딩 양방향바인딩  (0) 2020.02.10
컴포넌트 불러오기  (0) 2019.08.27


위와 같이 클릭시 폰트색상을 red로 변경하고 text에 bold를 주었다.

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title>Document</title>
    <style>
        .red{
            color:red;
        }
        .bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{ red:isRed, blod:isBold }">Hello</div>
        <button @click="update">Click</button>
    </div>
 
    <script>
        new Vue ({
            el: '#app',
            data :{
                message: 'Hello World',
                isRed : false,
                isBold : false
            },
            methods:{
                update(){
                    this.isRed = !this.isRed;
                    this.isBold = !this.isBold;
                }
            }
        });
    </script>
</body>
</html>
cs




'Vue' 카테고리의 다른 글

v-if, v-show 버튼클릭시 보이게 안보이게  (0) 2020.02.15
스타일 바인딩  (0) 2020.02.15
클래스 스타일 변경하기  (0) 2020.02.15
바인딩 양방향바인딩  (0) 2020.02.10
컴포넌트 불러오기  (0) 2019.08.27
vue cli 프로젝트 생성하기  (0) 2019.08.02

+ Recent posts