{"id":274,"date":"2018-02-22T20:03:02","date_gmt":"2018-02-22T20:03:02","guid":{"rendered":"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/?post_type=chapter&#038;p=274"},"modified":"2019-04-23T21:27:41","modified_gmt":"2019-04-23T21:27:41","slug":"chapter-11-javascript-libraries","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/chapter\/chapter-11-javascript-libraries\/","title":{"raw":"Chapter 10 \u2013 JavaScript Libraries","rendered":"Chapter 10 \u2013 JavaScript Libraries"},"content":{"raw":"A JavaScript library is a collection of function that speed up the development of a web site. There are a range of libraries available and many have strong communities that assist in improving the functionality and supporting users. This chapter provides an overview of popular libraries and how you can get started with them.\r\n\r\nWhen choosing a library, it is important to assess your application requirements and experience. Some libraries lack documentation, especially if newly released. Mature libraries have an advantage when it comes to community support, documentation, and life-cycle. Younger libraries may be short-lived or require code to be rewritten when new versions are released. However, the benefit of a younger library is that they often employ novel approaches and may be more efficient in execution. Also check for corporate backing when looking at a library. This ensures the code will continue to be supported and updated.\r\n\r\nIn this chapter, we will look at jQuery (mature) and Vue.js (emerging\/young).\r\n\r\nFor the purpose of this book, a JavaScript <em>library<\/em> is a single file that can be included with your code and provides several functions for your use. This differs from a framework, which is more opinionated on how you develop your entire site and relies on multiple files. Frameworks often provide both frontend and backend code. A JavaScript <em>plugin<\/em> extends a library to provide added functionality. Plugins rely on a library, whereas libraries are self-sufficient.\r\n<h3>List of JavaScript Frameworks<\/h3>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.emberjs.com\/\">Ember<\/a><\/li>\r\n \t<li><a href=\"https:\/\/angular.io\/\">Angular<\/a> (Google)<\/li>\r\n \t<li><a href=\"https:\/\/reactjs.org\/\">React<\/a> (Facebook)<\/li>\r\n<\/ul>\r\n<h3>List of JavaScript Libraries<\/h3>\r\n<ul>\r\n \t<li><a href=\"https:\/\/jquery.org\">jQuery<\/a><\/li>\r\n \t<li><a href=\"https:\/\/vuejs.org\/\">Vue.js<\/a><\/li>\r\n \t<li><a href=\"http:\/\/prototypejs.org\/\">Prototype<\/a><\/li>\r\n \t<li><a href=\"https:\/\/mootools.net\/\">MooTools<\/a><\/li>\r\n<\/ul>\r\n<h2>Getting Started with a JavaScript Library<\/h2>\r\nThe standard is usually to download the library and move the files into your development folder. This process makes sense when you're developing without an internet connection or if you're creating a standalone website for an internal network. What makes the web so powerful is its inter-connectivity. So why not leverage this? Why don't we just link to a host that already has the file so we have less to manage in our files and folders. But don't just use any host, use a <em>Content Delivery Network<\/em>.\r\n<h3>Content Delivery Networks (CDN)<\/h3>\r\nCDN's are servers that are typically used to host assets so that sites aren't bogged down serving them. The advantage is that they are located all over the world, so if a user connects to your website, they can be served assets (images, videos, static code) from the server closest to them. We still need our own server for anything that's dynamic, meaning anything that changes often. If you're running a database, you can package what the user needs, while have them download assets elsewhere. The result is a quicker load time.\r\n\r\nAnother advantage of a CDN is caching. Let's say your user visits a WordPress blog and is given the jQuery file from a CDN called <em>Cloudflare<\/em>. Then your user heads over to your site and you've linked to the same jQuery file on <em>Cloudflare<\/em>. The browser has already downloaded it, so there's no point in downloading it again, it will just use the version it already has. CDNs typically store each version of a file in a separate folder so it will never expire. Your browser caches files for a set period of time before it downloads again. The expiry date can be specified by the CDN to be a very long time.\r\n\r\nWe'll be showing you how to use a CDN to use jQuery and Vue.js\r\n<h2>jQuery<\/h2>\r\nReleased in 2006, jQuery is the most popular JavaScript Library online. Thousands of plugins exist and their <a href=\"http:\/\/api.jquery.com\/\">documentation<\/a> and <a href=\"https:\/\/stackoverflow.com\/tags\/jquery\/info\">community<\/a> support is extensive.\r\n\r\nTo start, you can find <a href=\"https:\/\/cdnjs.com\/libraries\/jquery\">the latest version of jQuery on a cdn.js<\/a>. Simply find the <em>min<\/em> (minified) version and copy the <em>script tag<\/em>.\r\n\r\n[caption id=\"attachment_277\" align=\"alignnone\" width=\"662\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/cdnjs.png\" alt=\"Screenshot of cdnjs.com jQuery search\" class=\"wp-image-277 size-full\" width=\"662\" height=\"545\" \/> <strong>Figure 10-1<\/strong>. A screenshot of the jQuery library on cdnjs.com[\/caption]\r\n\r\nThe code you've copied should be placed in your HTML document before the closing body tag:\r\n<pre>  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\r\nOnce that's completed, you're ready to write your first line of jQuery code!\r\n\r\nHere's an example of a button that shows and hides all paragraphs in a document:\r\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;&lt;title&gt;Button Toggle&lt;\/title&gt;&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n  &lt;button&gt;Click on me&lt;\/button&gt;\r\n  &lt;p&gt;This text will appear and disappear when you click the button&lt;\/p&gt;\r\n\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script type=\"text\/javascript\"&gt;\r\n    $('button').click(\r\n      function() {\r\n        $('p').toggle();\r\n      }\r\n    );\r\n  &lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\r\nOne of the benefits of jQuery is its use of CSS-like targeting to control your interactions. To target an element, we just use its name, in this example, it's <em>button<\/em>. We then specify the interaction as a <em>click<\/em>. The function that follows runs when the <em>button<\/em> is <em>click<\/em>ed and targets the all paragraph elements on the page to <em>toggle<\/em>. By switching out <em>toggle<\/em> for <em>slideToggle<\/em>, we can animate the paragraphs to vertically slide in and out of view.\r\n\r\nTry changing the <em>toggle<\/em> to <em>slideToggle<\/em> and adding more paragraphs to the document. Then load the page in a browser and click on the button to see jQuery's magic in action. Another function to try is <em>fadeToggle<\/em>.\r\n<h3>jQuery Counter<\/h3>\r\nTo create a counter, we will need to use a variable to hold the current count. The counter will be set to zero by default. Each time a button is pressed, it will increment by one and the value will be output in HTML. To do this, we need to specify the output location and the button. Instead of using HTML elements (<em>button, p<\/em> or <em>a<\/em>), we will use <em>id<\/em> attributes.\r\n\r\nFor counting down, instead of using the jQuery<em> click<\/em> function, the <em>onclick<\/em> attribute will be used on the <em>button <\/em>element. A function called <em>subtract()<\/em> will need to defined in JavaScript.\r\n<pre>&lt;button id=\"add\"&gt;+&lt;\/button&gt;\r\n&lt;button onclick=\"subtract()\"&gt;-&lt;\/button&gt;\r\n&lt;p id=\"output\"&gt;Number appears here&lt;\/p&gt;\r\n\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n \/\/ Setup the variable and output it\r\n counter = 0;\r\n $('#output').html(counter);\r\n\r\n \/\/ Adds 1 when the button with id='add' is clicked\r\n $('#add').click(\r\n   function() {\r\n     counter++; \/\/ same as counter = counter + 1;\r\n     $('#output').html(counter);\r\n   }\r\n );\r\n \/\/ Subtracts 1 when the button with the onclick=\"subtract()\" is clicked\r\n function subtract() {\r\n   counter--; \/\/ same as counter = counter - 1;\r\n   $('#output').html(counter);\r\n }\r\n&lt;\/script&gt;<\/pre>\r\n<h2>Vue.js<\/h2>\r\nAs an up-and-coming library, Vue.js has excelled due to its ease-of-use and efficiency. The syntax is cleaner compared to jQuery, but you'll be polluting your HTML with new attributes specific to Vue. This means the separation of HTML and JavaScript is less apparent. The benefit is how fast Vue is at updating the Document Object Model (DOM). Think of the DOM as the HTML Lego blocks that are used to construct your website. Each block is accessed and acted upon by JavaScript. If you have a lot of code and lots of content updates, the browser will be working harder to traverse (scan your code) and make relevant updates. Vue has a very efficient means of performing updates compared to jQuery.\r\n\r\nJust like jQuery, including Vue.js is as simple as a <em>script<\/em> element link from a CDN.\r\n<pre><span class=\"line\"><span class=\"tag\"><\/span><span class=\"tag\">&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.5.13\/vue.min.js\"&gt;&lt;\/script&gt;<\/span><\/span><\/pre>\r\n<h3>Hello Name Example<\/h3>\r\n<pre>&lt;div id=\"example\"&gt;\r\n  &lt;input type=\"text\" placeholder=\"Enter your name\" v-model=\"username\"&gt;\r\n  &lt;h1&gt;Hello &lt;span v-html=\"username\"&gt;Sample Name&lt;\/span&gt;!&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.5.13\/vue.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nnew Vue({\r\n  el: '#example',\r\n  data: { username: '' }\r\n})\r\n&lt;\/script&gt;<\/pre>\r\nIn the above example, we must first define a <em>div<\/em> to run our example. All HTML that will be acted upon will be nested within the <em>div<\/em>. The <em>input<\/em> element as an attribute of <em>v-model<\/em>, which is a Vue.js attribute that allows us to link the input content to the <em>span<\/em> element with an attribute of <em>v-html<\/em>. Notice that both have a value of <em>username<\/em>, allowing the <em>input<\/em> and the <em>span<\/em> to relate to each other.\r\n\r\nIn JavaScript, we've specified the location where Vue.js will be focusing its efforts <em>(#example)<\/em>. By default, the username is set to nothing. Notice how the \"Sample Name\" is removed when the page loads. We override the content when Vue.js loads our data.\r\n<h3>Vue.js Counter<\/h3>\r\n<pre>&lt;div id=\"counter\"&gt;\r\n  &lt;button v-on:click=\"number++\"&gt;+&lt;\/button&gt;\r\n  &lt;button v-on:click=\"number--\"&gt;-&lt;\/button&gt;\r\n  &lt;p v-html=\"number\"&gt;Number appears here&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.5.13\/vue.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nnew Vue({\r\n  el: '#counter',\r\n  data: { number: 0 }\r\n})\r\n&lt;\/script&gt;<\/pre>\r\nThere is no\u00a0need to explicitly output the number. Vue.js handles this because it's directly linked to the <em>v-html<\/em> attribute. We've also skipped the need to define a function because we can run an arithmetic process directly on a <em>click<\/em> action. For more complex operations, a function can be called using <em>v-on:click=\"functionName\"<\/em>. We've done away with about 10 lines of code using Vue.js compared to jQuery.","rendered":"<p>A JavaScript library is a collection of function that speed up the development of a web site. There are a range of libraries available and many have strong communities that assist in improving the functionality and supporting users. This chapter provides an overview of popular libraries and how you can get started with them.<\/p>\n<p>When choosing a library, it is important to assess your application requirements and experience. Some libraries lack documentation, especially if newly released. Mature libraries have an advantage when it comes to community support, documentation, and life-cycle. Younger libraries may be short-lived or require code to be rewritten when new versions are released. However, the benefit of a younger library is that they often employ novel approaches and may be more efficient in execution. Also check for corporate backing when looking at a library. This ensures the code will continue to be supported and updated.<\/p>\n<p>In this chapter, we will look at jQuery (mature) and Vue.js (emerging\/young).<\/p>\n<p>For the purpose of this book, a JavaScript <em>library<\/em> is a single file that can be included with your code and provides several functions for your use. This differs from a framework, which is more opinionated on how you develop your entire site and relies on multiple files. Frameworks often provide both frontend and backend code. A JavaScript <em>plugin<\/em> extends a library to provide added functionality. Plugins rely on a library, whereas libraries are self-sufficient.<\/p>\n<h3>List of JavaScript Frameworks<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.emberjs.com\/\">Ember<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/\">Angular<\/a> (Google)<\/li>\n<li><a href=\"https:\/\/reactjs.org\/\">React<\/a> (Facebook)<\/li>\n<\/ul>\n<h3>List of JavaScript Libraries<\/h3>\n<ul>\n<li><a href=\"https:\/\/jquery.org\">jQuery<\/a><\/li>\n<li><a href=\"https:\/\/vuejs.org\/\">Vue.js<\/a><\/li>\n<li><a href=\"http:\/\/prototypejs.org\/\">Prototype<\/a><\/li>\n<li><a href=\"https:\/\/mootools.net\/\">MooTools<\/a><\/li>\n<\/ul>\n<h2>Getting Started with a JavaScript Library<\/h2>\n<p>The standard is usually to download the library and move the files into your development folder. This process makes sense when you&#8217;re developing without an internet connection or if you&#8217;re creating a standalone website for an internal network. What makes the web so powerful is its inter-connectivity. So why not leverage this? Why don&#8217;t we just link to a host that already has the file so we have less to manage in our files and folders. But don&#8217;t just use any host, use a <em>Content Delivery Network<\/em>.<\/p>\n<h3>Content Delivery Networks (CDN)<\/h3>\n<p>CDN&#8217;s are servers that are typically used to host assets so that sites aren&#8217;t bogged down serving them. The advantage is that they are located all over the world, so if a user connects to your website, they can be served assets (images, videos, static code) from the server closest to them. We still need our own server for anything that&#8217;s dynamic, meaning anything that changes often. If you&#8217;re running a database, you can package what the user needs, while have them download assets elsewhere. The result is a quicker load time.<\/p>\n<p>Another advantage of a CDN is caching. Let&#8217;s say your user visits a WordPress blog and is given the jQuery file from a CDN called <em>Cloudflare<\/em>. Then your user heads over to your site and you&#8217;ve linked to the same jQuery file on <em>Cloudflare<\/em>. The browser has already downloaded it, so there&#8217;s no point in downloading it again, it will just use the version it already has. CDNs typically store each version of a file in a separate folder so it will never expire. Your browser caches files for a set period of time before it downloads again. The expiry date can be specified by the CDN to be a very long time.<\/p>\n<p>We&#8217;ll be showing you how to use a CDN to use jQuery and Vue.js<\/p>\n<h2>jQuery<\/h2>\n<p>Released in 2006, jQuery is the most popular JavaScript Library online. Thousands of plugins exist and their <a href=\"http:\/\/api.jquery.com\/\">documentation<\/a> and <a href=\"https:\/\/stackoverflow.com\/tags\/jquery\/info\">community<\/a> support is extensive.<\/p>\n<p>To start, you can find <a href=\"https:\/\/cdnjs.com\/libraries\/jquery\">the latest version of jQuery on a cdn.js<\/a>. Simply find the <em>min<\/em> (minified) version and copy the <em>script tag<\/em>.<\/p>\n<figure id=\"attachment_277\" aria-describedby=\"caption-attachment-277\" style=\"width: 662px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/cdnjs.png\" alt=\"Screenshot of cdnjs.com jQuery search\" class=\"wp-image-277 size-full\" width=\"662\" height=\"545\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/cdnjs.png 662w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/cdnjs-300x247.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/cdnjs-65x54.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/cdnjs-225x185.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/cdnjs-350x288.png 350w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><figcaption id=\"caption-attachment-277\" class=\"wp-caption-text\"><strong>Figure 10-1<\/strong>. A screenshot of the jQuery library on cdnjs.com<\/figcaption><\/figure>\n<p>The code you&#8217;ve copied should be placed in your HTML document before the closing body tag:<\/p>\n<pre>  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Once that&#8217;s completed, you&#8217;re ready to write your first line of jQuery code!<\/p>\n<p>Here&#8217;s an example of a button that shows and hides all paragraphs in a document:<\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;&lt;title&gt;Button Toggle&lt;\/title&gt;&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n  &lt;button&gt;Click on me&lt;\/button&gt;\r\n  &lt;p&gt;This text will appear and disappear when you click the button&lt;\/p&gt;\r\n\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script type=\"text\/javascript\"&gt;\r\n    $('button').click(\r\n      function() {\r\n        $('p').toggle();\r\n      }\r\n    );\r\n  &lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>One of the benefits of jQuery is its use of CSS-like targeting to control your interactions. To target an element, we just use its name, in this example, it&#8217;s <em>button<\/em>. We then specify the interaction as a <em>click<\/em>. The function that follows runs when the <em>button<\/em> is <em>click<\/em>ed and targets the all paragraph elements on the page to <em>toggle<\/em>. By switching out <em>toggle<\/em> for <em>slideToggle<\/em>, we can animate the paragraphs to vertically slide in and out of view.<\/p>\n<p>Try changing the <em>toggle<\/em> to <em>slideToggle<\/em> and adding more paragraphs to the document. Then load the page in a browser and click on the button to see jQuery&#8217;s magic in action. Another function to try is <em>fadeToggle<\/em>.<\/p>\n<h3>jQuery Counter<\/h3>\n<p>To create a counter, we will need to use a variable to hold the current count. The counter will be set to zero by default. Each time a button is pressed, it will increment by one and the value will be output in HTML. To do this, we need to specify the output location and the button. Instead of using HTML elements (<em>button, p<\/em> or <em>a<\/em>), we will use <em>id<\/em> attributes.<\/p>\n<p>For counting down, instead of using the jQuery<em> click<\/em> function, the <em>onclick<\/em> attribute will be used on the <em>button <\/em>element. A function called <em>subtract()<\/em> will need to defined in JavaScript.<\/p>\n<pre>&lt;button id=\"add\"&gt;+&lt;\/button&gt;\r\n&lt;button onclick=\"subtract()\"&gt;-&lt;\/button&gt;\r\n&lt;p id=\"output\"&gt;Number appears here&lt;\/p&gt;\r\n\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n \/\/ Setup the variable and output it\r\n counter = 0;\r\n $('#output').html(counter);\r\n\r\n \/\/ Adds 1 when the button with id='add' is clicked\r\n $('#add').click(\r\n   function() {\r\n     counter++; \/\/ same as counter = counter + 1;\r\n     $('#output').html(counter);\r\n   }\r\n );\r\n \/\/ Subtracts 1 when the button with the onclick=\"subtract()\" is clicked\r\n function subtract() {\r\n   counter--; \/\/ same as counter = counter - 1;\r\n   $('#output').html(counter);\r\n }\r\n&lt;\/script&gt;<\/pre>\n<h2>Vue.js<\/h2>\n<p>As an up-and-coming library, Vue.js has excelled due to its ease-of-use and efficiency. The syntax is cleaner compared to jQuery, but you&#8217;ll be polluting your HTML with new attributes specific to Vue. This means the separation of HTML and JavaScript is less apparent. The benefit is how fast Vue is at updating the Document Object Model (DOM). Think of the DOM as the HTML Lego blocks that are used to construct your website. Each block is accessed and acted upon by JavaScript. If you have a lot of code and lots of content updates, the browser will be working harder to traverse (scan your code) and make relevant updates. Vue has a very efficient means of performing updates compared to jQuery.<\/p>\n<p>Just like jQuery, including Vue.js is as simple as a <em>script<\/em> element link from a CDN.<\/p>\n<pre><span class=\"line\"><span class=\"tag\"><\/span><span class=\"tag\">&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.5.13\/vue.min.js\"&gt;&lt;\/script&gt;<\/span><\/span><\/pre>\n<h3>Hello Name Example<\/h3>\n<pre>&lt;div id=\"example\"&gt;\r\n  &lt;input type=\"text\" placeholder=\"Enter your name\" v-model=\"username\"&gt;\r\n  &lt;h1&gt;Hello &lt;span v-html=\"username\"&gt;Sample Name&lt;\/span&gt;!&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.5.13\/vue.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nnew Vue({\r\n  el: '#example',\r\n  data: { username: '' }\r\n})\r\n&lt;\/script&gt;<\/pre>\n<p>In the above example, we must first define a <em>div<\/em> to run our example. All HTML that will be acted upon will be nested within the <em>div<\/em>. The <em>input<\/em> element as an attribute of <em>v-model<\/em>, which is a Vue.js attribute that allows us to link the input content to the <em>span<\/em> element with an attribute of <em>v-html<\/em>. Notice that both have a value of <em>username<\/em>, allowing the <em>input<\/em> and the <em>span<\/em> to relate to each other.<\/p>\n<p>In JavaScript, we&#8217;ve specified the location where Vue.js will be focusing its efforts <em>(#example)<\/em>. By default, the username is set to nothing. Notice how the &#8220;Sample Name&#8221; is removed when the page loads. We override the content when Vue.js loads our data.<\/p>\n<h3>Vue.js Counter<\/h3>\n<pre>&lt;div id=\"counter\"&gt;\r\n  &lt;button v-on:click=\"number++\"&gt;+&lt;\/button&gt;\r\n  &lt;button v-on:click=\"number--\"&gt;-&lt;\/button&gt;\r\n  &lt;p v-html=\"number\"&gt;Number appears here&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.5.13\/vue.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nnew Vue({\r\n  el: '#counter',\r\n  data: { number: 0 }\r\n})\r\n&lt;\/script&gt;<\/pre>\n<p>There is no\u00a0need to explicitly output the number. Vue.js handles this because it&#8217;s directly linked to the <em>v-html<\/em> attribute. We&#8217;ve also skipped the need to define a function because we can run an arithmetic process directly on a <em>click<\/em> action. For more complex operations, a function can be called using <em>v-on:click=&#8221;functionName&#8221;<\/em>. We&#8217;ve done away with about 10 lines of code using Vue.js compared to jQuery.<\/p>\n","protected":false},"author":33,"menu_order":10,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[47],"contributor":[],"license":[],"class_list":["post-274","chapter","type-chapter","status-publish","hentry","chapter-type-standard"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/users\/33"}],"version-history":[{"count":15,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/274\/revisions"}],"predecessor-version":[{"id":642,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/274\/revisions\/642"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/274\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/media?parent=274"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapter-type?post=274"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/contributor?post=274"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/license?post=274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}