Download as ODP, PPTX
![Parent to child communication ● We pass props to communicate between parent and child components. ● <parent-component> <child-compoent v-bind:value = value></child-component> </parent-component> ● The “value” is the data that is present in the parent- component. ● In child, under script, we have props: [‘value’] - (this.value prints the value of the data)](https://image.slidesharecdn.com/basics-vuejs-190520130942/75/Basics-of-VueJS-10-2048.jpg)
![Conditional Rendering ● v-show - Another option for conditionally displaying an element. Same like v-if. – But it will always be rendered and remain in the DOM. – It toggles the display CSS property of the element. – For eg, <div v-show = ‘isActive’></div> ● v-for – same like for-loop. Used to render a list of items based on an array. – <div v-for = (item, index) in items> items[{{ index }}] – {{ item }} </div> – No. of times it iterates – (values.length-1)](https://image.slidesharecdn.com/basics-vuejs-190520130942/75/Basics-of-VueJS-15-2048.jpg)
Uploaded bySquash Apps Pvt Ltd
Basics of VueJS
VueJs is a front-end framework for building JavaScript applications that run in the browser. It allows creation of components, two-way data binding, communication between components, and conditional rendering. To install Vue, use npm to install vue-cli and initialize a project, which will create the initial project structure including a component template with sections for template, script, and style. Components can then be built with data, methods, and bindings for properties like classes and styles.
In this document
Powered by AI
Overview of VueJs, a lean front-end framework (16KB) for building JavaScript-driven web applications.
Installation of vue-cli, project structure setup, and creating a Vue project using npm commands.
Steps to create a Vue component (.vue file) and structuring data and methods within a component.
Methods for communication among components: parent-child, child-parent, and sibling components using event emitters.
Introduction to creating reusable components within VueJs for better code modularity.
Use of v-if, v-show, and v-for directives for rendering elements conditionally and iterating over data.
Dynamic binding of classes and styles in VueJs to modify element appearance based on conditions.
Overview of lifecycle hooks, keyboard events, computed properties, and Vuex store management.
Links to installation guides, tutorial videos, and Vuetify for further learning about VueJs.
Basics of VueJS
- 1. Basics of VueJs Doneby: Abaya Rajashree A Software Engineer
- 2. What is VueJs? ●A front-end framework ● Create javascript drive web applications ● Runs in the browser ● Very lean(16KB) ● Very high run-time performance
- 3. Synopsis: ● Installation ofvue-cli ● Structure of a vue-project. ● Component Creation and usage. ● Data and Methods ● Data Binding ● Communication between components. ● Reusable components ● Conditional Rendering ● Class and style binding
- 4. How to installvue? ● npm install -g vue-cli (or) <script src=”https://unpkg.com/vue”></script> ● vue init webpack my-project - Replace "my-project" with your project name. ● cd my-project ● npm install ● npm run dev And... that is it. Your vue-project is created!
- 5.
- 6.
- 7. Component Creation ● Createa component with some name with .vue extension. ● Then, type scaffold to get a vue-file structure. ● That is it, you can type your code. <template> // should have a parent div </template> <script> // data, methods, life-cycle hooks </script> <style> // styles needed(it can be scoped) </style>
- 8. Data and methods ●Data and methods should be given under script. ● For example, see the code. <template> <h1> {{ name }} // John </h1> </template> <script> export default: { name: ‘component-name’, data(){ return { name: ‘John’ } }, methods:{ printName(){ // print name (this.name) } } } </script>
- 9.
- 10. Parent to childcommunication ● We pass props to communicate between parent and child components. ● <parent-component> <child-compoent v-bind:value = value></child-component> </parent-component> ● The “value” is the data that is present in the parent- component. ● In child, under script, we have props: [‘value’] - (this.value prints the value of the data)
- 11. Child to parentcommunication ● We will be emitting values from child to parent using “this.$emit(‘eventName’, {parameters})” ● Here parameters is optional. ● In child, it emits like this.$emit(‘changeName’). ● <parent-component> <child-compoent @changeName = // doSomething> </child-component> </parent-component>
- 12. Child to Childcommunication ● Child 1-> Parent -> Child 2 is not an efficient way. ● Here we use a different way of emitting by using ‘Event- bus’.
- 13. How to reusea component?
- 14. Conditional Rendering ● v-if- conditionally render a block. – The block will only be rendered if the directive’s expression returns a truthy value. – For example, <div v-if = ‘isActive’> </div> // isActive = true <div v-else> </div> // isActive = false
- 15. Conditional Rendering ● v-show- Another option for conditionally displaying an element. Same like v-if. – But it will always be rendered and remain in the DOM. – It toggles the display CSS property of the element. – For eg, <div v-show = ‘isActive’></div> ● v-for – same like for-loop. Used to render a list of items based on an array. – <div v-for = (item, index) in items> items[{{ index }}] – {{ item }} </div> – No. of times it iterates – (values.length-1)
- 16. Binding classes ● Wecan dynamically add or remove a class to a div or a element using v-bind:class. ● For example, – <div :class = {‘fontColor’ : isActive}></div> – Here the class fontColor will be applied only if isActive returns a truthy value.
- 17. Binding styles ● Wecan dynamically apply style by binding it. ● Eg: – <div :style="{visibility: visible ? 'visible' : 'hidden'}"> </div> – If visible is a truthy value, then visibility: visible else, visibility: hidden
- 18. Other concepts ● Lifecycle hooks ● Keyboard Events - @click, @keydown, @keyup etc. ● Computed properties etc ● Vuex store – Mutations – Actions – mapGetters, mapActions, mapState etc.
- 19. Reference Links ● Installationsteps. https://medium.com/tutorialsxl/vue-js-with-visual-studio-code-getting ● VueJs tutorial videos https://www.youtube.com/watch?v=5LYrN_cAJoA ● Vuetify https://vuetifyjs.com/en/getting-started/quick-start