vue.js中踩到的坑

一、配置dev-sever.js中的本地數據:

var apiRoutes = express.Router();
apiRoutes.post('/index',function (req,res) {
res.json({
  errno:0,
  data:index
})
})
app.use('/api',apiRoutes)

二、當項目中應用到了vuex時， npm i -S babel-polyfill ; 而後能夠在mian.js的最上面

import 'babel-polyfill '

三、在vue中修改索引數組的數據時，應該採用js的Array的方法，不可直接採用等號賦值的方式修改，那樣會讓mvc失去效果！ 範例:

this.list[0]=true //數據中修改了,可是在dom中未修改!
        this.list.splice(0,1,true); //數據中修改了, dom中因爲mvc的性質也修改了!

四、自定義指令：

1. vnode.context 是組件中的vue實例 用發等同於組件中的 this， 二、

五、當路由跳轉頁面時，url不一樣可是使用的都是同一組件的時候，vue會繼續使用已經渲染的組件，並不會銷燬一個在重新實例化一個， 這個時候可能致使頁面並無變化，解決方法是在組件中監聽路由的變化：

watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }

六、插件掛載到全局 適用於路由： mian.js中的代碼應該是這樣的：

import Vue from 'vue'
import App from './App'
import store from './store.js'//引入自定義的vuex模塊
import router from './router/index.js'//引入自定義的路由模塊
import resource from 'vue-resource'
Vue.use(resource)

/* eslint-disable no-new */
new Vue({
 store,// ! vuex掛載到全局
 router, //! 將路由掛載到全局
 render: h => h(App)
}).$mount('#app-box')

7. vue的過渡效果 配合animate.css 使用

<transition enter-active-class="zoomIn" leave-active-class="zoomOut">
<div class='animated'></div>
            // animated  是動畫的播放時間
            //enter-active-class dom元素出現時執行的過渡效果
            //  leave-active-class  dom元素消失時執行的過渡效果
</transition>