SOURCE

Vue.component('child-p2', {
  props: {
    uu: String
  },
  template:'<div><img :title="t" :src="url"><h1>{{uu}}</h1></div>',
  data: function() {
    return {
      t: '吱吱吱',
      url: 'https://www.taobao.com/favicon.ico'
    }
  }
  
  
})
Vue.component('child-p', {
  template:'<div>{{this.$root.foo}}<child-p2 ref="c2"></child-p2></div>',
})




// 全局过滤器
Vue.filter('capitalLast', function(value) {
  if (!value) {
    return ''
  }
  var value = value.toString()
  return value.slice(0, value.length-1) + value.charAt(value.length-1).toUpperCase()
})

var app = new Vue({
  el: "#app",
  props: {
    title: String
  },
  data: {
    foo: 1,
    input: null,
    t: '嘻嘻嘻想',
    url: 'https://www.taobao.com/favicon.ico',
    picker: ''
  },
  filters: {
    capitalize1: function(value){
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        // el.focus()
      }
    }
  },
  // 一次性将这个日期选择器附加到一个输入框上
  // 它会被挂载到 DOM 上。
  // mounted: function () {
  //   // Pikaday 是一个第三方日期选择器的库
  //   this.picker = new Pikaday({
  //     field: this.$refs.input,
  //     format: 'YYYY-MM-DD'
  //   })
  // },
  // // 在组件被销毁之前，
  // // 也销毁这个日期选择器。
  // beforeDestroy: function () {
  //   // this.picker.destroy()
  // },
  mounted: function () {
    var picker = new Pikaday({
      field: this.$refs.input,
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
})

<div id="app">
  <child-p></child-p>
  <div>{{'hello' | capitalize1 | capitalLast}}</div>
  <input ref="input" v-focus v-model="input" type="date" v-on:click.prevent>{{input}}
  <child-p2 :uu="'ssss'"></child-p2>
  <component :is="'child-p2'" class="tab"></component>

 
  

</div>