Vue Web App

Developer
Anoop
Size
3,284 Kb
Views
20,240
  1. Vue Web App Previews
  2. Vue Web App HTML Codes
  3. Vue Web App CSS Codes
  4. Vue Web App JS Codes

How do I make an vue web app?

What is a vue web app? How do you make a vue web app? This script and codes were developed by Anoop on 06 September 2022, Tuesday.

Vue Web App Previews
IQ Test

Vue Web App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue Web App</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" id="app"> <div class="jumbotron"> <div class="form-group"> <input type="text" class="form-control" id="inputField" placeholder=""> </div> <button type="submit" class="btn btn-primary" v-on:click="addItem">Add</button> </div> <div class="row"> <div class="card w-100 mb-3" v-for='(item,index) in items'> <div class="card-block"> <h4 class="card-title">{{item.text}}</h4> <p class="card-text">The weight of {{item.text}} is {{item.weight}} kg.</p> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vue Web App - Script Codes CSS Codes

/* Space out content a bit */
body { padding-top: 20px; padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer { padding-right: 15px; padding-left: 15px;
}
/* Custom page header */
.header { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px;
}
/* Custom page footer */
.footer { padding-top: 19px; color: #777; border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) { .container { max-width: 730px; }
}
.container-narrow > hr { margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron { border-bottom: 1px solid #e5e5e5;
}
.marketing p + h4 { margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { /* Remove the padding we set earlier */ .header, .marketing, .footer { padding-right: 0; padding-left: 0; } /* Space out the masthead */ .header { margin-bottom: 30px; } /* Remove the bottom border on the jumbotron for visual effect */ .jumbotron { border-bottom: 0; }
}

Vue Web App - Script Codes JS Codes

var app = new Vue({ el: '#app', data: { title: 'Hello, world!', content :'This is a template for a simple marketing', items: [ {text : 'Rottweiler',weight : '45'}, {text : 'Bulldog',weight : '23'}, {text : 'Beagle',weight : '11'} ] }, filter :{ }, methods:{ addItem : function(){ var inputField = document.getElementById('inputField'); if(inputField.value !== ""){ this.items.push({ text : inputField.value }) } inputField.value = ""; }, deleteItem: function(index){ this.items.splice(index,1); console.log(index) } }
})
Vue Web App - Script Codes
Vue Web App - Script Codes
Home Page Home
Developer Anoop
Username anoopjohn
Uploaded September 06, 2022
Rating 3
Size 3,284 Kb
Views 20,240
Do you need developer help for Vue Web App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anoop (anoopjohn) Script Codes
Name
Pie Chart
Example
Simple jQuery accordion menu
Price Slider
Parallax Effect
Vue App
A Pen by Anoop
Hide select arrow in Firefox
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!