//寫在前面：本文內容為個人博客的搭建，用到npm包管理、vue腳手架以及國外的firebase來實現數據交互
文中步驟比較詳盡，歡迎大家多提寶貴意見！
1>環境搭建
首先請確保已經擁有node環境，並裝好淘寶鏡像
cnpm install --global vue-cli —— 下載vue腳手架
vue init webpack 項目名稱 ——利用腳手架創建項目 全部選N
cd到項目
cnpm install 安裝項目依賴
npm run dev 運行
值得一提的是，為了避免端口沖突，我們可以手動修改端口號：
修改端口號——build文件夾下dev-server.js文件 var pory = 端口號
為項目創建組件
大致流程——在components文件夾下新建addFace.vue文件，拷貝hello.vue文件內容進去並刪除多余信息，修改class名稱，App.vue中先引入addFace，vue文件方式是import。。。 from。。。 以及在components中引用 ，之后再App.vue的template下注入addFace.vue的class
<template>
<div id="app">
<add-face></add-face>
</div>
</template>
<script>
import addFace from './components/addFace'
export default {
name: 'app',
components: {
addFace
}
}
</script>
2>添加博客頁面 post數據
首先在template中實現基本的布局
所有的input 都應該雙向綁定數據 這里就需要用到v-model，並且需要在script的data中聲明（data存放可變的數據） 就像這樣
data () {
return {
book : {
title : "",
content : "",
checks : [],
booker : ""
},
bookers : [
"Yang",
"max",
"star"
],
submmited : false
}
},
既然我們已經通過v-model綁定了數據，那么如何應用它呢，這時候就需要用到{{}}
這是angular標准的雙向綁定標識就像這樣
<p> {{book.title}} </p>
這時候我們不免就要問了，那對於數組類型的數據我們怎么來拿到它呢
這時候就需要使用v-for來遍歷它，
舉個栗子：我們在book中定義了一個checks這么一個空數組（多用於多選框、比如所屬標簽）這樣我們就可以自用戶勾選選框的時候拿到對應的value值並存放在數組中
之后我們就可以通過v-for來拿到其中的數組（這里一般都需要用到ul>li）就像這樣
<ul>
<li v-for="check in book.checks">
{{check}}
</li>
</ul>
接下來還有一種情況，如果我們需要指定內容的下拉框選項（比如作者）我們需要怎么辦呢
其實也很簡單，首先我們需要在data下定義一個數組來存儲我們特定的選框信息，就像之前的bookers:[]，之后我們就可以通過v-for在option中遍歷出來就像這樣
<select v-model="book.booker">
<option v-for="booker in bookers">
{{booker}}
</option>
</select>
這樣我們就已經將bookers的數據遍歷到option中了並將選擇的結果以{{booker}}的形式展示出來，但是這里的booker只能在option下使用，如何才能實現數據的雙向綁定呢，這當然少不了v-model了，但是我們不可能v-model="booker"來使用它吧，瀏覽器會報錯booker未定義，那么我們就在data中定義它一下，之后我們就可以拿到用戶選擇的值了 並像這樣來使用它
<p>作者：{{book.booker}}</p>
表單提交的onclick事件
v-on:click.prevent="post"（這里的prevent是為了阻止瀏覽器刷新）點擊會觸發post方法，那么現在我們還沒有這個方法，所以需要在data外,分割創建一個methods來存放方法
methods : {
post : function(){
this.$http.post("https://jsonplaceholder.typicode.com/posts",{
title : this.book.title,
content : this.book.content
})
.then(function(data){
console.log(data);
this.submmited = true;
})
}
}
這里我們需要用到http請求，那么我們就需要借助resource方法，但是我們還沒有他，所以需要下載它
npm install vue-resource --save
現在我們已經下載好了，如果想使用就需要先在main.js中引用它
import VueResource from 'vue-resource'
Vue.use(VueResource)
此時我們就可以正常使用它的方法了
this.$http.post("需要post的地址").then(post之后的回調函數)
為了方便測試 網上已經有提供寫好的
jsonplaceholder.typicode.com
如果我們需要控制表單提交后隱藏那么我們需要用到v-if
它同樣需要一個布爾類型的變量控制是否顯示，那么我們先在data外，分割並定義它
submmited : false
然后我們可以通過v-if給form添加事件 並在post的回調函數中控制布爾值得變化
<form v-if="!submmited">
<label for="">博客標題：</label>
<input type="text" v-model="book.title" required>
<label for="">博客內容：</label>
<textarea name="" id="" v-model="book.content"></textarea>
<div id="checkboxes">
<label for="">情感</label>
<input type="checkbox" value="情感" v-model="book.checks">
<label for="">心情</label>
<input type="checkbox" value="心情" v-model="book.checks">
<label for="">靈感</label>
<input type="checkbox" value="靈感" v-model="book.checks">
<label for="">回憶</label>
<input type="checkbox" value="回憶" v-model="book.checks">
</div>
<label for="">作者：</label>
<select v-model="book.booker">
<option v-for="booker in bookers">
{{booker}}
</option>
</select>
<button v-on:click.prevent = "post">
保存並上傳
</button>
</form>
3>博客總覽（展示頁面） 請求數據get
為了將博客信息展示出來，我們需要先創建一個vue文件來實現它
將新建的vue頁在APP.Vue中引用
接下來在新建的vue頁中實現內容 template、script、style
這里值得說明的一點是style后面跟一個scope可以使style樣式只作用於當前頁
接下來我們需要將博客信息通過v-for遍歷出來
那么我們怎么拿到博客信息呢，我們在data后，分割創建一個created方法並通過get請求到數據
那么我們請求到的數據應該放在哪里呢，我們在data里定義一個數組來接收，然后就可以正常的調用了
<template>
<div class="show-face">
<h1>博客總覽</h1>
<div class="single-face" v-for="book in books">
<h3> {{book.title}} </h3>
<p> {{book.body}} </p>
</div>
</div>
</template>
<script>
export default {
name: 'show-face',
data () {
return {
books : []
}
},
created(){
this.$http.get("https://jsonplaceholder.typicode.com/posts")
.then(function(data){
console.log(data.body);
this.books = data.body.slice(0,10);
})
}
}
</script>
<style>
.single-face{
border : 1px solid #444;
}
</style>
這里需要說明的一點是，如果需要請求本地的文件，json文件需要放在static中
4.1>自定義指令、鈎子函數
接下來我們要說的的是自定義指令
自定義指令使用格式：v-指令名稱 = "binding.value"
這里binding.value不是必填項，取決於你是否需要使用它，但是應該注意的一點是這里應該是字符串或[]/{}的形式，我們需要用''來包裹它
那么我們怎么定義它呢
在main.js中聲明它就好
vue.directive（‘指令名稱’，{執行的內容}）
那么執行的內容有沒有相應的格式呢
答案是有
bind（el,binding,vnode）{}
這里的el就是綁定了自定義事件的元素，我們可以直接通過el.style來控制它的樣式
這里的binding是自定義元素的屬性，我們可以通過binding.value來使用它 通過if判斷語句
Vue.directive('rainbow',{
bind(el,binding,vnode){
el.style.color = "#" + Math.random().toString(16).slice(2,8);
}
})
Vue.directive('showface',{
bind(el,binding,vnode){
if(binding.value === "face"){
alert("1");
}else{
}
if(binding.arg = "show"){
alert("2");
}
}
})
4.2>搜索框 （搜索對應內容）
接下來我們需要實現搜索框的功能，
這就需要使用到過濾器，官方文檔中給出的api是vue.filter
首先來說一下如何使用過濾器
我們需要在需要過濾的value后加一個|然后加上過濾器的名稱
就像這樣
<p> {{book.body | snippet}} </p>
那么我們如何得到過濾器呢
需要在main.js中聲明
vue.filter(“過濾器名”,執行的函數)
就像這樣
Vue.filter("snippet",function(value){
return value.slice(0,100) + "...";
})
這里的value是什么呢，就是需要被過濾的元素
（需要說明的一點是，也可以有局部過濾器
只需要在data中定義filters：{“過濾器名” ： function（value）}
能很明顯的看出來這個是json的形式，所以可以有多個過濾器）
接下來我們是否需要一個搜索框input
既然有輸入框，那么我們定義一個search來接收用戶輸入的內容，當然他需要定義在data中
接下來我們來實現篩選
在data后，分割一個方法來實現就像這樣
computed: {
filterBook : function(){
return this.books.filter( (book) => {
return book.title.match(this.search);
} )
}
}
這里的books和book明顯是顯示數據是遍歷的信息
這個方法的作用就是拿到用戶輸入的信息去和遍歷的信息匹配，匹配上會顯示出來
這里需要說明的一點是 經過這個方法之后，之前遍歷的book in books就需要變成book in filterBook了
5.1>路由、 nav 點擊跳轉詳情
接下來我們需要用到的是路由參數
首先我們來安裝它
npm install vue-router --save
當然也少不了main.js中的引用和使用
就像這樣
import VueRouter from 'vue-router'
Vue.use(VueRouter)
接下來我們就可以在main.js中創建路由了
就像這樣
const router = new VueRouter({
routes : Routers ,
})
別急routes后面可以是一個對象然后我們通過path ： component來一一對應地址和模塊
但是為了代碼的優化 我們重新創建一個routes.js文件來做這件事
當然如果需要其他文件來實現我們需要在main.js中import它
就像這樣
import Routers from './routes'
同樣的我們還需要在routes.js中暴露它
就像這樣
export default [
{path : "/",component : showFace},
{path : "/add",component : addFace},
{path : "/face/:id",component : singleFace},
]
和明顯在routes.js中我們找不到對應的模塊
那么我們需要引入它
就像這樣
import addFace from './components/addFace'
import showFace from './components/showFace'
import singleFace from './components/singleFace'
export default [
{path : "/",component : showFace},
{path : "/add",component : addFace},
{path : "/face/:id",component : singleFace},
]
那么路由定義好了怎么使用它呢
我們需要在main.js的app板塊下使用它
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router : router
})
我們還需要在app.vue下的template中
<router-view></router-view>
此時我們可以通過手動修改地址展示不同的頁面，但是你會發現在你手動切換地址的時候回自動加上一個#號，那么我們在定義路由時候加上一句
const router = new VueRouter({
routes : Routers ,
mode : "history"
})
最后我們來優化一下它
新建一個導航頁面來實現點擊跳轉faceHeader.vue
當然我們如果想讓他和app.vue產生管理就需要調用並使用它
就像這樣
<script>
import addFace from './components/addFace'
import showFace from './components/showFace'
import faceHeader from './components/faceHeader'
export default {
name: 'app',
components: {
addFace,
showFace,
faceHeader
}
}
</script>
同樣的我們在faceHeader.vue中需要暴露它
就像這樣
<script>
export default {
name : "face-header"
}
</script>
接下來我們在faceHeader中來添加導航
就像這樣
<template>
<nav>
<ul>
<li>
<router-link to="/" exact>博客</router-link>
<router-link to="/add" exact>寫博客</router-link>
</li>
</ul>
</nav>
</template>
router-link to 可以指向要顯示的地址也可以用來設置樣式
exact來解決樣式一直存在的問題
5.2>路由參數、詳情頁
在router.js中我們先來看看如何應用
{path : "/face/:id",component : singleFace},
根據path傳入的id來實現singleFace這個組件
那么我們還沒有這個組件
沒關系先import它 然后來創建一個文件singleFace.vue
然后在singleFace.vue中暴露它
接下來說一下思路
我們應該在另一個頁面，也就是showFace.vue中拿到id值然后給他顯示對應的頁面
首先我們需要用到的值有id和需要顯示的內容book，那么我們在data中定義它
那么我們如何來拿到book呢
通過this.$http.get().then(function(data){})
來拿到它
在get中拿到地址並拼接一個id
在.then回調函數中data接收到數據
像這樣
<template>
<div id="single-face">
<h1> {{book.title}} </h1>
<article> {{book.body}} </article>
</div>
</template>
<script>
export default {
name : "single-face",
data() {
return{
id : this.$route.params.id,
book : {}
}
},
created(){
this.$http.get("https://jsonplaceholder.typicode.com/posts/" + this.id)
.then(function(data){
this.book = data.body;
})
}
}
</script>
<style>
</style>
此時我們已經實現手動修改地址顯示不同頁面
接下來我們需要優化它
在showFace.vue中
<div class="single-face" v-for="book in filterBook">
<router-link v-bind:to="'/face/' + book.id">
<h3 v-rainbow> {{book.title}} </h3>
<p> {{book.body | snippet}} </p>
</router-link>
</div>
這里需要說明的是
router-link to="" 進行的是路由跳轉
跳轉的地址是個字符串所以要將地址和id拼接起來
如果要實現點擊跳轉需要v-bind綁定
6>借用firebase創建數據庫 post數據至數據庫
firebase中
新建項目 ——進入 —— 規則 ——改為true（是否可讀、是否可寫） —— 復制暴露出來的url——替換添加頁面中的post目錄並創建一個文件“url/post.json”——替換展示頁面的get目錄
此時傳入的是對象而非數字，所以我們不能直接通過for遍歷
那么我們將他傳入數組中遍歷
在show頁面中的created方法 下 首先data.json（）然后return出去並在.then回調函數中data接收 那么在回調函數中可以for in 來遍歷這個數組
同時的key也作為唯一標識 此時我們有了數據有了id 那么我們將數據存儲在新定義的空數組中並賦值給books
created(){
this.$http.get("rm-uf6g20y9v9pnd25c7.mysql.rds.aliyuncs.com/posts.json")
.then(function(data){
return data.json();
})
.then(function(data){
var booksArray = [];
for(let key in data){
data[key].id = key;
booksArray.push(data[key]);
}
this.books = booksArray;
})
},
此時已經完成所有邏輯 只需要對樣式進行編輯即可