Learning Vue

Some notes taken while learning vue.

to start using vue can include this file.

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

Vue object

  • el: “#id – define the element
  • data – define data
  • methods – define method/functions

Vue Directives

  • v-bind – can bind to any attribute in element. e.g. class, title, type, style, href
    • v-bind is use to control the html element attribute where “moustache {{ }}” cannot be used
    • example¬†<div v-bind:class=“{ active: isActive }”></div>
  • v-if=”status”
  • v-for=“item in items” – normally use with <li> elements
  • v-on – example <button v-on:click=”callAFunction”>click me</button>
  • v-model (2 way data binding). example¬†<input v-model=“message”>. message can be displayed as {{ message }} and can be data inside vue script
  • guide/tutorial on directive
  • full list of directives

Vue Components

Vue.component (‘name’, {

})

  • first argument – name of the component
  • props
  • template

API reference

vue cheat sheet

 

Leave a Reply

Your email address will not be published. Required fields are marked *