YalySeung

그냥 개발자

CDN을 이용한 vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

CDN을 사용한 기본 포맷

<!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">  
    //UI 정의
</div>  
  
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
<script>  
    const {createApp, ref} = Vue  
    const app = createApp({  
        setup() {  
		    // 변수 및 함수
            return {  
            //변경된 값을 UI에 반영하고 싶은 변수 및 함수
            }  
        }  
    })  
    app.mount("#app")  
</script>  
</body>  
  
</html>

Sample

<body>
    <div id="app">
        <h1></h1>
        <button @click="count++">
            Count is : 8
        </button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, ref } = Vue
        const app = createApp({ 
            setup() {
                const message = ref("Hello Vue!!");
                const count = ref(0);
                return {
                    message,
                    count,
                }
            }
        })
        app.mount('#app')
    </script>
</body>
  • Vue 객체에서 구조분해 할당 가져오기
	const { createApp, ref } = Vue
  • Vue 인스턴스 생성
	const app = createApp({ 
	...
	)}
  • 반응성을 가진 참조 변수 선언
	const message = ref("Hello Vue!!");
  • #app 라는 DOM 내부에서 Vue 반응성 기능을 사용할 수 있도록 Vue 인스턴스를 연결
	app.mount('#app')
  • 진입점
	setup() {
	...
	}

LiveServer 결과

image

binding

Object를 binding 하는 방법

	<div :class="{active : isActive}">Text</div>
	
    <script>
        const { createApp, ref } = Vue

        const app = createApp({

            setup() {
                const isActive = ref(false);
                const activeClass = ref('active')
                const infoClass = ref('text-primary')
                return {
                    isActive,
                    activeClass,
                    infoClass,
                }
            }
        })
        app.mount("#app")
    </script>
Array를 binding 하는 방법
	<div :class="[activeClass, infoClass]">Text</div>
    
    <script>
        const { createApp, ref } = Vue

        const app = createApp({

            setup() {
                const isActive = ref(false);
                const activeClass = ref('active')
                const infoClass = ref('text-primary')
                return {
                    isActive,
                    activeClass,
                    infoClass,
                }
            }
        })
        app.mount("#app")
    </script>

Handler

Inline

	<button @click="greetings('Hello')">바꾸자</button>
	<script>
		const { createApp, ref } = Vue
		const app = createApp({
			setup() {
				const count = ref(0)
				const message = ref("")
				const increaseNum = function (event){
					console.log(count) // ref 객체
					console.log(count.value) // value
					count.value++
				}
				const greetings = function(msg){
					message.value = msg
				}
				return {
					count,
					increaseNum,
					message,
					greetings,
				}
			}
		})
		app.mount("#app")
	</script>

Method

	<div id="app">
		8
		<button @click="increaseNum">+</button>
	</div>
	<script>
		const { createApp, ref } = Vue
		const app = createApp({
			setup() {
				const count = ref(0)
				const increaseNum = function (event){
					console.log(count) // ref 객체
					console.log(count.value) // value
					count.value++
				}
				return {
					count,
					increaseNum,
				}
			}
		})
		app.mount("#app")
	</script>

연결문서

댓글남기기

참고