vue的新手入門教程

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>這次帶給大家vue的新手入門教程，vue新手入門的注意事項有哪些，以下就是實戰案例，一起來看一下。

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>推薦學習：

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>#《 Vue框架影片教學 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 vue.js入門影片教學 》

#<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 Vue2.0入門及學習實戰專案影片教學 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 麥子學院Vue.js影片教學 》

一、vue是什麼

Vue 是一套用於建立使用者介面的 漸進式框架 。

壓縮後僅有17kb

二、vue環境建置

你直接下載並用 標籤引入， Vue 會被註冊為一個全域變數。

但在用 Vue 建置大型應用程式時建議使用 NPM 安裝。

這裡推薦一下是用淘寶的cnpm，非常的快

npm install -g cnpm --registry=https://registry.npm.taobao.org ## 接著進行安裝

# 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖，走你 cd my-project npm run dev 三、第一個vue應用

# {{title}}

单击事件 今年{{age}}

# 每個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中文網其它相關文章！