Vue 초보자 튜토리얼

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>이번에는 Vue 초보자 튜토리얼을 가져오겠습니다. Vue 초보자를 위한 주의사항은 무엇인가요?

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>추천 학습:

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'> 《 Vue Framework 동영상 튜토리얼 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'> 《 vue.js 시작하기 동영상 튜토리얼 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'> 《 Vue2.0 시작 및 학습 실습 프로젝트 영상 튜토리얼 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'> 《 Wheat Academy Vue.js 영상 튜토리얼 》

1. vue란 무엇입니까

Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다.

압축 후 17kb만

2. Vue 환경 구축

직접 다운로드하여 태그를 사용하여 가져오면 Vue가 전역 변수로 등록됩니다.

하지만 Vue로 대규모 애플리케이션을 구축할 때는 NPM 설치를 사용하는 것이 좋습니다.

여기서 추천하는 것은 Taobao의 cnpm을 사용하는 것입니다. 매우 빠릅니다

npm install -g cnpm --registry=https://registry.npm.taobao.org 그런 다음

# 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖，走你 cd my-project npm run dev 를 설치합니다. 3. 첫 번째 Vue 애플리케이션

单击事件 今年{{age}}

각 Vue 인스턴스가 생성되면 일련의 초기화 프로세스를 거치고 해당 수명 주기 후크를 호출하여 적절한 시간에 비즈니스 로직을 실행할 수 있습니다.

일반적인 수명주기는 다음과 같습니다: 생성---마운트---파괴

Vue의 더 일반적으로 사용되는 라이프사이클 후크는 다음과 같습니다:

• 인스턴스가 생성된 후 Created가 호출되는데, 이 단계에서는 데이터 관찰 등이 완료되지만 아직 마운트되지 않았으며 $el을 사용할 수 없습니다. 일부 데이터를 초기화하고 처리해야 할 때 더 유용합니다.

• Mounted el은 인스턴스에 마운트한 후 호출됩니다. 일반적으로 첫 번째 비즈니스 로직은 여기에서 시작됩니다.

• beforeDestroy는 인스턴스가 삭제되기 전에 호출됩니다. 주로 addEventListener를 사용하여 모니터링되는 일부 이벤트를 바인딩 해제합니다.

var app =new Vue({ el: '# app', data: { a: 2 } , created: function () { console.log(this.a); //2 }, mounted: function () { console.log(this.el); //

} }); 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!