都說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，也不方便封裝(因為依賴路由)。於是導航可能是你需要自己來寫的第一個組件。
<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>
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/
小結：到這兒基本五臟俱全了，可以愉快的玩耍了。還有一個是對生命周期的理解。組件實例每次加載都會執行一遍，所以在生命周期的方法中做請求和綁定的時候要清楚這一點。
其他:
學習了Vue全家桶和一些UI基本夠用了，但是用元素的方式使用組件還是不夠靈活，比如我們需要通過js代碼直接調用組件，而不是每次在頁面上通過屬性去控制組件的表現。下面講一下如何定義動態組件。
Vue.extend
思路就是拿到組件的構造函數，這樣我們就可以new了。而Vue.extend可以做到：https://cn.vuejs.org/v2/api/#Vue-extend
// 創建構造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 創建 Profile 實例，並掛載到一個元素上。
new Profile().$mount('#mount-point')
官方提供了這個示例，我們進行一下改造，做一個簡單的消息提示框。
動態組件實現
創建一個vue文件。widgets/alert/src/main.vue
<template>
<transition name="el-message-fade">
<div v-show="visible" class="my-msg">{{message}}</div>
</transition>
</template>
<script >
export default{
data(){
return{
message:'',
visible:true
}
},
methods:{
close(){
setTimeout(()=>{
this.visible = false;
},2000)
},
},
mounted() {
this.close();
}
}
</script>
這是我們組件的構成。如果是第一節中，我們可以把他放到components對象中就可以用了，但是這兒我們要通過構造函數去創建它。再創建一個widgets/alert/src/main.js
import Vue from 'vue';
let MyMsgConstructor = Vue.extend(require('./main.vue'));
let instance;
var MyMsg=function(msg){
instance= new MyMsgConstructor({
data:{
message:msg
}})
//如果 Vue 實例在實例化時沒有收到 el 選項，則它處於“未掛載”狀態，沒有關聯的 DOM 元素。可以使用 vm.$mount() 手動地掛載一個未掛載的實例。
instance.$mount();
document.body.appendChild(instance.$el)
return instance;
}
export default MyMsg;
require('./main.vue')返回的是一個組件初始對象，對應Vue.extend( options )中的options，這個地方等價於下面的代碼：
import alert from './main.vue' let MyMsgConstructor = Vue.extend(alert);
而MyMsgConstructor如下。
參考源碼中的this._init,會對參數進行合並，再按照生命周期運行：
Vue.prototype._init = function (options) {
...// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
...
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};
而調用$mount()是為了獲得一個掛載實例。這個示例就是instance.$el。
可以在構造方法中傳入el對象(注意上面源碼中的mark部分，也是進行了掛載vm.$mount(vm.$options.el)，但是如果你沒有傳入el，new之后不會有$el對象的，就需要手動調用$mount()。這個方法可以直接傳入元素id。
instance= new MessageConstructor({
el:".leftlist",
data:{
message:msg
}})
這個el不能直接寫在vue文件中，會報錯。接下來我們可以簡單粗暴的將其設置為Vue對象。
調用
在main.js引入我們的組件：
//..
import VueResource from 'vue-resource'
import MyMsg from './widgets/alert/src/main.js';
//..
//Vue.component("MyMsg", MyMsg);
Vue.prototype.$mymsg = MyMsg;
然后在頁面上測試一下：
<el-button type="primary" @click='test'>主要按鈕</el-button> //..
methods:{
test(){
this.$mymsg("hello vue");
}
}
這樣就實現了基本的傳參。最好是在close方法中移除元素：
close(){
setTimeout(()=>{
this.visible = false;
this.$el.parentNode.removeChild(this.$el);
},2000)
},
回調處理
回調和傳參大同小異，可以直接在構造函數中傳入。先修改下main.vue中的close方法：
export default{
data(){
return{
message:'',
visible:true
}
},
methods:{
close(){
setTimeout(()=>{
this.visible = false;
this.$el.parentNode.removeChild(this.$el);
if (typeof this.onClose === 'function') {
this.onClose(this);
}
},2000)
},
},
mounted() {
this.close();
}
}
如果存在onClose方法就執行這個回調。而在初始狀態並沒有這個方法。然后在main.js中可以傳入
var MyMsg=function(msg,callback){
instance= new MyMsgConstructor({
data:{
message:msg
},
methods:{
onClose:callback
}
})
這里的參數和原始參數是合並的關系，而不是覆蓋。這個時候再調用的地方修改下，就可以執行回調了。
test(){
this.$mymsg("hello vue",()=>{
console.log("closed..")
});
},
你可以直接重寫close方法，但這樣不推薦，因為可能搞亂之前的邏輯且可能存在重復的編碼。現在就靈活多了。
統一管理
如果隨着自定義動態組件的增加，在main.js中逐個添加就顯得很繁瑣。所以這里我們可以讓widgets提供一個統一的出口，日后也方便復用。在widgets下新建一個index.js
import MyMsg from './alert/src/main.js';
const components = [MyMsg];
let install =function(Vue){
components.map(component => {
Vue.component(component.name, component);
});
Vue.prototype.$mymsg = MyMsg;
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
};
export default {
install
}
在這里將所有自定義的組件通過Vue.component注冊。最后export一個install方法就可以了。因為接下來要使用Vue.use。
安裝 Vue.js 插件。如果插件是一個對象，必須提供
install方法。如果插件是一個函數，它會被作為 install 方法。install 方法將被作為 Vue 的參數調用。
也就是把所有的組件當插件提供：在main.js中加入下面的代碼即可。
... import VueResource from 'vue-resource' import Widgets from './Widgets/index.js' ... Vue.use(Widgets)
這樣就很簡潔了。
小結： 通過Vue.extend和Vue.use的使用，我們自定義的組件更具有靈活性，而且結構很簡明，基於此我們可以構建自己的UI庫。以上來自於對Element源碼的學習。
widgets部分源碼：http://files.cnblogs.com/files/stoneniqiu/widgets.zip