Useful Vue patterns, techniques, tips and tricks
🎉
1. Component Declaration
2. Component Communication
5. Dynamic Component
4. Component Conditional Rendering
3. Component Events Handling
6. Functional Component
7. Renderless Component
AGENDA
1. Component Declartion
1. Global Component (String Template)
🔔 Notes
1. global components will be defined using Vue.component
followed by new Vue({ el: '#container' }) to target a container element in the body of every page.
2. work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views
3. In more complex projects, however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent
1. Global definitions: force unique names for every component.
2. String templates: lack syntax highlighting and require ugly
slashes for multiline HTML
👎 Disadvantages:
3. No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
4. No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel
👎 Disadvantages:
1. If the file requires a global variable, how do you know what it is? 🧐 function/object/class.
5. Globals Make It Harder To Refactor Code Module bundlers are very popular nowadays, Modules make it easier to organize our code into separate files. This makes our code not only more DRY, but easier to refactor
2. it may have been OVERWRITTERN.
2.1 Global Component (Before Render Function)
- React createElemen() method
2.2 Global Component (Render Function)
3. Global Component (JSX)
4. Single File Component (Most-Common)
What About the Separation of Concerns ?
What About the Separation of Concerns ?
1. the separation of concerns is not equal to the separation of file types.
2. instead of dividing the codebase into three huge layers, it makes much more sense to divide them into the component.
3. collocating them actually makes the component more cohesive and maintainable.
4. you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files
5. React Class Component
5. Vue Class Component
1. Component Declaration
2. Component Communication
5. Dynamic Component
4. Component Conditional Rendering
3. Component Events Handling
6. Functional Component
7. Renderless Component
AGENDA
2. Component Communication
Props and Events
1. vue components follow one-way data flow
Events up
Props down
2. props are a reactive data source
3. Child Components can only emit events to their direct parent (unlike previous gif)
Props and Events
Props and Events
4. There is something called Event-Bus which is a global vue instance helps to share props between components without referring to parent-component
Props and Events
Props and Events
1. Component Declaration
2. Component Communication
5. Dynamic Component
4. Component Conditional Rendering
3. Component Events Handling
6. Functional Component
7. Renderless Component
AGENDA
3. Component Event Handling
1. Listening to Events
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered
2. Method Event Handlers
The logic for many event handlers will be more complex though, That’s why v-on can also accept the name of a method you’d like to call.
3. Method in Inline Handlers
Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement
1. Component Declaration
2. Component Communication
5. Dynamic Component
4. Component Conditional Rendering
3. Component Events Handling
6. Functional Component
7. Renderless Component
AGENDA
4. Component Conditional Rendering
1. Directives (v-if, v-else and v-else-if)
1. Directives (v-show)
2. Render Function or JSX
If you use render functions or JSX in your vue application, you can apply all the techniques,
1. if-else
2. switch-case
3. Ternary operator
4. Logical operators
2.1 JSX (If-Else)
2.2 JSX (Switch-Case)
2.3 JSX (Object-Map)
2.4 JSX (Ternary-Operator)
2.5 JSX (Logical-Operator)
1. Component Declaration
2. Component Communication
5. Dynamic Component
4. Component Conditional Rendering
3. Component Events Handling
6. Functional Component
7. Renderless Component
AGENDA
5. Dynamic Component
Swappable Dynamic Components
1. It just takes a string (or component definition) :is as a prop.
2. Vue then looks up the component referenced by that string and renders it in place of the <component> tag
1. with the previous code example, the rendered component will be destroyed if a different component is rendered in <component>
🔔 Notes
2. If you want components to keep their instances without being destroyed, you should wrap the <component> tag in a <keep-alive> tag
1. Component Declaration
2. Component Communication
5. Dynamic Component
4. Component Conditional Rendering
3. Component Events Handling
6. Functional Component
7. Renderless Component
AGENDA
6. Functional Component
Stateless Functional Component
1. A functional component is a special-SFC, with no-script-tag
2. It only accepts props in order to display data.
3. To make your component as a functional one, you should add functional attribute to template tag
✔ Advantages
1. Faster rendering
2. Lighter memory usage
1. Component Declaration
2. Component Communication
5. Dynamic Component
4. Component Conditional Rendering
3. Component Events Handling
6. Functional Component
7. Renderless Component
AGENDA
7. Renderless Component
Renderless Component
1. A renderless component is basically a component that does not render any HTML to the DOM
2. A renderless component makes use of the Slots API in order to achieve what we want.
🔔 The only job of Renderless.vue is to provide the prop name
✔ Advantages
1. Seperate our logic from our markup
