Easy Steps: Vue

The Progressive Javascript Framework

Vue.js has become an extremely
popular JavaScript framework
..............................................................................................................................................................................................................................
Extensions
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=chrome-ntp-icon

yarn global add @vue/cli

Link for more info --> https://cli.vuejs.org/guide/

Check the version : vue --version

Example :#2 [How to create a New Project]

vue create projectName

vue create hello-world

..................................................................................................................................................................................................................................
Example :#3

..................................................................................................................................................................................................................................
Example :#4

..................................................................................................................................................................................................................................
Example :#5

..................................................................................................................................................................................................................................
Example :#6

..................................................................................................................................................................................................................................
Example :#7 [ props in vue js ]

Child.vue
<template>
<div>
<h2> Child</h2>
<h3>{{name}}</h3>
</div>
</template>
<script>
export default {
name:'Child',
props:['name']
}

</script>
........................................
App.vue
<template>
<div>
<Child name ='Sapan Kumar Das'/>
</div>
</template>

<script>
import Child from "./components/child";
export default {
name: "App",
components: {
Child
}
};
</script>
..............................................................................................................................................................................................................................
Example :#8 [ props in vue js pass some properties using v-bind ]

Child.vue
<template>
<div>
<h2> Child</h2>
<h3>{{name}}</h3>
</div>
</template>
<script>
export default {
name:'Child',
props:['name']
}

</script>
...............................
App.vue

<template>
<div>
<h3>{{title}}</h3>
<Child v-bind:name ='value'/>
</div>
</template>

<script>
import Child from "./components/child";
export default {
name: "App",
components: {
Child
},
data:function(){
return{
value:'Johan Smith'
}
}
};

</script>
............................................................................................................................................................................................................................
Example :#9 [props in vue js pass some properties using v-bind ]

Child.vue
<template>
<div>
<h2> Child</h2>
<ul>
<li v-for=" u in users" :key='u.id'>
{{u.name}}
{{u.email}}
</li>
</ul>
</div>
</template>
<script>
export default {
name:'Child',
props:['users']
}

</script>
........................................
App.vue
<template>
<div>
<h3>{{title}}</h3>
<Child v-bind:users ="users"/>
</div>
</template>

<script>
import Child from "./components/child";
export default {
name: "App",
components: {
Child
},
data:function(){
return{
users:[
{ name:'Sapan', email:'sapan@gmail.com'},
{ name:'johan', email:'johan@gmail.com'
}]
}
}
};
</script>
<style>

Example :#10 [ props child to parent component]

Child.vue
<template>
<div>
<h2>Child Component </h2>
<button v-on:click="updateTitle"> Update Parent Title</button>
</div>
</template>
<script>
export default{
name:'Child',
methods:{
updateTitle(){
this.$emit('changeTitle', 'data update successfully')
}
}
}
</script>
.........................................
App.vue

<template>
<div>
<h3>{{title}}</h3>
<SimpleTodo />
<Child v-on:changeTitle="update($event)" />
</div>
</template>
<script>
import Child from "./components/child";
export default {
name: "App",
components: {
Child,
},
data:function() {
return {
title: "props tutorial"
};
},
methods: {
update(title) {
this.title = title;
}
}
};
</script>
...............................................................................................................................................................................................................................

...............................................................................................................................................................................................................................
Vue Router Basics

Istallation

yarn add vue-router

Step :#1
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
mode:'history',
routes:[
{path:'/' ,component:Home},
{path:'/about' ,component:About},
{ path:'/profile', component:Profile}
]
}
...................

Step :#2

import { router } from './component/router'

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

Example :#1

route.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from './components/About'
import Profile from './components/Profile'

Vue.use(VueRouter)
export const router = new VueRouter({
mode: 'history', // remove extra '/#/
routes: [
{ path: '/', component: About },
{ path: '/profile', component: Profile }
]
})
..........................................
App.vue
<template>
<div>
<h3>Basic Router</h3>
<nav>
<ul>
<li>
<router-link to ='/'>About</router-link>
</li>
<li>
<router-link to ='/profile'>Profile</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
</div>
</template>

<script>
export default {
name: "App"
};
</script>
.........................................
main.js
import Vue from 'vue'
import App from './App.vue'

import store from './store'
Vue.config.productionTip = false

import {router } from './route'

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

Vue vs Vuex

LifeCycle

view components ---> Dispatch ---> Actions ---> commit ---> Mutations ----> mutate ---> State
....................................................................................................................................................................................................................................

Example :#2 [ Basic setup with display data ]
....................................................
Folder Structure

....................................................
components/Todos.vue
<template>
<div class="app">
<h4> Todos</h4>
<ul>
<li v-for="All in allTodos" :key="All.id">{{All.name}}
</li>
</ul>

</div>
</template>

