ULL-ESIT-DMSI-1920 / vue-fundamentals-alu0101227610

Introduction to VUE

To open this project, you can access this github webpage:

https://ull-esit-dmsi-1920.github.io/vue-fundamentals-alu0101227610/

TODOS for the Shopping list app

Follow these steps:

• Write initial HTML with a shopping-list div
• Load and Instanciate Vue add data and Vue template syntax to interpolate
• Add an input an synchronize it with the interpolated text to see it
• Explore the app in the console
• Discuss the syntax of JS inside moustaches
• Learn to read the errors in the console
• Add items to data and show them using v-for
• Add input a variable to store the newItem
• Connect the input with the newItem and check the binding
• Use Vue Devtools. Configure it to work with file://
• Add v-on: Start by simulating in the console what we are going to do
• Add button to add the new item when clicked
• Add v-on:keyup.enter to the input element
• Shorthands for v-on
• Use a method saveItem to factorice
• Reset the input when finished the insertion
• Check the method using the debugger
• v-if and v-else
• Add states: default and edition

Next Steps: Add State to your App

• Add a state variable to the app data to represent the states of the app.
• Move the input and button Save Item elements to a div with class add-item-form so that these styles apply
• Show the div with class add-item-form only if the state is edition
• To the div with class header add a button Add Item that will make the app transit from the default state to the edition state
• Show the add button only if the state is default
• To the div with class header add a button Cancel Adding Item with the class btn-cancel that will make the app transit from the edition state to the default state
• Show the Cancel Adding Item button only if the state is edition
• Add the changeState method that reflect the transitions between both states

v-bind steps

• Using the dev tools, check that when we click the save item with the input empty we are adding new empty strings to the items list
• Disable the button save item when the input is empty by binding the disabled attribute of the button

Dynamic classes with v-bind

• Change the list of items from a list of Strings to a list of Objects with label and purchased attributes. Update the saveItem method and the template accordingly
• Make use of the class .strikeout in the css file: to style the purchased items. See the Vue.js Guide section on Class and Style Bindings
  • Use first the object syntax v-bind:class="{myclass: expression}" and
  • later the array syntax v-bind:class=[exp1, exp2]