Vue 연습_ IIFE

ex8js1.js

const {createApp} = Vue;
    
    createApp({
        data(){
            return{
                key:'값1',
                key2:'값2',
                message:'안녕하세요',
                htmlString:'<p style="color: skyblue">청명한 하늘</p>',
                su1:'0',
                su2:'0',
                txtMsg:'',
                daumlogo:'https://t1.daumcdn.net/daumtop_deco/images/pctop/2023/logo_daum.png',
            }
        },
        methods: {
            myFunc(){
                console.log(this.message);
            },
            myChange1(){
                this.message="안녕";
            },
            myChange2(){
                this.message="반가워";
            }
        }
    }).mount('#app');

 

 

 

{{}} mustache로 값이 호출된다.

 

v-model은 양방향 데이터통신. 

텍스트입력변화가 상단 {{}}에 그대로 실시간 반영된다.  

 

v-html 디렉티브를 사용하여 htmlString 변수의 값을 HTML로 렌더링한다. htmlString에는 HTML 태그가 포함될 수 있으며, 이 태그들은 실제 HTML로 해석되어 표시된다.

{{ htmlString }}를 사용하여 htmlString 변수의 값을 문자열로 표시한다. 이 경우 HTML 태그는 해석되지 않고 텍스트로 표시.

 

 

 

이벤트 리스너를 이용해 메소드 호출하기

<button @click="myFunc">클릭</button>
<button @click="myChange1">변경1</button>
<button @click="myChange2">변경2</button>

 

 

 

두 수 더하기, 이미지 넣기

<input type="text" size="5" v-model.number="su1"> +
<input type="text" size="5" v-model.number="su2"> =
<span>{{ su1+su2 }}</span>
<br/>
<img v-bind:src="daumlogo" style="width: 100px; height:auto;"/>
</div>

---

에러발생

SyntaxError: Identifier 'createApp' has already been declared 

 IIFE로 vue instance를 감싸주면, 식별자 충돌문제 해결가.

 

IIFE 이란?

"Immediately Invoked Function Expression"의 줄임말로, 정의 되자마자 즉시 실행되는 함수 표현식을 말한다.

모두 동일한 로직을 가지고 있을때  IIFE는 전체 익명함수를 괄호로 감싸줌으로써 내부 코드가 선언문이 아니라 표현식인 것처럼 Parser를 속인다.

 

    <div id="app2">
        <select>
            <option v-bind:value="buser.bunho" v-for="(buser, index) in busers" :key="index">
                {{buser.irum}} {{buser.junhwa}}
            </option>
        </select>
<br/><br/>
<table border="1">
    <thead>
        <tr><th>부서번호</th><th>부서명</th><th>전화</th></tr>
    </thead>
    <tbody>
        <tr v-for="(buser, index) in busers" :key="index">
            <td>{{buser.bunho}}</td><td>{{buser.irum}}</td><td>{{buser.junhwa}}</td>
        </tr>
    </tbody>
</table>
<br/>
<span v-bind:style="cssStyleTest">컨텐츠 스타일 바인딩</span>
<button @click="cssStyleTest.fontSize='30px'">글자 크기 확대</button>
    </div>

 

 

---

문제 다음과 같이 출력하시오

.

 

<span>
    <h2>입력결과</h2>
    <ul>
        <!-- <div v-if="count >=1"> 이 부분이 있어야 하는이유?-->
        <li v-for="(score, index) in student" :key="index">
            {{score.name}} : {{score.java}}, {{score.react}}, {{score.vue}}. 총점: {{score.sum}}점
        </li>
    </ul>
</span>
<span>
    <h2>전체통계</h2>
    <p>인원수: {{count}}명</p>
    <p>전체 총점: {{totalSum}}점</p>
</span>
</div>

(function(){

    const {createApp} = Vue;
    
    createApp({
        data(){
            return{
                name: '',
                java: 0,  //기본값을 0으로 설정
                react: 0,
                vue: 0,
                count:0,
                student : [], 
                sum: 0,
                totalSum:0
    
            }
        },
        methods:{
            onClick(){
                this.count++; // 인원수 
                
                const sum = this.java + this.react + this.vue;
                this.student.push({name:this.name, java:this.java, react:this.react, vue:this.vue, sum: sum})
                
                this.totalSum += sum;

                //입력칸 초기화
                this.name= "";
                this.java= 0;
                this.react= 0;
                this.vue= 0;
               
            }
        }
    }).mount('#app3event');
    
})();

 

 

Q. data에 반드시 모든 값에 초기값을 부여해야할까?

A. 권장사항. 하는것이 좋다. 

 

예상치 못한 오류가 발생가능

데이터 속성에 초기값이 설정되지 않으면 해당 속성의 기본 값이 undefined가 된다. 이는 계산, 조건부 렌더링, 반복 렌더링 등의 Vue.js 작업에서 오류를 발생시킬 수 있다.

 

반응형 시스템의 문제

Vue의 반응형 시스템은 데이터 속성의 변화를 감지하여 UI를 업데이트한다. 초기값이 설정되지 않으면 Vue가 속성을 추적할 수 없거나, 처음 UI 렌더링 시 반응형 업데이트가 예상과 다르게 동작할 수 있다.

 

Q. this.count++;를 맨위에 적어야할까?

A. 권장사항. 그렇게 하는것이 좋다. 

 

this.count++을 onClick 메서드의 가장 위에 두는 것이 좋다. 

this.count++가 메서드의 처음에 있어, 학생 추가 및 총점 계산이 이루어지기전에 인원수가 업데이트된다. 이는 데이터 처리와 일관성을 유지하기 위한 일반적인 접근 방식. 순서가 무관한 경우도 있지만, 특정 순서에서 처리하는 것이 데이터의 일관성과 코드의 의도를 명확히 하는 데 도움이 될 수 있다.

 

 

---

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-IIFE-%EC%A6%89%EC%8B%9C%EC%8B%A4%ED%96%89-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D

📚 자바스크립트 IIFE (즉시실행 함수 표현식)