Vue.js Examples
This chapter introduces several Vue.js examples. Through practicing with these examples, you can reinforce the knowledge you've learned.
Navigation Menu Example
Navigation Menu
Create a simple navigation menu:
<div id="main">
<!--The active menu style is the `active` class.-->
<!--To prevent the link from jumping when clicked, we use the "prevent" modifier (short for preventDefault).-->
<nav v-bind:class="active" v-on:click.prevent>
<!--When a link on the menu is clicked, we call the `makeActive` method, which is created in the Vue instance.-->
<a href="#" class="home" v-on:click="makeActive('home')">Home</a>
<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
<a href="#" class="services" v-on:click="makeActive('services')">Services</a>
<a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
</nav>
<!--The `active` variable below will automatically change according to the currently selected value.-->
<p>You selected<b>{{active}} menu</b></p>
</div>
<script>// Create a new Vue instance
var demo = new Vue({
// DOM element, mount view model
el: '#main',
// Define properties and set initial values
data: {
active: 'home'
},
// Function used when clicking the menu
methods: {
makeActive: function(item){
// When the model changes, the view automatically updates
this.active = item;
}
}
});</script>
Try it »
Text Editing Example
Text Editing
Click the specified text to edit the content:
<!--`v-cloak` hides un-compiled variables until the Vue instance is ready.-->
<!--After the element is clicked, the `hideTooltp()` method is called.-->
<div id="main" v-cloak v-on:click="hideTooltip">
<!--This is a tooltip
`v-on:click.stop` is a click event handler, the `stop` modifier is used to prevent event propagation
`v-if` is used to check whether `show_tooltip` is true; only then is it displayed-->
<div class="tooltip" v-on:click.stop v-if="show_tooltip">
<!--`v-model` binds the content of the text area
When the content of the text area changes, the corresponding variable also changes in real time-->
<input type="text" v-model="text_content" />
</div>
<!--After clicking, the "toggleTooltip" method is called and event propagation is prevented.-->
<!--The `text_content` variable changes according to the content of the text area.-->
<p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script>var demo = new Vue({
el: '#main',
data: {
show_tooltip: false,
text_content: 'Click me and edit the content.'
},
methods: {
hideTooltip: function(){
// When the model changes, the view automatically updates
this.show_tooltip = false;
},
toggleTooltip: function(){
this.show_tooltip = !this.show_tooltip;
}
}
})</script>
Try it »
Order List Example
Order List
Create an order list and calculate the total price:
<form id="main" v-cloak>
<h1>Services</h1>
<ul>
<!--Loop through the `services` array, and set the style after an option is clicked.-->
<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
<!--Display the service name and price in the order
Vue.js defines a currency filter for formatting the price-->
{{service.name}} <span>{{service.price | currency}}</span>
</li>
</ul>
<div class="total">
<!--Calculate the price of all services and format the currency.-->
Total: <span>{{total() | currency}}</span>
</div>
</form>
<script>// Custom filter "currency"
Vue.filter('currency', function (value) {
return '$' + value.toFixed(2);
});
var demo = new Vue({
el: '#main',
data: {
// Define model properties
// The view will loop through and output the data in the array
services: [
{
name: 'Web Development',
price: 300,
active:true
},{
name: 'Design',
price: 400,
active:false
},{
name: 'Integration',
price: 250,
active:false
},{
name: 'Training',
price: 220,
active:false
}
]
},
methods: {
toggleActive: function(s){
s.active = !s.active;
},
total: function(){
var total = 0;
this.services.forEach(function(s){
if (s.active){
total+= s.price;
}
});
return total;
}
}
});</script>
Try it »
Search Page Example
Search Page
Enter search content in the input box, and the list displays the configured list:
<form id="main" v-cloak>
<div class="bar">
<!--The `searchString` model is bound to the text field.-->
<input type="text" v-model="searchString" placeholder="Enter search content" />
</div>
<ul>
<!--Loop through and output the data-->
<li v-for="article in filteredArticles">
<a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
<p>{{article.title}}</p>
</li>
</ul>
</form>
<script>var demo = new Vue({
el: '#main',
data: {
searchString: "",
// Data model, in real environment you can get it via Ajax
articles: [
{
"title": "What You Need To Know About CSS Variables",
"url": "https://www.example.com/css/css-tutorial.html",
"image": "https://static.jyshare.com/images/icon/css.png"
},
{
"title": "Freebie: 4 Great Looking Pricing Tables",
"url": "https://www.example.com/html/html-tutorial.html",
"image": "https://static.jyshare.com/images/icon/html.png"
},
{
"title": "20 Interesting JavaScript and CSS Libraries for February 2016",
"url": "https://www.example.com/css3/css3-tutorial.html",
"image": "https://static.jyshare.com/images/icon/css3.png"
},
{
"title": "Quick Tip: The Easiest Way To Make Responsive Headers",
"url": "https://www.example.com/css3/css3-tutorial.html",
"image": "https://static.jyshare.com/images/icon/css3.png"
},
{
"title": "Learn SQL In 20 Minutes",
"url": "https://www.example.com/sql/sql-tutorial.html",
"image": "https://static.jyshare.com/images/icon/sql.png"
},
{
"title": "Creating Your First Desktop App With HTML, JS and Electron",
"url": "https://www.example.com/js/js-tutorial.html",
"image": "https://static.jyshare.com/images/icon/html.png"
}
]
},
computed: {
// Computed property, match search
filteredArticles: function () {
var articles_array = this.articles,
searchString = this.searchString;
if(!searchString){
return articles_array;
}
searchString = searchString.trim().toLowerCase();
articles_array = articles_array.filter(function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return item;
}
})
// Return the filtered data
return articles_array;;
}
}
});</script>
Try it Yourself »
Switch Different Layouts Example
Switch Different Layouts
Click the button at the top right to toggle between different page layouts:
<form id="main" v-cloak>
<div class="bar">
<!--Two buttons are used to toggle between different list layouts-->
<a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
<a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
</div>
<!--We have set up two layout pages. Which one is used depends on the "layout" binding-->
<ul v-if="layout == 'grid'" class="grid">
<!--Use large images, no text-->
<li v-for="a in articles">
<a v-bind:href="a.url" target="_blank" rel="noopener noreferrer"><img v-bind:src="a.image.large" /></a>
</li>
</ul>
<ul v-if="layout == 'list'" class="list">
<!--Use small images and titles-->
<li v-for="a in articles">
<a v-bind:href="a.url" target="_blank" rel="noopener noreferrer"><img v-bind:src="a.image.small" /></a>
<p>{{a.title}}</p>
</li>
</ul>
</form>
<script>var demo = new Vue({
el: '#main',
data: {
// view model, possible values are "grid" or "list".
layout: 'grid',
articles: [{
"title": "HTML Tutorial",
"url": "https://www.example.com/html/html-tutorial.html",
"image": {
"large": "https://static.jyshare.com/images/mix/htmlbig.png",
"small": "https://static.jyshare.com/images/icon/html.png"
}
},
{
"title": "CSS Tutorial",
"url": "https://www.example.com/css/css-tutorial.html",
"image": {
"large": "https://static.jyshare.com/images/mix/cssbig.png",
"small": "https://static.jyshare.com/images/icon/css.png"
}
},
{
"title": "JS Tutorial",
"url": "https://www.example.com/js/js-tutorial.html",
"image": {
"large": "https://static.jyshare.com/images/mix/jsbig.jpeg",
"small": "https://static.jyshare.com/images/icon/js.png"
}
},
{
"title": "SQL Tutorial",
"url": "https://www.example.com/sql/sql-tutorial.html",
"image": {
"large": "https://static.jyshare.com/images/mix/sqlbig.png",
"small": "https://static.jyshare.com/images/icon/sql.png"
}
},
{
"title": "Ajax Tutorial",
"url": "https://www.example.com/ajax/ajax-tutorial.html",
"image": {
"large": "https://static.jyshare.com/images/mix/ajaxbig.png",
"small": "https://static.jyshare.com/images/icon/ajax.png"
}
},
{
"title": Python Tutorial,
"url": "https://www.example.com/pyhton/pyhton-tutorial.html",
"image": {
"large": "https://static.jyshare.com/images/mix/pythonbig.png",
"small": "https://static.jyshare.com/images/icon/python.png"
}
}]
}
});</script>
Try it Yourself »