This page documents how different tasks can be done in either Ember.js or Vue.js.

Template

If/Else

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>

Loops

Ember.js Vue.js
<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>

Events

Ember.js Vue.js
<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>

Value binding

Ember.js Vue.js
<input value="{{ inputValue }}" type="text" />
<input v-model="{{ inputValue }}" type="text" />

HTML-Output

Ember.js Vue.js
<div>{{{ htmlContent }}}</div>
<div v-html="htmlContent"></div>

Routing

Content outlet

Ember.js Vue.js (with vue-router )
{{ outlet }}
<router-view></router-view>
Ember.js Vue.js (with vue-router)
{{#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>

JavaScript

Computed properties

Ember.js Vue.js
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';
    }
  }
})

Observers/Watchers

Ember.js Vue.js
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');
    }
  }
})

 

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.