文档章节

vue.js中踩到的坑

李康德
 李康德
发布于 2017/04/24 19:33
字数 412
阅读 41
收藏 0

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、自定义指令:

  1. 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')
  1. 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>

© 著作权归作者所有

共有 人打赏支持
李康德
粉丝 3
博文 10
码字总数 6220
作品 0
深圳
前端工程师
关于vue-area-linkage走过的坑

最近写的项目是vue框架,搭配element-ui框架。这个框架上手快,而且页面的大部分样式都有现成的可以用,使用起来比较方便。前几天有一个需求是要写省市区联动选择,上网搜罗了一遍之后发现了...

blueluu
06/26
0
0
Vue 项目升级到 webpack4.x 小纪【附代码】

自 webpack 4.x 发布以来,就独得码农恩宠。我公司的项目是基于 webpack 3.x 版本的 vue 项目, 当时是用 vue-cli 工具构建的项目,项目开发完成后发现打包性能低下,而且项目是多页面的,需...

linghuam
08/15
0
0
Vue-Router源码学习之install方法

Vue是怎么注册插件的呢? 使用过Vue的coder都知道,如果想注册一个vue的插件,在vue对象上能够使用的话(并不是绑在Vue.prototype上的那种暴力方式),必须使用Vue.use(你的插件)的方式来注册...

酸楚与甘甜
09/07
0
0
微信小程序——使用setData修改数组中的单个对象

微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是...

Originalee
05/30
0
0
简易商城小程序全栈开发(mpvue+koa+mongodb)

前言 接触小程序有一段时间后并且多多少少做了一些项目之后,又开始了vue的旅程,受其核心思想的影响,对数据/状态管理、组件化、跨平台等都有较高的追求,mpvue 是一个使用 Vue.js开发小程序...

mosa
07/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
19分钟前
1
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
50分钟前
1
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
58分钟前
1
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
0
0
JAVA集合之ArrayList

一、前言 Java 集合类提供了一套设计良好的支持对一组对象进行操作的接口和类,JAVA常用的集合接口有4类,分别是: Collection:代表一组对象,每一个对象都是它的子元素 Set:不包含重复元素...

木木匠
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部