Vue.js instance

This chapter introduces you to several examples of Vue.js and uses examples to consolidate the knowledge you have learned.

Navigation menu example

Navigation menu

Create a simple navigation menu:

<div id=" main"> <!-- The active menu style is active--> <!-- To prevent the link from jumping when clicked, we used the "prevent" modifier (short for preventDefault). --> <nav v-bind:class="active" v-on:click.prevent>... <!-- When the link on the menu is clicked, we call the makeActive method, which Created in a 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 following "active" variables will automatically change based on the currently selected value.--> <p>You have chosen<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' }, // Click on the function used by the menu Methods: { makeActive: function(item){ // The model changes and the view is automatically updated This.active = item; } } }); </script>

Edit text instance

Text Editing

Click on the specified text to edit the content:

<!-- v-cloak hide uncompiled variables until Vue The instance is ready. --> <!-- The hideTooltp() method is called after the element is clicked--> <div id="main" v- Cloak v-on:click="hideTooltip"> <!-- This is a prompt box V-on:click.stop is a click event handler, and the stop modifier is used to block event delivery. V-if is used to determine if show_tooltip is true --> <div class="tooltip" v- On:click.stop v-if="show_tooltip"> <!-- v-model binds the content of the text field When the text field content changes, the corresponding variable will also change in real time --> <input type="text" v- Model="text_content " /> </div> <!-- Call the "toggleTooltip" method and prevent event delivery--> <!-- The "text_content" variable changes based on the content of the text field--> <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(){ // The view is automatically updated when the model changes This.show_tooltip = false; }, toggleTooltip: function(){ This.show_tooltip = !this.show_tooltip; } } }) </script>

Order list instance

order list

Create a list of orders and calculate the total price:

<form id=" main" v-cloak> <h1>Services</h1> <ul> <!-- Loop out the services array, set the style after the option clicks--> <li v-for="service in services" v-on:click="toggleActive(service)" v- Bind:class="{ 'active ': service.active}"> <!-- Display the service name in the order, price Vue.js defines a currency filter for formatting prices --> {{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 model properties. The view will loop // The view will loop through the data of 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>

Search page instance

Search page

Enter your search in the input box and the list shows a list of configurations:

<form id=" main" v-cloak> <div class="bar"> <!-- searchString model and text field creation binding--> <input type="text" v- Model="searchString " placeholder="Enter your search" /> </div> <ul> <!-- Loop output 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, the actual environment you can get from Ajax Articles: [ { "title": "What You Need To Know About CSS Variables", "url": "https://www.welookups.com/css/css-tutorial.html", "image": "https://static.welookups.com/images/icon/css.png" }, { "title": "Freebie: 4 Great Looking Pricing Tables", "url": "https://www.welookups.com/html/html-tutorial.html", "image": "https://static.welookups.com/images/icon/html.png" }, { "title": "20 Interesting JavaScript and CSS Libraries for February 2016", "url": "https://www.welookups.com/css3/css3-tutorial.html", "image": "https://static.welookups.com/images/icon/css3.png" }, { "title": "Quick Tip: The Easiest Way To Make Responsive Headers", "url": "https://www.welookups.com/css3/css3-tutorial.html", "image": "https://static.welookups.com/images/icon/css3.png" }, { "title": "Learn SQL In 20 Minutes", "url": "https://www.welookups.com/sql/sql-tutorial.html", "image": "https://static.welookups.com/images/icon/sql.png" }, { "title": "Creating Your First Desktop App With HTML, JS and Electron", "url": "https://www.welookups.com/js/js-tutorial.html", "image": "https://static.welookups.com/images/icon/html.png" } ] }, Computed: { // Calculate math, 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; } }) // Array returned after returning Return articles_array;; } } }); </script>

Switch different layout examples

Switch different layouts

Click the button in the top right corner to switch between different page layouts:

<form id=" main" v-cloak> <div class="bar"> <!-- Two buttons for switching 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 set to use depends on the "layout" binding --> <ul v-if="layout == 'grid'" class=" Grid"> <!-- Use a large image, no text--> <li v-for="a in articles"> <a v-bind:href="a.url" target="_blank "><img v-bind:src="a.image.large" /></a> </li> </ul> <ul v-if="layout == 'list'" class=" List"> <!-- Using thumbnails and titles--> <li v-for="a in articles"> <a v-bind:href="a.url" target="_blank "><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, the possible value is "grid" or "list". Layout: 'grid', Articles: [{ "title": "HTML tutorial", "url": "https://www.welookups.com/html/html-tutorial.html", "image": { "large": "https://static.welookups.com/images/mix/htmlbig.png", "small": "https://static.welookups.com/images/icon/html.png" } }, { "title": "CSS tutorial", "url": "https://www.welookups.com/css/css-tutorial.html", "image": { "large": "https://static.welookups.com/images/mix/cssbig.png", "small": "https://static.welookups.com/images/icon/css.png" } }, { "title": "JS tutorial", "url": "https://www.welookups.com/js/js-tutorial.html", "image": { "large": "https://static.welookups.com/images/mix/jsbig.jpeg", "small": "https://static.welookups.com/images/icon/js.png" } }, { "title": "SQL tutorial", "url": "https://www.welookups.com/sql/sql-tutorial.html", "image": { "large": "https://static.welookups.com/images/mix/sqlbig.png", "small": "https://static.welookups.com/images/icon/sql.png" } }, { "title": "Ajax tutorial", "url": "https://www.welookups.com/ajax/ajax-tutorial.html", "image": { "large": "https://static.welookups.com/images/mix/ajaxbig.png", "small": "https://static.welookups.com/images/icon/ajax.png" } }, { "title": "Python tutorial", "url": "https://www.welookups.com/pyhton/pyhton-tutorial.html", "image": { "large": "https://static.welookups.com/images/mix/pythonbig.png", "small": "https://static.welookups.com/images/icon/python.png" } }] } }); </script>

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.