Vue Basics Recap

CDN

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

Mount Vue to HTML Element

const app = Vue.createApp({ 
  //data, functions, component template  
})

app.mount('#app')

Provide App Data

const app = Vue.createApp({
  data() { 
    return {
      data-property: value
    } 
  } 
})

<p> {{ data-property }} </p>

Register Event Listener: methods, v-on and @

const app = Vue.createApp({
  methods: { 
    foo() { this.data-property = 'new value' },
    bar(arg) { ...} 
  }
})

<button v-on:click="javascript-code">...</button>
<button @:click="javascript-code">...</button>
<button @click=foo>...</button>
<button @click=bar('x')>...</button>

<div class="box" @mouseleave="handleEvent>...</div>
<div class="box" @mouseover="handleEvent($event, 5)">...</div>
<div class="box" @dblclick="handleEvent(5)">...</div>
<div class="box" @mousemove="handleEvent">...</div>

Vuew Conditional Directives :  v-if, v-else-if, v-else, and v-show

<div v-if="bool-expr"> </div>
<div v-else-if="bool-expr"> </div>
<div v-else> </div>

<div v-show="bool_expr"> </div>

Vue Iterator Directive: v-for

<ul> 
  <li v-for="elm in iterable"> 
    ...
  </li> 
</ul>

Vue Attribute Binding: v-bind and :

<a v-bind:href="url">...</a>
<a :href="url">...</a>

Vue Dynamic Classes: v-bind and :

<li v-bind:class="{css-class: bool-expr}"> ... </li>
<li :class="{css-class: bool-expr}"> ... </li>

Vue Computed Properties: computed

const app = Vue.createApp({
  computed: { 
    foo() { 
      ...
    }
  }
})


<div v-if="foo" >
  ..
</div>

© 2022, Eric.