Vue2 Starter

ES6 + Vue.js jsFiddle Starter Template by Christian Gambardella http://gambardella.info/2016/11/03/jsfiddle-starter-for-vue-js/

by zhang li

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.js"></script>
<div id="app"></div>

SCSS

#app {
  margin-bottom: 20px
}

#note {
  max-width: 340px
}

Babel + JSX

Vue.directive('sync', {
  bind (el, { expression, arg }, vnode) {
  	const componentInstance = vnode.componentInstance
    const context = vnode.context

    if (!componentInstance) {
      return
    }
    const $props = componentInstance.$props

    const propName = arg
    const eventName = propName + 'propchange'
    context.$watch(
      expression,
      (newVal, oldVal) => {
        $props[propName] = newVal
      },
      { deep: true, immediate: true }
    )

    componentInstance.$on(eventName, (value) => {
      context[expression] = value
    })
  }
})

Vue.component('inner', {
	template: '<div class="inner">{{name}}<button @click="change">change</button></div>',
  props: ['name'],
  methods: {
  	change: function () {
    		this.$emit('namepropchange', 'from inner')
    }
  }
})

Vue.component('outer', {
	template: '<div class="outer"><inner v-sync:name="outerName"></inner>==={{outerName}}</div>',
  data: function () {
  	return {
    	outerName: Date.now()
    }
  },
  created: function () {
  	setInterval(() => {
    	this.outerName = Date.now()
    }, 1000)
  }
})

new Vue({
  template: '<outer></outer>'
}).$mount('#app')