vue2入坑隨記(一)
都說Vue2簡單，上手容易，但小馬過河，自己試了才曉得，除了ES6語法和webpack的配置讓你感到陌生，重要的是思路的變換，以前隨便拿全局變量和修改dom的錘子不能用了，變換到關註數據本身。vue的官方文檔還是不錯的，由淺到深，但是當你用vue-cli構建一個工程的時候，發現官方文檔還是不夠用，得參考git上開源的項目並去學習es6。而且vue的全家桶(vue-cli,vue-router,vue-resource,vuex)還是都要上的。
1.vue-cli
這個構建工具大大降低了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，相當於啟動了一個請求服務器，給你搭建了一個測試環境，你只關註開發就好。
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
熱更新的機制是檢測文件的變化並用websocket通知客戶端做出相應的更新。詳細的可以移步：【webpack】-- 模塊熱替換
2.vue-router
vue的路由還是很方便的，比ag1的時候要方便很多。這種方便體現在三個方面：
1個是路由和頁面(組件)對應：
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘@/components/Home‘ import Chat from ‘@/components/Chat‘ import Firends from ‘@/components/Firends‘ import Logon from ‘@/components/Logon‘ Vue.use(Router) let router=new Router({ routes: [ { path: ‘/home‘, name:‘Home‘, component: Home }, { path: ‘/‘, redirect: ‘/home‘ },//重定向 { path: ‘/chat‘, name: ‘Chat‘, component: Chat }, { path: ‘/firends‘, name: ‘Firends‘, component: Firends }, { path: ‘/logon‘, name: ‘Logon‘, component: Logon } ] });
常人的思路就是這樣，而ag1中還需要帶上控制器(vue中沒有這個概念,取而代之的是關註組件就行)，這樣用起來更簡單。MVC模式中，需要指到controller下的action。
2個是可以具體到元素了：
<router-link class="footer-item" exact to="home">首頁</router-link>
這個to後面的home(忽略大小寫)就是上面定義的路由名稱。這樣就很方便了。類似於Asp.net MVC 的路由可以用名稱來渲染出路徑，而不用什麽時候都要輸入路徑。
3個是事件攔截：
如果我們要做驗證，最好不過的就是在用戶到達頁面之前進行驗證：
router.beforeEach((to, from, next) => { //todo 以後增加不需要驗證的地址判斷 if(to.path!=="/logon"&&!store.state.userInfo.Account){ next({ path: ‘/logon‘ }) return; }else{ next(); } })
比如在beforeEach中進行處理。它還有很多功能，就不一一枚舉了，官方文檔：http://router.vuejs.org/zh-cn/
3.組件中使用組件
看了幾個移動UI庫，一開始奇怪怎麽沒有footer組件，現在明白，路由都這麽方便了，第三方ui沒必要封裝了footer，也不方便封裝(因為依賴路由)。於是導航可能是你需要自己來寫的第一個組件。
比如定義了個Footer.vue<template> <footer class="footer"> <router-link class="footer-item" exact to="home"> <span class="icon icon-home"> </span> <label>首頁</label> </router-link> <router-link class="footer-item" to="statistics"> <span class="icon icon-stat"> </span> <label>統計</label> </router-link> <router-link class="footer-item" to="more"> <span class="icon icon-more"> </span> <label>更多</label> </router-link> </footer> </template>
<script>
export default {
name: ‘VFooter‘
}
</script>
只在App.Vue中就需要引入
import VFooter from ‘./VFooter‘ export default { name: ‘app‘, data () { return { msg: ‘this is home‘ } }, components:{VFooter} }
然後在App.Vue中就可以使用了
<VFooter></VFooter>如果是要註冊到全局 就用先在main.js中引入
import Footer from ‘./components/VFooter‘ // Vue.component(‘VFooter‘, Footer)//寫在構造函數之前
到了這一步就可以愉快的組裝自己的頁面了。如果需要給頁面加上滑動效果，可以加一個transition(位於app.vue):
<transition name="slide-in" mode="out-in"> <router-view></router-view> </transition>
.slide-out-enter-active, .slide-out-leave-active, .slide-in-enter-active, .slide-in-leave-active { will-change: transform; transition: all 400ms; position: absolute; } .slide-out-enter { opacity: 0; transform: translateX(-100%); } .slide-out-leave-active { opacity: 0; transform: translateX(100%); } .slide-in-enter { opacity: 0; transform: translateX(100%); } .slide-in-leave-active { opacity: 0; transform: translateX(-100%);
如何做到左右切換呢?
4.vue-resource
頁面敲好了，得能發請求。https://github.com/pagekit/vue-resource 而前端如果不是自己寫的接口首先關心的還是怎麽設置代理，這個位於config/index.js下面的proxyTable。
proxyTable: { ‘/api‘: { target: ‘http://11.111.249.12:11‘, changeOrigin: true, pathRewrite: { ‘^/api‘: ‘‘ } },
跨域的設置不能少了changeOrigin。另外需要註意最後的這個‘^/api‘: ‘‘。默認是空的。要註意你選擇的"/api"是不是原路徑中的一部分，不然容易出錯。
然後還有一部分就是設置請求頭(main.js)：
import VueResource from ‘vue-resource‘ Vue.use(VueResource); Vue.http.interceptors.push(function(request, next) {// modify method //request.method = ‘POST‘; // modify headers request.headers.set(‘token‘,“token”);// continue to next interceptor next(); });
5.vuex
全家桶裏面一開始最讓我懵逼的就是這個vuex。這是個什麽鬼，為什麽需要這個。沒有玩過React，不知道什麽是狀態管理。當你想用一個全局變量的時候，你發現之前的招都不靈了。比如設置一個登錄狀態
let login=(name,pwd,success,fail)=>{ Vue.http.post(loginUrl,{account:name,password:pwd}).then(res=>{
//.... window.hasLogin=true;
},res=>{ fire(fail,"請求失敗"); }) }
然後再首頁顯示出來：
<div @click="toggle">{{hasLogin}}</div>
data () { return { hasLogin:window.hasLogin } }, methods:{ toggle(){ window.hasLogin=!window.hasLogin; console.log("clicked",window.hasLogin) } },
你發現你登錄之後確實顯示了true，但怎麽點擊也不會切換false或true。
需要再賦值一次：
this.hasLogin=window.hasLogin;
為什麽呢？因為你自己定義的變量，根本不屬於vue的model。也就是沒有處理過geter和seter,雖然變量的值是變化了，但仍然無法改變界面上的狀態。所以你需要一個狀態管理，按照一定的機制把你的變量變換成vue內部的模型。這個東西就是vuex。因為約定比較多，略顯復雜點，但是耐心看一下還是很容易接受的。它主要分四個部分，state,getters,mutations,actions。先定義一個user.js如下：
state就是我們放共享變量的地方。比如下面的userInfo.
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const userStore=new Vuex.Store({ state:{ userInfo:{ userName:"" } }, getters:{ getUserInfo(state){ return state.userInfo; } }, mutations:{ setUserInfo(state,userInfo){ state.userInfo=userInfo; } }, actions:{ setUserInfo({commit}){ commit(‘setUserInfo‘); } } }) export default userStore;
而getters顧名思義就是獲取接口，mutations(突變)這個詞有點唬人，其實就是setters嘛。裏面的方法自帶state參數。而actions就是mutations的異步方法。然後再main.js中引用一下：
import store from ‘./store/user‘; //... new Vue({ el: ‘#app‘, router, store, template: ‘<App/>‘, components: { App } })
然後我們在設置或獲取的時候就可以使用指定的方法：
import store from ‘@/store/user‘;
//...
store.commit(‘setUserInfo‘,user)
可以直接通過store.state獲取變量，也可以通過getters接口：
computed:{ ...mapGetters({username:‘getUserName‘}) },
這三個點是es6中的擴展運算符。將一個數組轉為用逗號分隔的參數序列。
當然這些狀態刷新之後就沒有了，如果想要暫存下來，可以放到sessionStorage中：
if (window.sessionStorage.user) { var json=JSON.parse(window.sessionStorage.user); store.commit(‘setSessionUser‘,json) }
當然要在muations中放進去
//個人信息 setUserInfo(state,user)
{ state.userInfo=user; window.sessionStorage.user=JSON.stringify(state.userInfo); },
官方文檔： https://vuex.vuejs.org/zh-cn/
小結：到這兒基本五臟俱全了，可以愉快的玩耍了。還有一個是對生命周期的理解。組件實例每次加載都會執行一遍，所以在生命周期的方法中做請求和綁定的時候要清楚這一點。
其他:
Demo https://github.com/CommanderXL/x-blog https://github.com/bailicangdu/vue2-elm https://github.com/shinygang/Vue-cnodejs UI: http://element.eleme.io/#/zh-CN element http://mint-ui.github.io/docs/#/zh-cn2 Mint UI https://github.com/airyland/vux vuxvue2入坑隨記(一)