이번에는 Vue 초보자 튜토리얼을 가져오겠습니다. Vue 초보자를 위한 주의사항은 무엇인가요? 추천 학습: 《Vue Framework 동영상 튜토리얼》 《vue.js 시작하기 동영상 튜토리얼》 《Vue2.0 시작 및 학습 실습 프로젝트 영상 튜토리얼》 《Wheat Academy Vue.js 영상 튜토리얼》 1. vue란 무엇입니까 Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 압축 후 17kb만 2. Vue 환경 구축 직접 다운로드하여 태그를 사용하여 가져오면 Vue가 전역 변수로 등록됩니다. </p> <p style="text-align: left;"> 하지만 Vue로 대규모 애플리케이션을 구축할 때는 NPM 설치를 사용하는 것이 좋습니다. </p> <p style="text-align: left;"> 여기서 추천하는 것은 Taobao의 cnpm을 사용하는 것입니다. 매우 빠릅니다</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>npm install -g cnpm --registry=https://registry.npm.taobao.org</pre><div class="contentsignin">로그인 후 복사</div></div> <p style="text-align: left;"> 그런 다음 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre># 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖，走你 cd my-project npm run dev</pre><div class="contentsignin">로그인 후 복사</div></div> <p style="text-align: left;"><span style="color:#ff0000;"><strong>를 설치합니다. 3. 첫 번째 Vue 애플리케이션 </strong></span></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p id="app"> <p>{{title}}</p> <button @click="say()">单击事件</button></br> <p>今年{{age}}</p> <input v-model="age"> </p> </body> </html> <script src="lib/vue.js"> var app = new Vue({ //通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用 el: '#app', //指定页面上一个已经存在的DOM元素来挂载Vue实例 data: { //对象的数据 title: 'hello vue', //通过插值语法{{}}绑定 age: 22 //通过v-model进行双向数据绑定 }, methods: { //对象的方法 say: function(){ console.log(this.title); } }, watch: { //监听数据的变化 'age': function(newVal, oldVal){ console.log(newVal, oldVal); } } });로그인 후 복사 4. Vue 수명 주기 각 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 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서: webpack의 자동화된 모바일 빌드 rem 방법에 대한 자세한 설명 환경별 Vue 프로젝트 패키징 방법
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
