设置默认图片或者日期比较操作等用到过滤器或者指令
Vue1.0过滤器在文件common\static\static\lib\vue\vue.filter.js
图片：
  <img:src="member.portrait | imgShow 0,'/img/default/default-head.jpg'">
日期格式化：
  <span>{{parkEnterpriseVO.establishTime|formatDateStr'yyyy-MM-dd'}}</span>
 
Vue2.0自定义指令在文件common\static\static\lib\vue \vue2.0\vue.directive.js
Vue2.0里不能用之前的fiter过滤器了，通过自定义指令实现和过滤器类似的功能，用到的引入这个js即可，用法参考：
  图片：
  <img v-imgshowmodule="{code:activityDetailSite.activityDetail.imgPath,type: 0,def:'/img/default-activity-form.png'}">
  日期格式化：
  <spanv-formatdatestr="{date:activityDetailSite.activityDetail.activityTime,format: 'yyyy年MM月dd日 HH:mm'}"></span>
日期比较：
<button type="button"v-comparetodate="{beginTime:activityDetailSite.activityDetail.registrationDeadline,endTime:activityDetailSite.activityDetail.activityDeadline}">报名已截止</button>

vue中<slot></slot>标签代表插槽
一、内容插槽
顾名思义，插槽的作用就是存放内容
html代码如下：
<test-man>
      <v-card dark>
        is handsome
      </v-card>
</test-man>
javascript代码如下：
Vue.component('test-man', {
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot>
      </slot>
    </v-card>
    `
  })
效果如下：
二、后备插槽
在组件模板的<slot></slot>中添加内容，如果html利用的这个组件中没有内容的话，就是默认显示插槽里面的内容，如果有内容则覆盖插槽中的内容 html代码如下：
<test-man></test-man>
<test-man>
  <v-btn>保存</v-btn>
</test-man>
javascript代码如下：
Vue.component('test-man', {
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot>
      <v-btn>提交</v-btn>
      </slot>
    </v-card>
    `
  })
效果如下： 
三、作用域插槽
这类插槽可以让父组件使用子组件的数据，只需子组件在插槽中用v-bind绑定自身的数据，然后父组件在使用组件时就可以用v-slot="slotProps"接收，注意：这里的slotProps可以自定义。
html代码如下：
<test-man v-slot="slotProps">
      <v-btn >{{slotProps.obj2.name}}</v-btn>
    </test-man>
javascript代码如下：
Vue.component('test-man', {
    data(){
      return {
        obj2:{
        name:'zhubajie',
        age:3
        }
      }
    },
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot v-bind:obj2="obj2">
      </slot>
    </v-card>
    `
  })
效果如下：
四、具名插槽
这类插槽可以有多个，每个都用name属性绑定一个不同的名字，在接收内容时避免发生混乱，在组件使用时用v-slot：名字的方式进行绑定。
html代码如下:
<test-man>
      <template v-slot:second>
        <span>这是第二个插槽的内容</span>
      </template>
      <template v-slot:first>
        <span>这是第一个插槽的内容</span>
      </template>
    </test-man>
javascript代码如下
Vue.component('test-man', {
    data(){
      return {
        obj2:{
        name:'zhubajie',
        age:3
        }
      }
    },
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <div>
      <slot name="first">
      </slot>
      </div>
      <span>-----这是一条分界线-----</span>
      <div>
      <slot name="second">
      </slot>
      </div>
    </v-card>
    `
  })
效果如下： 

七夕了，写个昨天遇到的bug来缓解下没有人约的尴尬。
昨天和QA过历史bug时，发现有好几个浏览器不兼容的导致式样变形的bug，调查了一番发现是因为deep选择器的原因。
在说bug之前，先看看vue官方是如何说明deep的用法的。
为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域
<
上述代码会被编译成
.
vue官方对于deep选择器的说明
这么写是没有问题的，但是实际项目中，还有人深度嵌套的写法
<
生成的代码如下
.
在Chrome浏览器下是没有问题的，但是在其他浏览器上就完全不可行了
.
上面这部分代码完全失效了，为什么尼？
因为/deep/选择器这个是chrome浏览器自己的标准，其他浏览器并没有实现这个标准，所以其他浏览器是失效的。
有意思的是，google说会在chrome的63这个版本，移除/deep/的支持，不知道为啥现在最新的还是会有？
17年google说要废弃/deep/
既然问题知道了，bug自然就好解决了，不要用/deep/嵌套就好了。
vue官方也说了，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍，当然这种写法对于程序员来说是最友好的。
渲染测试
之前写react时用的是CSS Modules，他比较麻烦的是需要导入一个变量，其他的一切完美，vue也提供了支持，新项目还是用CSS Modules吧，解决更彻底。
vue的CSS Modules解决方案
参考文档
关于deep的stackoverflow 

上周有一个长按某一块文本弹出一个弹窗的需求，关于这个长按的姿势想到了使用vue的自定义指令来进行开发这个需求，因为报告中很多页面都要使用到这个长按的姿势，所以自定义指令是最佳解决方法的首选。刚好借此机会学习自定义指令。

官网提供的全局自定义和组件自定义的例子，都很简单明了了告诉我们怎么使用：官网自定义例子链接



下面主要讲解我全局自定义指令的整个流程，整体思路与官网的一样，但是一般实际项目开发中要规范化自己的开发风格，这里主要是学习各种框架会使用一套方法来实现：

（1）longTap.js：这个文件主要用来实现主要的业务逻辑，即长按（touchstart,touchmove,touchend）事件的处理
//核心代码
export default {
//使用钩子函数inserted(被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中))；此外还有=>(1)bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(2)update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 
(3)componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。(4)unbind：只调用一次，指令与元素解绑时调用。上面这些钩子函数可以根据自己所需场景进行选择。

  inserted (el, bind, vNode) {
    el.addEventListener('touchstart', event => {
    //按下去的逻辑代码
    }, false)
    
    el.addEventListener('touchmove', event => {
    //手指按下去移动的逻辑代码
    }, false)
    
    el.addEventListener('touchend', event => {
    //手指离开页面时的逻辑代码
    }, false)
  }
}

（2）add.js：这个文件主要用来实现添加longtap的指令
import LongTap from 'longTap'   //引入上面的longTap.js
Logntap.install = function (Vue, option) {
  Vue.directive('longtap', Longtap)
}
export default LongTap

（3）long-tap.js：这个文件一般放在plugins文件夹下面，到时要引入nuxt.config.js中
import Vue from 'vue'
import LongTap from 'add'

Vue.use(LongTap)

(4)在test.vue文件中使用指令v-longtap
<div v-longtap></div>

上面就是整个自定义指令的使用流程。