這次帶給大家vue新手入門須知，vue新手入門的注意事項有哪些，以下就是實戰案例，一起來看一下。 vue是一套用於建立使用者介面的漸進式框架，本文透過實例為大家介紹了vue入門教程適用小白初學者，非常不錯，具有參考借鑒價值，需要的朋友參考下吧 一、vue是什麼 Vue 是一套用來建立使用者介面的漸進式框架。 壓縮後僅有17kb 二、vue環境建置 你直接下載並用 標籤引入， Vue 會被註冊為一個全域變數。 </p> <p style="text-align: left;">但在用 Vue 建置大型應用程式時建議使用 NPM 安裝。 </p> <p style="text-align: left;">這裡推薦一下是用淘寶的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>三、第一個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); } } }); #四、Vue 每個Vue 實例建立時，都會經歷一系列的初始化過程，同時也會呼叫對應的生命週期鉤子，我們可以利用這些鉤子，在適當的時機執行我們的業務邏輯。 大體上的生命週期就是：創建（created)---掛載(mounted)---銷毀(destroy)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中文網其它相關文章！ ######推薦閱讀：#########JS日期時間選擇器使用詳解################vue axios請求逾時處理詳解（附程式碼） ######
