Basic directive helpers

<div id='app'>
  
  <input v-model='message'>
  <ul>
    <li v-for='item in items' :key='item'>
      
    </li>
  </ul>
</div>
  • mustaches { { message }} can be used only as inner block (not html attributes). Use ternary expression instead if flow. Can not use statement like a=1.
  • For html attributes you have to use <div v-bind:id='dynamicId'></div>. For boolean atributes true will show and false, null, undefined will hide that attribute for example <button v-bind:disabled='isButtonDisabled'>B</button>. Shorthand for v-bind: is :
  • model v-model='message'
  • conditional v-if='seen' directive.
  • in loops v-for='item in items' you need a key (which is uniq) so it keeps track of changes between dom and virtual dom. v-bind:key='item.id' or shorthand :key='item.id'.
  • <span v-once>{ { message }}</span> will render only once even you change data for inside model interpolation { { message }}
  • <span v-html='rawHtml'></span> will output without html encoding
  • events v-on:click='shuffle' or shorthand @click='shuffle'. You can use
  • modifiers like <form v-on:submit.prevent='onSubmit'> which call preventDefault() on triggered event
  • bind specific dom attributes v-bind:title='message'
  • instead <img source='{ {}}'> use <img :src='comment.image'>

Vue instance

var vm = new Vue({
  el: '#example',
  data: {
    asd: 1 // you can access data with `vm.asd`
  },
  // lifecycle hooks created, mounted, updated, destroyed
  created: function() {},
  computed: {
    // getters for computed values like helpers, but result is chaches as long
    // as dependencies are not changed (message is not updated). `Date.now()` is
    // not reactive dependency
    reverseMessage: function() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reverseMessage: function() {}
  }

})

vm.asd // => 1
vm.asd = 2 // reactiveness in action will update data.asd == 2
vm.non_bind = 1 // this was not defined at time of instantiating so no update
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be called when `vm.a` changes
})

Do not use arrow functions since this will not be bound to view instance.

Animations

<transition-group tag='ul name='items'>
</transition-group>
.items-move {
  transition: transform 0.5s ease;
}

Components

Template for component can be referenced with id or written inline. Pass data to components with props, that are ‘attributes’ for components. They are passed with v-bind:name_of_attribute='value_of_attribute'

Vue.component('AppComponent', {
  template: '#componentTemplate',
  props: ['comment']
})
<ul>
  <li is='app-component' v-for='comment in comments' :key='comment'
:comment='comment'></li>
</ul>
<script type='text/x-template' id='componentTemplate'>
  <li>
    
  </li>
</script>

Vue cli

# yarn will install old ~2 version
# yarn global add @vue/cli
npm install -g @vue/cli

vue create my-project

TODO https://blog.codeship.com/vuejs-as-a-frontend-for-rails/ https://gorails.com/series/using-vuejs-with-rails https://mkdev.me/en/posts/rails-5-vue-js-how-to-stop-worrying-and-love-the-frontend

https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

https://vuejs.org/v2/style-guide/ https://github.com/aarondfrancis/vue-model http://quasar-framework.org/ https://www.reddit.com/r/javascript/comments/6v1ki7/weex_vs_framework7_vs_quasar/ https://blog.logrocket.com/an-imperative-guide-to-forms-in-vue-js-7536bfa374e0 https://vuejsdevelopers.com/2017/10/23/vue-js-tree-menu-recursive-components/ https://www.thepolyglotdeveloper.com/2017/11/router-navigate-pages-vuejs-application/ https://www.classandobjects.com/tutorial/using_vue_js_with_rails https://docs.gitlab.com/ee/development/fe_guide/vue.html#testing-vuex https://www.thepolyglotdeveloper.com/2017/11/pass-data-between-routes-vuejs-web-application/ https://github.com/calirojas506/vue-inspector https://engineering.doximity.com/articles/five-traps-to-avoid-while-unit-testing-vue-js https://wyeworks.com/blog/2018/1/16/Testing-Vuejs-in-Rails-with-Webpacker-and-Jest https://alligator.io/vuejs/vue-parceljs/ http://epic-spinners.epicmax.co/#/ https://blog.codeship.com/vuejs-components-with-coffeescript-for-rails/ https://github.com/epicmaxco/vuestic-admin