Ember.js <> Vue.js

<div>{{if isTrue 'truthy' 'falsy'}}</div>

<div>{{ isTrue ? 'truthy' : 'falsy' }}</div>

{{#if isTrue}}
  <div>truthy</div>
{{else}}
  <div>falsy</div>
{{/if}}

<div v-if="isTrue">truthy</div>
<div v-else>falsy</div>

<ul>
  {{#each items as | item |}}
    <li>{{ item }}</li>
  {{/each}}
</ul>

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

<ul>
  {{#each items as | item index |}}
    <li>{{ index }}</li>
  {{/each}}
</ul>

<ul>
  <li v-for="(item, index) in items">{{ item }}</li>
</ul>

<ul>
  {{#each items as | item |}}
    <li>{{ item }}</li>
  {{else}}
    <li>There are no items to display</li>
  {{/each}}
</ul>

<ul>
  <li v-if="!items.length">There are no items to display</li>
  <li v-else v-for="item in items">{{ item }}</li>
</ul>

<button onclick={{action "myAction"}}>Submit</button>
<!-- or if click -->
<button {{action "myAction}}>Submit</button>

<button v-on:click="myAction">Submit</button>
<!-- or short notation -->
<button @click=myAction">Submit</button>

<input value="{{ inputValue }}" type="text" />

<input v-model="{{ inputValue }}" type="text" />

<div>{{{ htmlContent }}}</div>

<div v-html="htmlContent"></div>

{{ outlet }}

<router-view></router-view>

{{#link-to "user.edit"}}Edit user{{/link-to}}

<router-link tag="a" to="/user/edit">Edit user</router-link>

<!-- With url parameter -->
{{#link-to "user.edit" 1}}Edit user{{/link-to}}

<!-- With url parameter and named routes -->
<router-link tag="a" :to="{ name: 'userEdit', params: { id: 1 }}">Edit user</router-link>

<!-- With query parameter -->
{{#link-to "user.edit" (query-params language="en")}}Edit user{{/link-to}}

<!-- With query parameter -->
<router-link tag="a" :to="{ route: '/user/edit', query: { language: 'en' }}">Edit user</router-link>

Ember.component.extend({ // Can be any type
  computedProperty: Ember.computed('observedProperty', function() {
    return this.get('observedProperty') === 'truthy';
  })
})

new Vue({
  computed: {
    computedProperty() {
      // Note, that you don't need to define the to be observed property.
      // Vue does this automatically.
      return this.observedProperty === 'truthy';
    }
  }
})

Ember.component.extend({ // Can be any type
  observedPropery: 'falsy',
  observer: Ember.observer('observedProperty', function() {
    alert('change');
  });
});

new Vue({
  data: { // Note: method on component
    observedProperty: 'falsy'
  },
  watch: {
    observedProperty(newValue) { // Note: must have same name as data property
      alert('change');
    }
  }
})