3). Vue JS Starting Example program

By -

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

Comments

Post a Comment

Popular posts from this blog

Angular 4 interview questions and answers for experience

By -
Angular.io is official good resource to lean Angular. And For Angular 2-4 you can used this one of best i have see  here https://www.tutorialspoint.com/angularjs/ is a good platform for learning the basics of AngularJS. You can download the pdf file for every tutorials that are available in it. What is AngularJS 2/4? - Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop -created by google development team. What is the difference between Angular 1(AngularJS) and Angular 2/4? -Angular 2/4 is complete re-created of Angular 1.In other word,it was completely rewritten from the ground-up. -Angular 1(AngularJS) is controller and $scope based and Angular 2/4 is based on an architecture of component hiera...
Read more

8). Vue.js Methods and Event Handling

By -
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...
Read more

12). Vue JS - Slots

By -
<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> ...
Read more