vue.js中踩到的坑

最新推荐文章于 2022-04-29 23:56:47 发布

weixin_34275734

最新推荐文章于 2022-04-29 23:56:47 发布

阅读量112

点赞数

文章标签： javascript 测试 python ViewUI

原文链接：https://my.oschina.net/u/3105272/blog/886297

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、配置dev-sever.js中的本地数据:

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

2、当项目中应用到了vuex时， npm i -S babel-polyfill ; 然后可以在mian.js的最上面

import 'babel-polyfill '

3、在vue中修改索引数组的数据时，应该采用js的Array的方法，不可直接采用等号赋值的方式修改，那样会让mvc失去效果！范例:

        this.list[0]=true //数据中修改了,但是在dom中未修改!
        this.list.splice(0,1,true); //数据中修改了, dom中由于mvc的性质也修改了!

4、自定义指令：

vnode.context 是组件中的vue实例用发等同于组件中的 this， 2、

5、当路由跳转页面时，url不同但是使用的都是同一组件的时候，vue会继续使用已经渲染的组件，并不会销毁一个在从新实例化一个，这个时候可能导致页面并没有变化，解决方法是在组件中监听路由的变化：

watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }

6、插件挂载到全局适用于路由： 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')

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>

转载于:https://my.oschina.net/u/3105272/blog/886297