Vue2 기초 익히기(2)

https://www.youtube.com/watch?v=LoxRqagf3k4&list=PLB7CpjPWqHOtYP7P_0Ls9XNed0NLvmkAh&index=11

vue 기초 익히기 11강 ~ 20강

---

여러 개의 Vue 인스턴스 사용하기

와 같이 id가 app이 아닌 다른 태그에서도 뷰 기능을 사용하기 위해서는

=> id값을 다르게 작성해 주고, script태그 내에 새로운 new Vue생성, 앞서 정한 새로운 id값으로 el값을 정해주기.

<div id="app">
        {{ name }}<br>
        <button @click="changeText">Click</button>
    </div>
    <div id="app-1">
        {{ name }}<br>
        <button @click="changeText">Click</button>
    </div>

<script>
        const app = new Vue({
            el:'#app',
            data: {/*데이터*/
                name:"name_value"
            },
            methods:{ /*함수*/
               changeText(){
                   this.name="changedName";
               }
            },
        })

        const app1 = new Vue({
            el:'#app-1',
            data:{
                name: "name2_value!!!!"
            },
            methods:{
                changeText(){
                    this.name="changeName2!!!"
                }
            }
        })

    </script>

---

Vue Component
:뷰 인스턴스. 전역, 지역으로 생성가능.

   전역 컴포넌트   

  Vue.component('my-component', {
      //options
  })

 

Vue 인스턴스 생성되기 전, 스크립트 상단에 컴포넌트 작성.

<script>
    Vue.component('/*함수명(태그이름이됨)*/',{
        template: `
              //여기에 html태그 들어감, 다른 html태그 쓰듯이 작성.
            `,
        data() {/*데이터*/
            return{
                //데이터 값 변경시, 이 컴포넌트를 쓰는 모든 곳에서 업데이트가 일어나므로
                //함수형으로 작성.
            }
        },
        methods:{ /*함수*/
            //함수내용
        },
    });

	const app=new Vue({
    ...

하나 이상의 컴포넌트를 작성해, 하나의 컴포넌트를 다른 컴포넌트에서 사용도 가능하다.

Vue.component('hello-world',{
        template: `<div>hello world</div>`
    });
    Vue.component('my-button',{
        template: `
              <div>
                {{ name }}<br>
                <hello-world></hello-world>
                <button @click="changeText">Click</button>
              </div>
            `,
            ...

 

   지역 컴포넌트   
const 변수 선언해 컴포넌트 내용을 작성해 준다.

const HelloWorld = {
    template: `<div>hello world</div>`
}

사용 시엔 우선 사용할 앱의 component로 등록해준 후,

const app = new Vue({
        el:'#app',
        components:{
            'my-button':myButton
        }
})

HTML파일에서 다음과 같이 사용.

*** HTML 내에서 사용할 경우 Camel Case로 작성된 컴포넌트명을 Kebab Case로 태그 작성해야 사용가능.

<hello-world></hello-world>

한 컴포넌트 안에서, 다른 컴포넌트를 사용할 경우.

아래와 같이 components안에 연결시켜 줌.

const myButton = {
        components:{
            'hello-world':HelloWorld
        },
        template: `
              <div>
                {{ name }}<br>
                <hello-world></hello-world>
                <button @click="changeText">Click</button>
              </div>
            `,
            ...