這次帶給大家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請求逾時處理詳解(附程式碼) ######