Please enable JavaScript.

Coggle requires JavaScript to display documents.

Basic1 - Coggle Diagram

- - - - Bad performance
        
        To solve this:
        
        use <p>{{ name + ' ' + lastName }}</p>
        
        use "computed property"
  - - - use it like a data property
        
        <p>{{ fullname }}</p>
      - only recalculate if the dependencies change (this.name and this.lastName here)
  - - - e.g. when you want to change some other property when a property changes
        
        watch: { counter(value) { if (value > 50) {this.points++ ;} } }
- - - - Only recalculate if one of dependent properties is change
        
        Use for data that depends on other data
  - - - Allow you to run any code in reaction to some changed data (e.g. send HTTP request etc. )
        
        Use for any non-data update you want to make
  - - - Data binding: Method is recalculated among every re-render cycle
        
        Use for events or data that really needs to re-evaluated all the time
- - - - mount vue instance with css selector
      - only have effect inside #my-app
  - - - {{ }} => only valid inside opening and closing tag
        
        bind attribute with "v-bind"
        
        e.g <a v-bind:href="vueLink">
        
        simpler way: :href="vueLink"
        
        :value="..."
        
        {{ //js expression inside }}
        
        v-html
        
        <p v-html="article"></p>
        where article is html text. For example, article equals "<p>hello world</p>"
      - declarative approach
- - - - e.g click, mouseenter, mouseleave...
    - - vue finds all the places that counter is used and then update it
      - Bad
        
        put LOGIC inside METHODS
        
        v-on:click="add" or v-on:click="add()"
        
        pass parameter into method:
        v-on:click="add(5)"
    - - access event object only
        
        <input v-on:input="setName"
        
        setName(event) { this.name = event.target.value; }
      - access both event object and argument
        
        <input v-on:input="setName($event, "Peng")"
        
        access built-in event with $event
        
        setName(event, lastName) { this.name = event.target.value + ' ' + lastName; }
  - - - To prevent default behavior of the browser
        
        equivalent to
        
        <form v-on:submit="submitForm">
        
        submitForm(event) { event.preventDefault(); }
    - - left key of mouse
    - - all keys up
      - v-on:keyup.enter, v-on:keyup.ctrl ... // specific key is up
- - - - better
  - - - object
        
        :class="{center: true, btn: true, active: false }"
        
        use both class & :class
        
        class="center btn" :class="{active: isClicked}"
      - string
        
        :class="'center btn active'"
    - - use computed property to bind to class
        
        computed: { boxAClasses() { return {active: this.boxASelected } }} // add dependent property to form a more complex logic
        
        :class="boxAClasses"
      - Array Syntax
        
        :class="['demo, {active: isBoxASeleted}, objectA']"
        
        strings or objects can go inside the array
- - - - use "this" to have access to "data"
      - <p>{{ greet() }}</p>
- - - - <input v-bind:value="name" v-on:input="setName">
        
        setName(event) { this.name = event.target.value; }