Dojo blog

Note.txt

@@ -0,0 +1,127 @@
+composition api
+===============
+write group logic/function together in a setup() function
+easily create usuable code and can import from other component
+setup() function come before lifecycle hooks and others
+
+setup() function
+================
+inside setup() function, you can define whatever you want and
+must return it as an object to use in template
+let name = 'y2k',age = 20;
+return {name : name , age : age }   / shorthand = return {name , age }
+but name and age in setup() are not reactive value by default like in  data() function
+
+template ref
+============
+this.$ref.name in data() <p ref = "name">name </p>
+
+in setup()
+==========
+import {ref} from 'vue'
+//null is value of ref
+//const p means ref is const but value can be chanage/ reactive
+const  p = ref(null)
+
+<p ref="p">blah blah</p>
+
+to access <p> tag p / p.value
+to add classlist / can use normal js class
+p.value.classList.add('actives')
+
+must return p before use 
+return p ma (p / p.value) ko use lo ya
+
+using ref for reactivity
+========================
+  //yyk is value of ref
+    //(const name) means ref is const but value can be chanage/ reactive
+    const name = ref("yyk");
+    const age = ref(20);
+
+    const handleClick = () => {
+      // to access ref.value in setup(), use refName.value
+      // but to need to use name.value  in template, it auto output {{ value of ref in template }}
+      //can use v-model="ref" for input reactivity
+      name.value = "asdf";
+      age.value = 22;
+    };
+    return { name, age, handleClick };
+  },
+};
+<input type="text" v-model="name" />
+ <p ref="p">name : {{ name }} , age : {{ age }}</p>
+
+ref vs reactive
+=================
+// no need to use ninjaTwo.value.name  like in ref/ just use ninjaTwo.name and can auto acces value directly
+//reactive cannot use with primitive data type (number,string,boolean) like in ref
+    const ninjaTwo = reactive("mario");  => mario is a primitive value in reactive and reactive cannot update mario while ref.value.name can 
+
+ref also work better with external composition function
+they retain their reactivity 
+
+ //using computed
+ =================
+    const filteringName = computed(() => {
+      return names.value.filter((name) => {
+        return name.includes(search.value);
+      });
+    });
+
+watch(watch-parameter,callback func) and watchEffect(callback func) 
+===================================================================
+ const search = ref("");
+    const names = ref(["mario", "uno", "john", "doe", "coopa", "y2k"]);
+    //watch value everytimes they change
+    //need to pass parameter to watch
+    //search is a watched parameter and watch func ran when value of search chaange
+    watch(search, () => {
+      console.log("watch func ran");
+    });
+watchEffect(callback func) 
+=========================
+    //ran initally first
+    //no need to pass parameter to watch / it watch all the value which used inside its function
+    //watch value change inside its function and watcheffect func ran when value of used inside its func changes
+    //search is used in its function and it watch search initially first and run everytimes search change
+    watchEffect(() => {
+      console.log("watch effect func ran" + search.value);
+    });
+
+// to stop watching, assign watch function with a variable and call that function
+const stopWatchEff = watchEffect(() => {
+      console.log("watch effect func ran" + search.value);
+    });
+
+stopWatchEff()
+Props
+=====
+//same as options api,
+//to use props in setup(), need to pass props parameter and
+//access props.propsName
+  props: ["person"],
+  setup(props) {
+    let name = props.person.name;
+    let age = props.person.age;
+    let gender = props.person.gender;
+    console.log(props);
+    return { name, age, gender };
+  },
+
+life cycle hooks in composition api()
+======================================
+    onMounted(() => {
+      console.log("mounted");
+    });
+    onUnmounted(() => {
+      console.log("unmounted");
+    });
+    onUpdated(() => {
+      console.log("updated");
+    });
+
+  composable vue 
+  ==============
+  setup() htae ka kg twy ko composable loat lox ya
+  reusable / useful/ phit

public/index.html

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/App.vue

@@ -1,9 +1,5 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
+  <router-view />
 </template>
 
 <style>
@@ -14,17 +10,4 @@
   text-align: center;
   color: #2c3e50;
 }
-
-nav {
-  padding: 30px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>

src/router/index.js

@@ -1,25 +1,17 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: HomeView
+    path: "/",
+    name: "home",
+    component: HomeView,
   },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
-]
+];
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

src/views/DetailView.vue

@@ -0,0 +1,30 @@
+<template>
+  <h3>Details</h3>
+  <p>
+    name : {{ name }} ,age : {{ age }}, gender : {{ gender }} , bio :
+    {{ bioSnippet }}
+  </p>
+</template>
+
+<script>
+import { computed } from "@vue/runtime-core";
+export default {
+  //same as options api, to use props in setup() need to pass props parameter and
+  //access props.propsName
+  props: ["person"],
+  setup(props) {
+    let name = props.person.name;
+    let age = props.person.age;
+    let gender = props.person.gender;
+    let bioSnippet = computed(() => {
+      //get 0 from 10 letter of bio
+      return props.person.bio.substring(0, 10) + "....";
+    });
+    console.log(props);
+    return { name, age, gender, bioSnippet };
+  },
+};
+</script>
+
+<style>
+</style>

src/views/HomeView.vue

@@ -1,18 +1,52 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h3>LifeCycle hooks</h3>
+    <div v-if="showPerson">
+      <div v-for="person in persons" :key="person.name">
+        <detail-view :person="person"></detail-view>
+      </div>
+    </div>
+    <button v-on:click="showPerson = !showPerson">Toggle Persons</button>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+import { ref } from "@vue/reactivity";
+import DetailView from "./DetailView.vue";
+import { onMounted, onUnmounted, onUpdated } from "@vue/runtime-core";
 export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
+  name: "HomeView",
+  components: { DetailView },
+
+  setup() {
+    const persons = ref([
+      {
+        name: "joe",
+        age: 22,
+        gender: "male",
+        bio: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste sequi numquam ea molestiae cupiditate id facilis sint nisi natus tempore! Esse repudiandae fuga doloremque in numquam cum iure minus labore?",
+      },
+      { name: "doe", age: 23, gender: "male", bio: "lorem" },
+      { name: "fee", age: 21, gender: "female", bio: "ispam" },
+    ]);
+
+    //life cycle hooks in composition api()
+    onMounted(() => {
+      console.log("mounted");
+    });
+    onUnmounted(() => {
+      console.log("unmounted");
+    });
+    onUpdated(() => {
+      console.log("updated");
+    });
+
+    const showPerson = ref(true);
+    return { persons, showPerson };
+  },
+  //life cycle hook in option api
+  mounted() {},
+  updated() {},
+  unmounted() {},
+};
 </script>