[Vue.js] Vue.js Instance

Vue Instance

• Vue 클래스의 createApp() 메서드를 통해 생성된 객체가 인스턴스이다
  
  

<script> 
        const vue = Vue.createApp({//Vue Instance 생성      
			name : "App",      
            data() {//data로 정해진 func
                return { //바인드 될 변수 정의
                    name: ""
                }
            }
        }).mount("#vcommon"); //vue 탑재(proxy 관리)
</script>

• name, data() 옵션 객체라고 부른다.
  Vue를 생성할 때 전달하는 대상들을 담은 객체
• vue 객체 Instance를 Root Instance라고 부른다
• 생성된 vue 객체 Instance를 DOM tree로 마운트 한다.(.mount())

data() 옵션

• template에 바인딩할 데이터를 넣는 부분
• data 옵션이 변경되면 template에 반영(반응성 : proxy0)
• 반드시 model 객체를 리턴하야한다.

model 객체 리턴하는 부분

Computed 옵션

• 특정한 처리를 계산하는 함수를 미리 정의
• model에 정의된 속성의 값이 변경될 때 마다 미리 정의된 함수가 자동 호출
  (this로 data()에 정의된 변수 접근 가능)
• 함수에 처리된 결과가가 바로 template 에 바인딩
• 계산된 값은 Ram에 넣어 캐싱한다.
  (비동기에는 부적합 하지만, 호출 시간이 줄어든다.=> 자주 사용하는 함수에 적용하지 용이)

    <div id="vfor_computed">        
        <table border="1" style="text-align: center;">
            <tr>
                <td>number</td>
                <td>isdn</td>
                <td>title</td>
                <td>price</td>
            </tr>
            <tr v-for="(key,val) in expensiveBooks">
                <td>
                    {{val+1}}
                </td>
                <td>
                    {{key.isdn}}
                </td>
                <td>
                    {{key.title}}
                </td>
                <td>
                    {{key.price}}
                </td>
            </tr>
        </table>
    </div>

    <script> //vfor_computed
        var vloop = Vue.createApp({
            data() {
                return {
                    books: [
                        {
                            isdn: '123-456',
                            title: "Js",
                            price: "28000"
                        },
                        {
                            isdn: '345-456',
                            title: "python",
                            price: "38000"
                        },
                        {
                            isdn: '567-456',
                            title: "Java",
                            price: "48000"
                        }
                    ]
                }
            },
            computed: {
                expensiveBooks() {
                    return this.books.filter((data) => {
                        return data.price >= 30000;
                    })
                }
                expensiveBooks2 : (vloop)=>{
                    return vloop.books.filter(data=>data.price>30000)
                //화살표 함수 사용 시 this는 전역 객체를 뜻하므로 매개변수로 vue 객체를 넣어줘야 this를 사용할 수 있다.
                } 
            }
        }).mount("#vfor_computed");
    </script>

Methods 옵션

• Vue 객체 Instance 의 데이터를 가지고 처리할 기능을 정의하기 위해 사용
• methods내에 정의된 함수들 간 호출 가능
• template 내에서 호출 가능 => {{함수명()}}
• 이벤트에서 호출 시 v-on:click="함수명()" or :click="함수명"

<div id="von"> <!-- v-on : 버튼 클릭-->
        <h3>{{ value }}</h3>
        <button v-on:click="setValue('왼쪽')">클릭</button>
        <button @click="setValue('왼쪽')">클릭</button> <!--이벤트 설정-->
    </div>

    <script> //von
        const von = Vue.createApp({
            data() {
                return {
                    value: "안녕하세요"
                }
            },
            methods: { //func
                setValue(source) {
                    this.value = source + " 클릭";
                }
            }
        }).mount("#von");

        function rand() {
            v.dayOfweek = Math.floor(Math.random() * 7);
        }
    </script>

Watch 옵션

• model 내 특정한 데터를 가지고 다른 데이터를 변경하고자 하는 경우 사용
• 긴 시간이 필요한 비동기 처리에 적합
• 이전 값, 이후 값을 가지고 있어 특정 계산기 용이하다.

Vue.createApp({
  data() {
    return {
      x:''
    }
  },
  watch: {
    x(current, old) {
        console.log(value);
      },
      immediate: true // 컴포넌트가 생성되자마자 즉시 실행    
  }
})