Notes of Vue

update at 15-8-2021, review what I know about Vue

Commands of Vue

There are total 12 commands in Vue(More now, but I only know 12)

v-bind

Passing a data to html, we can use v-bind, it can pass the object and array to html:
<div v-bind:class="[activeClass, errorClass]"></div>

v-once

v-once use when the data will never change, This can be used to optimise update performance

v-model

v-text

v-html

v-on

v-if

v-else

v-show

v-for

v-pre

v-clock

Vue const create

const app = Vue.createApp({
    data(){
        return {
            /*data here*/
        }
    },
    methods: {
        /*function here*/
    },
})

or

var app = new Vue({
  el: '#app',
  data: {
      message: 'Hello Vue',
    //for placing data
    //method can place in data, but we normally don't do that
    },
    methods: {
        handleClick: function(){
            alert("Clicked");
    }
}
})

v-on

v-on can replace by @, for example v-on:click="functionName" === @click="functionName"
Used in <div>, for example:

<div id="app">
<button @click="hola">Say Hello</button>
</div>

v-bind

v-bind is used when attribute in vue instance is needed,
When we try to:
<a href={{website}}>some website<a> It won’t work
we need to use v-bind:
<a v-bind:href={{website}}>some website<a>
v-bind can be replaced by :
<a :href={{website}}>some website<a>

v-if, v-else

Just another if-else statement, but there are a notice able use case:

<button @click="function">
    <span v-if="bool">bool is true</span>
    <span v-else>bool is false</span>
</button>

v-for

To show an array of data, we need to use v-for

books:[
    {title: 'name of the wind', author: 'abc'},
    {title: 'name of the fire', author: 'onfire'},
    {title: 'name of the water', author: 'bewater'},
]

<ul>
    <li v-for="book in books">
        <h3>{{book.title}}  -  {{book.author}}</h3>
    </li>
</ul>

v-show