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>