Vue.js 101 - 파트 1: 첫 번째 단계

이제 Vue 학습 여정을 시작할 준비가 되었습니다 :)

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요. 전날 Vue 과정에서 배운 내용을 여기 Dev.to에 게시할 예정입니다.

더 이상 고민하지 않고 여기에 1일차 메모를 요약했습니다.

Vue.js는 무엇입니까

Vue.js는 웹 인터페이스 및 한 페이지 애플리케이션을 구축하는 데 사용되는 JavaScript용 프로그레시브 프레임워크입니다. Vue.js는 Ionic 및 Electron 프레임워크를 사용한 데스크톱 및 모바일 앱 개발에도 사용됩니다.

Vue 첫 단계

가능한 한 빨리 학습을 시작하기 위해 지금은 Vue CDN 링크로만 작업할 것입니다. 나중에 실제 프로덕션 Vue 앱을 올바르게 시작하는 방법을 배웁니다.

아주 기본적인 Vue.js 페이지를 만들어 봅시다.

선호하는 코드 편집기에서 파일 이름 index.html을 생성합니다. 해당 파일에서 기본 html 5 파일을 만듭니다.


이 index.html 헤드 섹션에서 Vue CDN 링크를 추가합니다.

 <script src="https://unpkg.com/vue@next"></script>

여전히 index.html에서 본문 섹션에 이 코드를 추가합니다.

 <div id="app">

 </div>
 <script src="app.js"></script>

따라서 id가 #app인 div와 app.js에 대한 소스가 있는 스크립트 태그

이제 같은 폴더에서 app.js라는 파일 이름을 만들어 보겠습니다.
이 파일에는 Vue.js 코드가 포함됩니다.

완료되면 app.js를 열고 이 Vue 초기화 코드를 추가합니다.

const app = Vue.createApp({

})

app.mount('#app')

따라서 이 코드는 간단합니다. 먼저 Vue 인스턴스를 생성한 다음 방금 index.html에서 생성한 #app div에 Vue 앱을 마운트합니다.

따라서 Vue가 해당 div 콘텐츠를 제어/관리할 것이라고 추측할 수 있습니다.

헬로월드뷰

클래식은 클래식입니다. Hello World를 만들어야 합니다.

index.html에서 이 콘텐츠를 #app div에 추가합니다.

<div id="#app">
    <h1>{{ message }}</h1>
</div>

이중 괄호는 Vue에게 이 텍스트가 일반 텍스트가 아니라 Vue 표현식임을 알려줍니다. 그런 다음 Vue는 이 표현식을 구문 분석하고 이중 중괄호의 값을 반환합니다.

app.js에서 이 코드 Vue.createApp를 추가합니다.

const app = Vue.createApp({
    data() {
        return {
            message: 'Hello World Vue'
        }
    }
})

데이터 함수는 Vue가 데이터를 포함하는 객체를 반환하는 위치와 방법입니다. 이 예제에서 데이터는 속성 이름 메시지가 있는 개체를 반환합니다. 메시지 내용은 문자열 'Hello World Vue'로 설정됩니다.

이 메시지 속성은 Vue 코드 내부 또는 링크 마운트 html 요소의 Vue 코드 외부에서 사용할 수 있습니다. (#앱 div)

Vue 코드 내에서 메시지 속성을 참조하려면 다음을 사용할 수 있습니다.

this.message = 'Another message'

이 데이터가 변경되면 뷰가 다시 렌더링되고 새 값이 표시된다는 점에 유의해야 합니다.

Vue 코드 외부에서 메시지 속성을 참조하지만 링크가 마운트된 html 내부에서는 이중 괄호를 사용할 수 있습니다.

<div id="#app">
  {{ message }}
</div>

런타임에 Vue는 메시지 속성을 실제 내용으로 바꿉니다.

이제 브라우저에서 index.html을 엽니다.


참고로 전체 index.html 다음에 전체 app.js가 있습니다.

다른 변수 유형 렌더링

문자열뿐만 아니라 숫자, 날짜, 배열 및 모든 표현식을 dom에서 Vue로 렌더링할 수 있습니다.

예를 들어 부부에게 더 많은 재산을 만들 수 있습니다. app.js를 열고 다음 줄을 추가합니다.

data() {
    return {
        message: 'Hello World Vue',
        number1: 500,
        number2: 250
    }
}

index.html을 열고 다음 행을 추가하십시오.

<div id="app">
    <h1>{{ message }}</h1>
    {{ number1 + number2 }}
</div>

앞서 언급한 것처럼 중괄호 안에 표현식을 넣을 수도 있고 Vue가 표현식 결과를 렌더링합니다. 이 경우 750이 표시됩니다.

결론

오늘은 여기까지입니다. 우리는 작은 발걸음을 내딛었지만 매우 중요한 발걸음을 내디뎠습니다. 내일 여행은 계속되고 그 속도는 조금 더 빨라질 것입니다... 뵙겠습니다! 아무것도 놓치지 않으려면 여기 또는 트위터에서 저를 팔로우하세요!

트위터에서 나를 팔로우하세요: