Knowledge sharing

Basics Mixins are a flexible way to reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options. JS Fiddler here for Basic Mixin var mixin = { data: function ( ) { return { message: 'hello' , foo: 'abc' } } } new Vue({ mixins: [mixin], data: function ( ) { return { message: 'goodbye' , bar: 'def' } }, created: function ( ) { console .log( this .$data) // => { message: "goodbye", foo: "abc", bar: "def" } } }) Option Merging When a mixin and a component contain overlapping options, they are merged as shown in the following example. JS Fiddler here for option Merging Global Mixin You can also apply a mixin globally. Use with caution! Once you apply a mixin globall...

<slot> basically use for element to serve as distribution outlets for content. To allow a parent component to pass DOM elements into a child component, provide a <slot></slot> element inside the child component. You can then populate the elements in that slot. Slots basically used for creating Generic components (button, Card, Modal), layout (App, Header, Footer), Recursive component (Tree, Menu).   For Example JS Fiddler Here We have create one component app-child. And we add slot tag and fixed content which always display. But slot content is dynamically what we give it will display. <div id="app">   <h2>We can use slots to populate content</h2>   <app-child>     <h3>This is slot number one</h3>   </app-child>   <app-child>     <h3>This is slot number two</h3>     <small>I can put more info in, too!</small> ...

VueJS provides various ways to apply transition to the HTML elements when they are added/updated in the DOM. Using Transition tag we do animation in our application.  Here example of Transition . There are various list of classes are available in VueJs. v-enter : Starting state for enter. Added before element is inserted, removed one frame after element is inserted. v-enter-active : Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. v-enter-to : Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes. v-leave : Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame. v-leave-active : Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animat...

Component Basic Information Components makes your code more reusable and your markup more readable. When registering a component, it will always be given a name. The template key is where you write your markup for that component. In the same object you’ll later add more functionalities.  Vue.component('header-component', {         template: '<div>A custom header component!</div>' }) new Vue({      el: '#app' }) You create an instance of your component through adding <header-component></header-component> in the HTML: <div id="app"> <my-component></my-component> </div> Props Props will enable you to pass data into a component instance from the outside of that component. or more correctly, pass the data down from a parent. //My-component is child component Vue.component('my-component', {         props: ['message'], ...

We can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Example 1 :- JS Fiddler Input :-  <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> Multiline :-  <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> Single checkbox, boolean value:- <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> Multiple check boxes , bound to the same Array:- <div id='example-3'> <input type="checkbox" id="jack" valu...

Each Vue instance goes through a series of initialization steps when it’s created It needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks. 1). Creation Creation hooks are the very first hooks that run in your component. They allow you to perform actions before your component has even been added to the DOM.  2). beforeCreate The beforeCreatehook runs at the very initialization of your component. data has not been made reactive, and events have not been set up yet. <script>     export default {         beforeCreate() {             console.log('Nothing gets called before me!')         }     }  </script> 3). created You can access all data and events. 4). Mounting (DOM Inser...

We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. Example 1:- JS fiddle <div id="vue-instance">       Enter your name: <input type="text" v-model="name">      <button v-on:click="sayHello">Hey there!</button> </div> var vm = new Vue({        el: '#vue-instance',        data: {             name: ''        },   methods: {            sayHello: function(){             alert('Hey there, ' + this.name);           }        } }); Example 2:-  Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable: <button v-on:click="warn('Form can...

computed property use to make complex logic put in to computed block. The difference is that computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed . Normal method invocation will always run the function whenever a we call. <template>     <div id="app">       <div class="container">         <button v-on:click="counter++" class="btn btn-success">Increment</button>          <button v-on:click="counter--" class="btn btn-danger">Decrement</button>         <button v-on:click="taskDone" class="btn btn-info">Completed</button>         <hr/>         <p>{{ view }}</p>       </div>    </div> </template> <script>  ex...

For Component create one file as per below path go to src >> components >> memberList.vue file. // MemberList.vue  <template>    <div>      <h1>Members List</h1>      <br/>     <ul>             <li v-for="member in members" :key="member">{{ member }}</li>      </ul>    </div>  </template> <script>  export default {     data () {              return {                    members: ['Ajay ', 'Viral', 'Vimal', "Parth", "Ankit"]           }        } }  </script> ============================ Add below code in in the  App.vue  file. // App.vue  <template>   ...

We are creating a single-page application with Vue + Vue Router. When we add Vue Router, all we need to do is map our components to the routes and  let Vue Router know where to render them. Here's a basic example: HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Vue Router App!</h1> <p> <!-- use router-link component for navigation. --> <!-- specify the link by passing the `to` prop. --> <!-- <router-link> will be rendered as an `<a>` tag by default --> <router-link to="/foo">Home page</router-link> <router-link to="/bar">About Us</router-link> <router-link to="/bar">Contact Us</router-link> </p> <!-- component matched by the route will render here --...

There are different ways to include Vue.js in your web project: Use CDN by including <script> tag in HTML file Install using Node Package Manager (NPM) Use Vue-cli to setup your project Using Vue-cli we need to install Vue-cli. The commend line interface is available as an NPM package. -g command for install CLI globally on your local system $ npm install -g vue-cli Now we are able to initiate a project vue init webpack [ProjectName] After this its ask basic information of about project, like author, Description, router,tests with Night watch, build type etc. Change the directory with the following command: $ cd [ProjectNameDir] Start installing the dependencies by using npm again. $ npm install After having completed the installation of packages you can start the web server in development mode by using npm in the following way. $ npm run dev

There are many ways to install VueJS. Direct <script> Include Simply download and include with a script tag. Vue will be registered as a global variable. Development Version ( With full warnings and debug mode ) & Product Version (Warnings stripped 30.90KB min+gzip) CDN Below Script tag used for vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> You can browse the source of the NPM package at cdn.jsdelivr.net/npm/vue . use the production   version in your published site, replacing vue.js with vue.min.js. This is a smaller build optimized for speed instead of development experience.NPM NPM NPM is the recommended installation method when building large scale applications with Vue. $ npm install vue CLI Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow

VueJS is a progressive JavaScript framework used to develop interactive web interfaces. Focus is more on the view part, which is the front end. Virtual DOM VueJS use of virtual DOM, which is also used by other frameworks same like React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures. Directives VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model, which are used to perform various actions on the frontend. Watchers Watcher takes care of handling any data changes making the code simple and fast. Routing Navigation between pages is performed with the help of vue-router. Lightweight VueJS script is very lightweight and the performance is also very fast.