Estudiante: Laura Manzini - alu0101531700@ull.edu.es
This repository is a template for you to follow the course Vue.js Fundamentals.
This Vue.js course Vue School will teach you and get you up and running with the basics concepts of Vue.js.
You can find this free course by Vue School at vueschool.io. The course is suitable for developers who do not yet know about Vue.js or are just getting started with Vue.
See also Annotated Reading of the Essentials Section of the Vue.js Guide
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 a conditional message when the list is empty
-
Add a
state
variable to the appdata
to represent the states of the app.There will be two states: default and edition. The views on each state will be different
State edition corresponds to when the user is adding/editing a new item: there will be an input form to input the item, buttons to cancel the edition, to save the item, etc.
State default corresponds to when the user is the initial state. There will be a button to add a new item
-
Move the
input
andbutton
Save Item elements to adiv
with classadd-item-form
so that these styles apply.add-item-form, .header { display: flex; align-items: center; justify-content: space-between; } .add-item-form input { width: 70%; border-radius: 3px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10); border: 1px solid #F1F5F8; color: #606F7B; padding: .5rem .75rem; box-sizing: border-box; font-size: 1rem; letter-spacing: .5px; margin: .5rem 0; }
-
Show the
div
with classadd-item-form
only if the state isedition
-
To the div with class
header
add a buttonAdd Item
that will make the app transit from thedefault
state to theedition
state -
Show the
add button
only if the state isdefault
-
To the div with class
header
add a buttonCancel Adding Item
with the classbtn-cancel
that will make the app transit from theedition
state to thedefault
state -
Show the
Cancel Adding Item
button only if the state isedition
-
Add the
changeState
method that reflect the transitions between both states
-
Using the dev tools, check that when we click the
save item
with theinput
empty we are adding new empty strings to theitems
list -
Disable the button
save item
when theinput
is empty by binding thedisabled
attribute of the buttonThe
disabled
attribute is a boolean attribute. A disabled button is unusable and un-clickable.The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.)
-
Change the list of items from a list of Strings to a list of Objects with
label
andpurchased
attributes. Update thesaveItem
method and the template accordingly -
Make use of the class
.strikeout
in the css file:.strikeout { text-decoration: line-through; color: #B8C2CC; } .strikeout:hover { color: #8795A1; }
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]
- Use first the object syntax
- Introduction to two-way data binding
- Template syntax and expressions
- Vue directives, loops and conditional rendering
- Vue Devtools
- Handling user Inputs
- Handling Events
- Vue.js Methods and Computed Properties
- Attribute Bindings and dynamic classes
- Components
For more details on the introduction to Vue please follow this repository.