<script>
import { mapGetters} from 'vuex'
export default {
name : 'Todo',
computed: mapGetters(['allTodos'])
}

</script>
....................................................
store/modules.Todos.js
const state ={
Todos :[
{
id:1,
name :'Johan Smith'
},
{
id:2,
name :'Johan Doe'
},
]
};
const getters ={
allTodos : state=>state.Todos
};

export default {
state,
getters,
}
.....................................................
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Todos from './modules/Todos'

Vue.use(Vuex)
export default new Vuex.Store({
modules: {
Todos
}
})
........................................

App.vue

<template>
<Todo />
</template>

<script>
import Todo from "./components/Todo";
export default {
name: "App",
components: {
Todo
}
};

</script>
..............................................
main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
store,
render: h => h(App)
}).$mount('#app')

Happy Coding :)
...............................................................................................................................................................................................................................
Example :#3 [ How to fetch Data using Axios]
install Axios
yarn add axios

.................................................
store\modules\Todo.js
import Axios from 'axios';
const state = {
todos: []
};

const getters = {
AllTodos: (state) => state.todos
};
const mutations = {
setTodos: (state, todos) => (state.todos = todos)
};
const actions = {
async fetchTodos({ commit }) {
const reponse = await Axios.get('https://jsonplaceholder.typicode.com/todos')
console.log(reponse.data)
commit('setTodos', reponse.data)
}
};
export default {
state,
getters,
mutations,
actions

}
.......................................
store\modules\index.js

import Vue from 'vue';
import Vuex from 'vuex';
import Todos from './modules/Todo'

Vue.use(Vuex)
export default new Vuex.Store({
modules:{
Todos
}

})

..............................................
Todos.vue

<template>
<div class="app">
<h3>Todos</h3>
<ul>
<li v-for="AllTodo in AllTodos" :key="AllTodo.id">{{AllTodo.title}}</li>
</ul>
</div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "Todos",
methods: {
...mapActions(["fetchTodos"])
},
computed: mapGetters(["AllTodos"]),
created(){
this.fetchTodos()
}
};
</script>
.......................................
App.vue
<template>
<Todo />
</template>

<script>
import Todo from "./components/Todos";
export default {
name: "App",
components: {
Todo
}
};
</script>

To get started, use the following command.

cd myproject
npm install
npm run dev

...............................................................................................................................................................................................................................
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
</head>
<title>Vue js</title>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id='app'>
<h1>{{msg}}</h1>
</div>

<script>
var myObj = new Vue({
el: '#app',
data: { msg: 'Vue js from scrath' }
})
</script>
</body>
</html>
...........................................................................................................................................................................................................................
v-text

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<title>Vue js</title>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app'>
<h1>{{msg}}</h1>
<p>{{content}}</p>
<p v-text="content"></p>
<button onClick='myFunc()'>Click here</button>
</div>

<script>
var myObj = new Vue({
el: '#app',
data: {
msg: 'Hello world' ,
content:" Vue Content"
}
})
function myFunc() {
myObj.msg = 'Sapan Kumar Das'
}
</script>
</body>
</html>
..........................................................................................................................................................................................................................

..........................................................................................................................................................................................................................

..........................................................................................................................................................................................................................

Vue.js Binding

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<title>Vue js</title>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app'>
<h1>{{msg}}</h1>
<button onClick='myFunc()'>Click here</button>
</div>

<script>
var myObj = new Vue({
el: '#app',
data: { msg: 'Hello world' }
})
function myFunc() {
myObj.msg = 'Sapan Kumar Das'
}
</script>
</body>
</html>

Vue.js Two-Way Binding

The v-model directive binds the value of HTML elements to application data.

This is called two-way binding:

<h2>Vue.js</h2>

<div id='app'>
<h1>{{msg}}</h1>
<input v-model='msg'/>
</div>

<script>
var objMy = new Vue({
el:'#app',
data:{msg:'Hello Vue'}
})
</script>
...................................................................................................................................................................................................................................
Vue.js Loop Binding

<h2>Vue.js</h2>
<div id='app'>
<h1></h1>
<ul>
<li v-for='x in todos'>{{x.text}}</li>
</ul>

</div>

<script>
var myObj =new Vue({
el:'#app',
data:{
todos:[
{text:'Sapan kmar'},
{text:'Johan Doe'}
]
}

})
</script>

....................................................................................................................................................................................................................................
event | how to use click event

<template>

  <div>

    <h2>{{text}}</h2>

    <button v-on:click="hello">About more</button>

    <button v-on:click="sapan">  Sapan</button>

  </div>

</template>

<script>

export default {

  name: "About",

  props: {

    text: String

  },

  methods:{

      hello(){

          console.log('hi...')

      },

      sapan(){

          console.log('bload')

      }

  }

};

</script>

Important URL
https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/vue3-overview/

Easy Steps

Friday, May 24, 2019

Vue

1 comment: