Vue 入門之專案目錄結構介紹
Vue 是一套用於構建使用者介面的漸進式框架，與其它大型的頁面框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
初始化專案
首先，我們使用如下的命令建立一個Vue專案。
vue init webpack 專案名字然後專案會有一些初始化的設定，該部分內容的具體含義如下:
- Target directory exists. Continue? (Y/n) ：直接回車預設(然後會下載
vue2.0模板)； - Project name (vue-test) ：專案名稱，直接回車預設；
- Project description (A Vue.js project) ：Vue專案描述，直接回車預設；
- Author：專案擁有者名稱，直接回車預設；
- Use ESLint to lint your code? n：是否啟用eslint檢測，選擇”N”；
- pick an eslint preset： 預設Standard；
- setup unit tests with karma + mocha?N：是否需要新增單元測試，選擇不需要；
- setup e2e tests with Nightwatch?N：是否需要新增E2E測試，選擇不需要。
然後開啟終端，執行“npm install”命令安裝依賴庫。
cd 專案名字
npm install如果開發中需要安裝一些額外的第三方庫，可以使用如下面的命令：
npm install 庫名稱 –save然後使用下面的命令啟動或者釋出專案
npm run dev //啟動專案
npm run build //釋出專案Vue目錄結構介紹
開啟新建的Vue專案，其目錄結構如下圖所示。
├── index.html 入口頁面
├── build 構建指令碼目錄
│ ├── build-server.js 在上面的檔案結構中，重點注意下面的內容：
- index.html檔案入口；
- src放置元件和入口檔案；
- node_modules為依賴的模組；
- config中配置了路徑埠值等；
- build中配置了webpack的基本配置、開發環境配置、生產環境配置等。
Vue基礎指令
Vue內建了很多有用的指令，這些指令通常作用在HTML元素上以v-開頭，可將指令視作特殊的HTML屬性（attribute）。下面就一些常用的指令給大家簡單介紹下。
v-if指令
條件判斷指令，根據表示式值的真假來插入或刪除元素，表示式返回一個布林值。語法規則如下：
v-if = "expression"例如有下面一個例項，
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-if指令</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="yes">Yes</h1>
<h1 v-if="no">No</h1>
<h1 v-if="age > 25">Age: {{age}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
yes: true,//值為真，插入元素
no: false,//值為假，不插入元素
age: 28
}
})
</script>
</body>
</html>執行結果為：
yes
age: 28v-show指令
條件渲染指令，與v-if不同的是，無論v-show的值為true或false，元素都會存在於HTML程式碼中；而只有當v-if的值為true，元素才會存在於HTML程式碼中。v-show指令只是設定了元素CSS的style值，v-show指令的語法如下：
v-show = "expression"例如：
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-show指令</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="yes">Yes</h1>
<h1 v-show="no">No</h1>
<h1 v-show="age > 25">Age: {{age}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
yes: true,//值為真
no: false,//值為假
age: 28
}
})
</script>
</body>
</html>
v-else指令
可配合v-if或v-show使用，v-else指令必須緊鄰v-if或v-show，否則該命令無法正常工作。v-else繫結的元素能否渲染在HTML中，取決於前面使用的是v-if還是v-show。若前面使用的是v-if，且v-if值為true，則v-else元素不會渲染；若前面使用的是v-show，且v-show值為true，則v-else元素仍會渲染到HTML。
v-for指令
迴圈指令，基於一個數組渲染一個列表，與JavaScript遍歷類似。語法格式如下：
v-for = "item in items"例如，在陣列todos，依次遍歷陣列todos中的每個元素，將text部分顯示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-for指令</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{text: 'learn Javascript'},
{text: 'learn Vue'},
{text: 'learn ...'}
]
}
})
</script>
</body>
</html>v-bind指令
v-bind用於給DOM繫結元素屬性。例如：
v-bind:argument="expression"其中，argument通常是HTML元素的特性，如：v-bind:class=”expression”。
v-bind指令可以縮寫為:冒號。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:title="message">Hover your mouse over me</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'you loaded this page on ' + new Date()
}
})
</script>
</body>
</html>v-on指令
v-on用於監聽DOM事件，語法與v-bind類似，如監聽點選事件。
v-on:click="doSth"其中，v-on指令可以縮寫為@符號。如：@click=”doSth”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p><input type="text" v-model="message"></p>
<p>
<button v-on:click="greet">Greet</button>
</p>
<p>
<button v-on:click="say('hello vue')">Hello</button>
</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Greet to Vue'
},
methods: {
greet: function(){
alert(this.message);
},
say: function(msg){
alert(msg);
}
}
})
</script>
</body>
</html>