Vue.js是一套構建使用者介面的漸進式框架。本文將介紹一些重要入門的知識點，比如：執行環境的搭建、定義元件的方式、引用模板、動態元件和父子元件間資料通訊等等。本文首發地址為GitHub部落格,寫文章不易，請多多支援與關注！
一、執行環境搭建
Vue引入方式一般有三種：
第一種CDN引入
<script src="[https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue)"></script>
複製程式碼第二種使用 NPM 安裝
$ npm install vue//安裝最新穩定版
複製程式碼第三種搭建腳手架CLI
所謂腳手架是通過webpack搭建的開發環境，用於快速搭建大型單頁面應用程式。能夠為現代前端開發的工作流程，帶來持久強力的基礎架構。只需幾分鐘，就可以建立並執行一個帶有“熱過載、儲存時程式碼檢查以及可直接用於生產環境的構建配置”的專案。
首先必須先安裝node.js,Node.js 在 0.6.3 版本開始內建npm，所以安裝好node.js後,npm也就裝好。然後在通過git bash 操作以下命令列：
$ node -v//檢查是否已經裝好了node
$ npm -v//檢查是否已經裝好了npm
$ npm install --global vue-cli //安裝 vue-cli
$ vue init webpack project//進入目標資料夾建立一個新專案
$ cd project//進入新專案
$ npm install//安裝package.json中依賴的node_modules
$ npm run dev//執行該專案
複製程式碼對於大陸使用者，建議將npm的登錄檔源設定為國內的映象，可以大幅提升安裝速度。推薦使用這種安裝腳手架。
npm config set registry https://registry.npm.taobao.org//配置淘寶映象
npm config get registry//驗證是否成功
npm install -g cnpm --registry=https://registry.npm.taobao.org//安裝cnpm
cnpm install -g vue-cli//cnpm安裝腳手架
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev
複製程式碼最後開啟http://localhost:8080，就出現下面的頁面，標誌著腳手架搭建完成了。
二、介紹SRC檔案流程及根元件App
腳手架搭建完成後，project裡面各個資料夾及檔案，如下圖：
1.src檔案流程介紹
index.html(入口檔案)=>main.js=>App.vue（根元件），根元件中模板內容就直接插入到入口檔案中#app處，然後再將頁面呈現出來。
2.根元件App介紹
主要由三部分組成，分別為模板（html結構），行為（處理邏輯）和樣式（解決樣式）
三、定義元件的方式
通常可以分為元件全域性定義和元件區域性定義，後者比較常見。
1.元件全域性定義
一般以下兩個步驟：
①main.js引入子元件
②App.vue元件中template呼叫
//main.js
import Vue from `vue`
import App from `./App`
import Users from "./components/Users";//引入子元件Users
Vue.config.productionTip = false
Vue.component("users",Users);//自定義名字便於App.vue元件呼叫，後者為元件名
new Vue({
el: `#app`,
components: { App },
template: `<App/>`
})
複製程式碼//App.vue元件
<template>
<div id="app">
<users></users>//在這裡呼叫，自定義名字是小寫的
</div>
</template>
複製程式碼還可以先建立元件構造器，然後由元件構造器建立元件，不過這種比較少用：
<div id="itany">
<hello></hello>
</div>
...
//使用Vue.extend()建立一個元件構造器
var MyComponent=Vue.extend({
template:`<h3>Hello World</h3>`
});
//使用Vue.component(標籤名,元件構造器)，根據元件構造器來建立元件
Vue.component(`hello`,MyComponent);
var vm=new Vue({ //這裡的vm也是一個元件，稱為根元件Root
el:`#itany`,
data:{
msg:`前端`
}
});
複製程式碼2.元件區域性定義
一般以下三個步驟：
①import引入子元件
②export default註冊子元件
③template模板中加入子元件
四、引用模板和動態元件
1.引用模板
通過標籤<template></template>包裹起來來建立一個元件模板，示例如下:
<template id="app">
<!-- <template>必須有且只有一個根元素 -->
<h1>hello</h1>
</template>
Vue.component("component-name",{
template:`#app`//在此引入
})
複製程式碼2.動態元件
多個元件使用同一個掛載點，然後動態的在它們之間切換。根據 v-bind:is=”元件名” 中的元件名去自動匹配元件，如果匹配不到則不顯示。
動態切換掉的元件（非當前顯示的元件）是被移除掉了，如果想把切換出去的元件保留在記憶體中，可以保留它的狀態或避免重新渲染，可以新增一個keep-alive 指令引數。
<div id="itany">
<button @click="flag=`my-hello`">顯示hello元件</button>
<button @click="flag=`my-world`">顯示world元件</button>
<div>
<!-- 使用keep-alive元件快取非活動元件，可以保留狀態，避免重新渲染，預設每次都會銷燬非活動元件並重新建立 -->
<keep-alive>
<component :is="flag"></component>
</keep-alive>
</div>
</div>
<script>
var vm = new Vue({
el: `#itany`,
data: {
flag: `my-hello`
},
components: {
`my-hello`: {
template: `<h3>我是hello元件：{{x}}</h3>`,
data() {
return {
x: Math.random()
}
}
},
`my-world`: {
template: `<h3>我是world元件：{{y}}</h3>`,
data() {
return {
y: Math.random()
}
}
}
}
});
</script>
複製程式碼五、父元件向子元件傳值
在一個元件內部定義另一個元件，稱為父子元件。子元件只能在父元件內部使用。
預設情況下，子元件無法訪問父元件中的資料，每個元件例項的作用域是獨立的。
接下來我們通過一個例子，說明父元件如何向子元件傳遞值：在子元件Users.vue中如何獲取父元件App.vue中的資料 users:[“Henry”,”Bucky”,”Emily”]
1.建立子元件，在src/components/資料夾下新建一個Users.vue子元件
2.在App.vue中註冊Users.vue元件，並在template中加入users標籤
//App.vue父元件
<template>
<div id="app">
<users v-bind:users="users"></users>//前者自定義名稱便於子元件呼叫，後者要傳遞資料名
</div>
</template>
<script>
import Users from "./components/Users"
export default {
name: `App`,
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
"users":Users
}
}
複製程式碼3.Users.vue的中建立props，然後建立一個users的屬性
//users子元件
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍歷傳遞過來的值，然後呈現到頁面
</ul>
</div>
</template>
<script>
export default {
name: `HelloWorld`,
props:{
users:{ //這個就是父元件中子標籤自定義名字
type:Array,
required:true
}
}
}
</script>
複製程式碼總結：父元件通過props向下傳遞資料給子元件。注：元件中的資料共有三種形式：data、props、computed
六、子元件向父元件傳值（通過事件形式）
接下來我們通過一個例子，說明子元件如何向父元件傳遞值：
當我們點選“Vue.js Demo”後，子元件向父元件傳遞值，文字由原來的“傳遞的是一個值”變成“子向父元件傳值”，實現子元件向父元件值的傳遞。
1.在子元件（header元件）中文字部分繫結一個點選事件
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>//繫結一個點選事件
</header>
</template>
<script>
複製程式碼2.子元件中響應該點選事件的函式中使用$emit來觸發一個自定義事件，並傳遞一個引數
<script>
export default {
name: `app-header`,
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父元件傳值");//自定義事件 傳遞值“子向父元件傳值”
}
}
}
</script>
複製程式碼3.在父元件（App根元件）中的子標籤中監聽該自定義事件並新增一個響應該事件的處理方法
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle" ></app-header>//與子元件titleChanged自定義事件保持一致，updateTitle($event)接受傳遞過來的文字
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: `App`,
data(){
return{
title:"傳遞的是一個值"
}
},
methods:{
updateTitle(e){ //宣告這個函式
this.title = e;
}
},
components:{
"app-header":Header,
}
}
</script>
複製程式碼總結：子元件通過events給父元件傳送訊息，實際上就是子元件把自己的資料傳送到父元件。
七、總結
在通訊中，無論是子元件向父元件傳值還是父元件向子元件傳值，他們都有一個共同點就是都有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。