animate 草案.....省去 cssHook 方法

$('#box_1').maya({
                left: '80%'
            }, {
                    duration: 800
                }, function () {
                    // init-fun
                    // 取得與目標相同的單位
                    // 如 left: px or %
                    // 若單位不同，程式將自動檢視並不執行
                    return {
                        left: $(this).css('left')
                    };
                }, function (initData, finalData, ratio) {
                    // 每個 tick 會執行
                    // 此函式將隱身在後面
                    var initLeft = parseFloat(initData.left);
                    var final_left = finalData.left;
                    var current_left = (final_left - initLeft) * ratio + left - initLeft;

                    $(this).css({
                        left: current_left + (單位)
                    });
                });

網路字形

http://weloveiconfonts.com

vue2 Event Bus Example

var bus = new Vue();

var vueAwesomeCompare = new Vue({
 ... 
 components:{
    'vue-table':{

       // or mounted
       created:function(){
          bus.$on('popState', function(state){
             self.popState(state);
         });
       },
       methods:{
          popState:function(state){
          ...
         }
      }
    }
  ...
  }
 ...
});

window.onpopstate = function(event){
    bus.$emit('popState',event.state);
};

/////////////////////////////////////////////////////////////////////

var vueAwesomeCompare = new Vue({
      components:{
        'vue-table':{
            template:'#vue-table',
            
            props:[''],
            
            data:function(){
                return {
                    items:null,
                    brands:null,
                    brand:null,
                    comparing:false
                }
            },
       }
      ....
  },
});
console.log(vueAwesomeCompare.$data); //== Object {__ob__: Observer}
console.log(vueAwesomeCompare.$data.brand); //== undefined
console.log(vueAwesomeCompare.brand); //== undefined

/////////////////////////////////////////////////////////////////////

var bus = new Vue();

var vueAwesomeCompare = new Vue({
 ... 
 components:{
    'vue-table':{
       created:function(){
          bus.$on('popState', function(state){
             self.popState(state);
         });
       },
       methods:{
          popState:function(state){
          ...
         }
      }
    }
  ...
  }
 ...
});

window.onpopstate = function(event){
    bus.$emit('popState',event.state);
};

/////////////////////////////////////////////////////////////////////

export default {
      data () {
          return {
              title: '我的',
              headerInfo: []
          }
      },
      mounted: function () {
          this.$bus.on('getMessageCount', this.setMessageCount);
          this.$bus.on('setCenterHeader', this.setCenterHeader);
      },
      methods: {
          setMessageCount: function (params) {
              document.querySelector('.my_message').setAttribute('data-count', params.num)
          },
          setCenterHeader: function (params) {
              this.$set(this.$data, 'title', params.title)// 改变数据并且更新视图
              this.$set(this.$data, 'headerInfo', params)
          }
      }
  }

export default{
    data () {
        return {
            listData: [],
            loading: false,
            currentPageCount: 1,
            pageCount: 0
        }
    },
    mounted: function () {
        this.$bus.emit('setCenterHeader', {title: '消息中心', left: {className: 'back', href: ''}, 'right': {hide: true}})
    }
}

網頁在手機顯示下，要弄側邊 slide 要注意的

html {
        width: 100%;
        height: 100%;
        overflow-x: hidden; /* 不知如何解釋 ，有時沒設 
                                            body.overflow-x 會沒效果 */
    }
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden; /* 超過頁面就 cut 掉 */
        position: relative;
    }

html { overflow:auto;} 是默认的。
如果不设置html height怎么会有滚动条，原来html有点特殊，它的widht和height是有浏览器窗口大小决定的。

几乎所有的浏览器，默认的偏移margin是在body元素上，而不是html的padding.（通过做实验确实如此）有些还是body的padding，所有重置页边距用body{margin:0;padding:0}缺一不可。