plang:vuej3:v3howto [Calax.com

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
Much of this is taken from https://www.vuemastery.com/courses/intro-to-vue-3/

===== Handy Terms ===== 
|Term|Shorthand|Use|Example|
|v-bind| **:** | Dynamically binds an html attribute to an expression|v-bind:src="image" where image is a data item or {{}}|
|v-if| //N/A// | Adds or removes an element from the DOM (slower)|v-if="inStock" would show if the data item "instock" was a boolean true. Can also be used for logic e.g. v-if="inventory > 10" |
|v-else|// N/A// | v-else is used if next to the v-if element for the not matched options. Not always needed.|v-else (doesn't need anything else) |
|v-else-if| //N/A// | v-else-f is used for the next logical condition, e.g. if-1 : > 100, if-2 <100 and > 10 etc. Not always needed.|v-else-if="a < 100 && a > 10" |
|v-show| //N/A// | Changes the visibility in the DOM, element remains |v-show="inStock" acts as v-if above. On false it adds a display:none to the style |
|v-for| //N/A// | Loops through lists, objects etc| v-for="element in elementlist" and then in then list, element.property etc.Often used with **key** attribute to give list a unique ID |
|v-on:<event>| **@** |Allow you to attach an event listener to an element| v-on:click="js expression". This can be a VueJS method e.g. v-on:click="addToCart" |

===== Structure =====
  * Don't forget to include the core vue library in your header

  * [[.:v3howto:step1|Step 1 - create the base app]]
  * [[.:v3howto:step2|Step 2 - binding attributes]]
  * [[.:v3howto:step3|Step 3 - conditional rendering]]
  * [[.:v3howto:step4|Step 4 - Event Handling]]
  * [[.:v3howto:step5|Step 5 - Style Binding ]]
  * [[.:v3howto:step6|Step 6 - Computed Properties]]
  * [[.:v3howto:step7|Step 7 - Components & Properties]]
  * [[.:v3howto:step8|Step 8 - Communicating Events]]  
  * [[.:v3howto:step9|Step 9 - Forms & V-Model]]