Item: Vue Component testing
Rating: 3.4
Author: -Infamous

0 Downloads
6 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

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

<head>
  <meta charset="UTF-8">
  <title>Vue Component testing</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
  <!--<navigation></navigation>-->
  <div class="container-fluid nav-background">
    <div class="container main-navbar">
      <div class="col-xs-6 logo-contain">
        <div class="nav-logo">LOGO</div>
      </div>
      <div class="col-xs-6 nav-contain">
        <ul class="nav-list">
          <li class="nav-link"><a href="#" v-on:click=" currentView = 'landing' ">Home</a></li>
          <li class="nav-link"><a href="#" v-on:click=" currentView = 'about' ">About</a></li>
          <li class="nav-link"><a href="#" v-on:click=" currentView = 'contact' ">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  <component v-bind:is="currentView"></component>
  <bottom></bottom>
</div>

<!--<template id="navigation">
  <div class="container-fluid nav-background">
  <div class="container main-navbar">
    <div class="col-xs-6 logo-contain">
      <div class="nav-logo">LOGO</div>
    </div>
    <div class="col-xs-6 nav-contain">
      <ul class="nav-list">
        <li class="nav-link"><a href="#" v-on:click=" currentView = landing ">Home</a></li>
        <li class="nav-link"><a href="#" v-on:click=" currentView = about ">About</a></li>
        <li class="nav-link"><a href="#" v-on:click=" currentView = contact ">Contact</a></li>
      </ul>
    </div>    
  </div>
</div>
</template>-->

<template id="landing">
    <div class="container-fluid">
    <div class="col-xs-12 landing-wrap">
      <div class="col-xs-6 landing-welcome"><h2>Welcome to the landing page</h2></div>
    </div>
  </div>
</template>

<template id="about">
    <div class="container-fluid">
    <div class="col-xs-12 about-wrap">
      <div class="col-xs-6 about-welcome">
        <h2>Welcome to the about page</h2></div>
    </div>
  </div>
</template>

<template id="contact">
    <div class="container-fluid">
    <div class="col-xs-12 contact-wrap">
      <div class="col-xs-6 contact-welcome">
        <h2>Welcome to the contact page</h2></div>
    </div>
  </div>
</template>

<template id="footer">
  <div class="container-fluid">
    <div class="col-xs-12 footer-wrap">
      <div class="col-xs-6 footer-welcome"><h2>Welcome to the footer</h2></div>
    </div>
  </div>
</template>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/-Infamous/vue-component-testing-JrWLLo */
/*navigation*/
.nav-background {
  background-color: lightgrey;
}

.main-navbar {
  height: 30px;
}

.logo-contain {
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-list {
  float: right;
  height: 100%;
}

.nav-link {
  display: inline;
  padding-left: 10px;
  padding-right: 10px;
}

/*landing*/
.landing-wrap {
  height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-welcome {
  height: 50%;
  background-color: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*about*/
.about-wrap {
  height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-welcome {
  height: 50%;
  background-color: darkgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*contact*/
.contact-wrap {
  height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-welcome {
  height: 50%;
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*footer*/
.footer-wrap {
  height: 100px;
  background-color: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-welcome {
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/*Downloaded from https://www.codeseek.co/-Infamous/vue-component-testing-JrWLLo */
//Vue.component("navigation", {
//  template: "#navigation"
//});

Vue.component("landing", {
  template: "#landing"
});

Vue.component("about", {
  template: "#about"
});

Vue.component("contact", {
  template: "#contact"
});

Vue.component("bottom", {
  template: "#footer"
});

new Vue({
  el: "#app",
  data: {
    currentView: "landing"
  }
});

Comments

More from -Infamous

Vue Component testing

In this example below you will see how to do a Vue Component testing with some HTML / CSS and Javascript

Technologies

Comments

More from -Infamous

A Pen by Greg J Bales

A Pen by Greg J Bales

A Pen by Greg J Bales

get a string after a specific character js

You Might Also Like

Menu using loop

ANIMATED SMILEY

A Pen by Hirad Azar

Hover zoom effect

JSON → CSS evaluator

Time Line

Background image on image hover over

hexagons puzzle