<p style="text-align: left;">이번에는 초보자를 위한 vue 학습 방법과 초보자가 vue를 배울 수 있는 <a href="http://www.php.cn/code/10182.html" target="_blank">노트</a>가 무엇인지 알려드리겠습니다. </p> <p style="text-align: left;"><span style="color: #ff0000"><strong> 1. vue란? </strong></span></p> <p style="text-align: left;">Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. </p> <p style="text-align: left;">압축 후 17kb만</p> <p style="text-align: left;"><span style="color: #ff0000"><strong> 2. Vue 환경 구축 </strong></span></p> <p style="text-align: left;">직접 다운로드하여 <script> 태그와 함께 가져오면 Vue가 전역 변수로 등록됩니다. </p> <p style="text-align: left;">하지만 Vue로 대규모 애플리케이션을 구축할 때는 NPM 설치를 사용하는 것이 좋습니다. </p> <p style="text-align: left;">여기서 추천하는 것은 매우 빠른 Taobao의 cnpm입니다. </p> 수명주기 <p style="text-align: left;"></p> <p style="text-align: left;"><span style="color: #ff0000"><strong>각 Vue 인스턴스가 생성되면 일련의 초기화 프로세스를 거치고 해당 수명 주기 후크를 호출하여 적시에 비즈니스 로직을 실행할 수 있습니다. </strong></span>일반적인 라이프 사이클은 다음과 같습니다: create---mounted---destroy</p> <p style="text-align: left;">가장 일반적으로 사용되는 Vue의 라이프 사이클 후크는 다음과 같습니다. <span style="color: #ff0000"><img alt="" src="https://img.php.cn/upload/article/000/061/021/0938687c0b65e53def9d080036e43388-0.png">• Created는 인스턴스가 생성된 후에 호출됩니다. .가 완료되었지만 아직 마운트되지 않았으며 $el을 아직 사용할 수 없습니다. 일부 데이터를 초기화하고 처리해야 할 때 더 유용합니다. </span></p>• 마운트된 el은 인스턴스에 마운트한 후 호출됩니다. 일반적으로 첫 번째 비즈니스 로직이 여기서 시작됩니다. <p style="max-width:90%"><span style="color: #ff0000">• beforeDestroy는 인스턴스가 삭제되기 전에 호출됩니다. 주로 addEventListener를 사용하여 모니터링되는 일부 이벤트를 바인딩 해제합니다. <strong><pre>npm install -g cnpm --registry=https://registry.npm.taobao.org</pre> <a href="http://www.php.cn/php/php-tp-being.html" target="_blank">전체 라이프 사이클 다이어그램: </a></strong></span></p> <p style="text-align: left;">이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요! </p> <p style="text-align: left;">추천 자료: </p> <p style="text-align: left;"></p>Vue 프로젝트를 환경별로 패키징하는 방법<p style="text-align: left;"></p> <p style="text-align: left;"></p> <p style="text-align: left;">dev에서 prd까지 webpack v4의 세부 단계</p> <p style="text-align: left;"></p>