이번에는 Vue를 처음부터 사용하는 방법을 알려드리겠습니다. Vue를 처음부터 사용할 때 주의사항은 무엇인가요? 1. vue란? Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 압축 후 17kb만 2. Vue 환경 구축 직접 다운로드하여 태그와 함께 가져오면 Vue가 전역 변수로 등록됩니다. </p> <p style="text-align: left;">하지만 Vue로 대규모 애플리케이션을 구축할 때는 NPM 설치를 사용하는 것이 좋습니다. </p> <p style="text-align: left;">여기서 추천하는 것은 매우 빠른 Taobao의 cnpm입니다</p> <pre>npm install -g cnpm --registry=https://registry.npm.taobao.org</pre> <p style="text-align: left;">그런 다음 설치하세요</p> <pre># 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖,走你 cd my-project npm run dev</pre> <p style="text-align: left;"><span style="color: #ff0000"><strong>3. 첫 번째 Vue 애플리케이션</strong></span></p> <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 인스턴스가 생성되면 일련의 초기화 프로세스를 거치고 해당 수명 주기 후크를 호출하여 적시에 비즈니스 로직을 실행할 수 있습니다. 일반적인 라이프 사이클은 다음과 같습니다: create---mounted---destroy가장 일반적으로 사용되는 Vue의 라이프 사이클 후크는 다음과 같습니다. • Created는 인스턴스가 생성된 후에 호출됩니다. .가 완료되었지만 아직 마운트되지 않았으며 $el을 아직 사용할 수 없습니다. 일부 데이터를 초기화하고 처리해야 할 때 더 유용합니다. • 마운트된 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 중국어 웹사이트의 다른 관련 기사에 주목하세요! 추천 자료: Dom을 Angular2와 함께 사용할 때 주의 사항은 무엇입니까 FileReader API 사용