Vue 2.0 Hello World

by Damian Dulisz

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>
    <FetchSomeData :url="url">
      <template #success="{ data, transformedData = transformData(data) }">
        {{ transformedData.products }}
      </template>
    </FetchSomeData>
  </p>
</div>

JavaScript

const TransformData = {
  functional: true,
  props: {
    data: Object,
    transform: Function
  },
  render (h, { props, scopedSlots }) {
    return scopedSlots.default({ data: props.transform(props.data) })
  }
}

new Vue({
  components: { 'transform-data': TransformData },
  el: '#app',
  data: {
    user: {
    	firstName: 'Even',
      lastName: 'Me'
    }
  },
  methods: {
    reverse (text) {
    	return text.split('').reverse().join('')
    },
    join (user) {
    	return user.firstName + ' ' + user.lastName
    },
    passWithId (user) {
      return {
        id: 0,
        ...user
      }
    },
    reverseName (user) {
    	return {
      	...user,
        firstName: this.reverse(user.firstName)
      }
    }
  }
})