5). Vue.js Component and For Loop Example

By -

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>
        <div id="app">
            <MemberList />
        </div>
</template>

<script> 

import MemberList from './components/MemberList' 

export default { 
         name: 'App', 
         components: {  
                   MemberList 
       } 
}
</script>


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