Home

Vue.js Cheat Sheets:

Title	Remark/code
Basic Setup	Introduction to Vue.js structure
Attribute Binding	<a v-bind:href="url">link</a> or :href="url"
Dynamic Class Binding	Conditional class application using :class
Computed Properties	Derived values that depend on other data
Methods	Handling actions in Vue with methods
Emitting Custom Events	this.$emit('close') and custom event modifiers
Fetch API Data and Resolve CORS	Handling API requests and dealing with CORS issues
Global File Import	Including files globally via the assets folder
LifeCycle Hooks	beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted
Conditional Rendering	Using v-if, v-else, and v-show to conditionally display elements
List Rendering	Using v-for to render lists of items
Forms & Input Fields	Binding form inputs with v-model
Event Handling	v-on: or @ for event handling such as click, dblclick, mouseover
Props	Passing data from parent to child components
Slots	Reusing component structures via slots
Teleport	Moving content to different places in the DOM using Vue 3 features
Template Refs	Accessing DOM elements using this.$refs
Router Setup	Creating navigation and routing with Vue Router
Router - Redirects & 404	Implementing redirects and 404 pages with Vue Router
Router - Query Params	Accessing and handling query parameters via this.$route.query
Customized Router	Creating your own custom router logic
Watchers	Observing data changes with watch for reactive behavior
Vuex Store	State management in Vue with Vuex
Bootstrap Integration	Adding Bootstrap to your Vue.js project for styling
Chart.js in Vue	Integrating Chart.js with Vue.js for data visualization
Deploying Vue.js App to Github Pages	Instructions for deploying Vue.js apps to GitHub Pages
Vue.js with Axios	Fetching data and handling HTTP requests with Axios
Custom Directives	Creating your own custom directives in Vue.js
Vue 3 Composition API	Understanding and using Vue 3's Composition API
Vue Router Lazy Loading	Implementing lazy loading for route components
Dynamic Imports	Loading components asynchronously with dynamic imports
Error Handling in Vue	How to handle errors globally and locally in Vue.js
Vue CLI Configuration	Customizing and configuring Vue CLI project setups
Custom Validation in Forms	Implementing custom form validation logic in Vue
Multi-Step Forms	Building multi-step forms using Vue.js
Deployment to Production	Best practices for deploying your Vue.js app to a production environment

---

Title	Remark/code
attribute binding	<a v-bind:href="url">link</a> or : = v-bind:
Basic	Basic Structure
Build your Vue.JS App	Open the terminal and execute npm run build and copy folder dist to your server
Computed Properties	filter
Dynamic Class	conditioning give a class
Emitting Custom Events	this.$emit('close') and Event Modifier
Fetch API data and resolve CORS
Global file	in assets folder
LifeCycle Hooks	beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted
Popup Modal
Props	passing value from parent component into child component
Router	Navbar Component Article Component Sidebar Component
Router 2	use default (Vue 3 Preview)
Router - Redirects	Redirects & 404's
Customized Router	Create your own router
$route.query	get query parameter value
Slots	reuse the Modal content structure by passing the template content into component
Teleport	vue3 feature, put your component content to other place
Template Refs	this.$refs.name = document.getElementById("name")
v-conditioning	v-if and v-show
v-for	Outputting Lists
v-model	Forms & Input Fields filter included submit
v-on:EventHandling	v-on: or @　click, dblclick, mouseover, mouseleave, mousemove
Boostrap	Adding bootstrap to Vue CLI project - Stack Overflow
Import Module	need to export it first export default moduleName;
Deploying Vue.js app to Github Pages	use bash to chmod +x deploy.sh
Chart.js in Vue.js app	use chart.js in vue js application
Dictionary List	get dictionary data
watch	Event on route change

• getting Delete 'cr' [prettier/prettier]?

  • solution : Setting the "endOfLine":"auto" in your .prettierrc (or .prettierrc.json) file (inside the object)
  • Or set the following inside the rules object of the eslintrc file.

   'prettier/prettier': [
     'error',
     {
       'endOfLine': 'auto',
     }
   ]

  • Getting 404 error on axios
    • set the <input type="number"> if it is integer

• To disable vue/multi-word-component-names eslint rue in .eslintrc.js
rules:{ 'vue/multi-word-component-names' : 0 }