Skip to main content

Vue JS (basics 1)

By

 INTRODUCTION TO VUE

Creating Vue Apps

Our project now has access to the Vue library. This gives us access to all of the code that will allow us to make Vue apps, web front-ends built using Vue, but doesn’t actually create one for us. We now need to write the code to actually make a Vue app.

Vue makes it easy to make a new app by exporting a class called Vue. Much like any other JavaScript class, we create instances of this class using the new keyword. Each of these Vue instances is a fully-functioning Vue app. Let’s look at an example:


// app.js
const app = new Vue({});





By invoking the Vue class constructor with the new keyword, we create a new instance of the Vue class which we name app. The Vue constructor can set many properties on our Vue app when it is called. However, unlike many constructors, the Vue class does not take each of these properties as separate arguments. Rather, it only takes one argument.

Vue apps require a lot of information — information that will differ greatly from app to app. To accommodate this, the Vue constructor doesn’t attempt to take in each piece of information as its own parameter. This would require developers to keep careful track of which order arguments were expected in, making it difficult to add properties or make changes.

Instead, the Vue constructor takes in only one object, called the options object. Each piece of information the Vue app needs to function is added to the options object as a key-value pair. This means that developers can easily update or add information in the Vue app by just looking for the correct key in the options object.


el

In making a new Vue app, we gain access to all of the powerful features Vue has to offer. However, we don’t necessarily want all of our HTML to have access to these features. We need to specify to our Vue app which portion of our HTML we want to gain access to our Vue app’s logic.

We do this by adding a key-value pair to the Vue app’s options object. We add a key called el, standing for HTML element, with a value of a CSS selector as a string that will target an element in our HTML and give it access to our Vue app’s functionality.

// app.js
const app = new Vue({
  el: '#app'

});

In the above example, we wanted an HTML element with an ID of app to gain access to our Vue app’s functionality. We added an el key to the options object and made the value '#app', a CSS selector that will target an element with an ID, #, of app.

We then import this JavaScript file into our HTML file so that our Vue app can find the specified HTML element and turn it into a Vue app.


<!-- index.html -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
  <script src="./js/app.js" defer></script>
</head>
<body>
  <div id="app">
    <!-- Vue App HTML Code -->
  </div>

</body>


In this example, we wrote the HTML that will be turned into a Vue app. Then, in the <head> we imported the file containing the JavaScript from the previous example that will turn the HTML #app <div> element into a Vue app.


Data

Now that we’ve transformed our HTML into a Vue app, we’re ready to make the magic happen!

An essential feature of all front-end frameworks is rendering and updating dynamic data. Information like the number of likes on a social media post may change at any second. Front-end frameworks must make it easy to display these types of dynamic data and automatically update them for users as soon as they change.

To display dynamic information we need:

  • A place to store the data we will be displaying
  • A syntax for displaying that information

Let’s tackle the first point.

As mentioned in the last exercise, everything our Vue app needs should be provided on the options object when the Vue app is created. Therefore, all of our dynamic data will need to be specified in our options object at a property called data.


const app = new Vue({
  el: '#app',
  data: {
    username: 'Michael'
  }

});


In this example, we added the data property to our options object. Apps need to display many pieces of dynamic data. To accommodate this, the value of .data is an object as well. Every piece of data will be added to the .data object as a key-value pair. In this case, we only added one piece of data called username with a value of 'Michael'.


Templates

As a reminder, we need the following tools to display dynamic information in our Vue app:

  1. A place to store the data we will be displaying
  2. A syntax for displaying that information

We now know that we store our dynamic information on the .data attribute of our Vue app options object, but how do we display that information if it potentially will keep changing values?

Vue makes use of templating, meaning that the developer specifies certain content in our HTML that isn’t meant to be displayed literally but rather substituted out with the appropriate data from the app. We specify which content inside our HTML should be substituted by surrounding it in two layers of curly brackets, like so:


<div id="app">
  <h2>Hello, {{ username }}</h2>

</div>

In this example, {{ username }} will be filled in with the value of username from the Vue app’s .data object when the page is rendered to the user. If the value of username changes, the value displayed to the user will be changed as well.

This type of HTML code, where dynamic data is stubbed out, is called a template. Templates contain all of the hard-coded information displayed on the site but specify places where dynamic information needs to be filled in.

Using curly brackets for templating in HTML was popularized by a framework called mustache. As a result, curly braces in templates are often called “mustaches.” Whenever you want to display information from the Vue app’s data, you wrap the name of the .data property in two sets of mustaches (curly brackets) and the expression will be replaced with the Vue data information for the end user to see.

This is far easier to read and write than trying to write vanilla JavaScript that selects specific HTML elements and updates their content dynamically. Using the .data attribute and mustache templates is yet another way Vue makes front-end web development faster to write, easier to read, and less error-prone.


Directives

Let’s check out one of Vue’s coolest features: directives.

Directives are custom HTML attributes built into Vue that accomplish incredibly complex, common front-end operations using barely any code.

For example, one very common front-end need is to conditionally display elements. Let’s say we only want to show a login button if a user isn’t already logged in. We can add a v-if directive as an attribute to HTML elements like so:


<button v-if="userIsLoggedIn">Log Out</button>

<button v-if="!userIsLoggedIn">Log In</button>


v-if acts an awful lot like JavaScript if - it will only display the HTML element it is on if the v-if statement returns true. In this case, it will check our .data for a value of userIsLoggedIn. Then it will only display our “Log Out” button if userIsLoggedIn is true and will only display our “Log In” button if it is false.

Another complex, common front-end need is to render an array of items identically. We can use v-for as an attribute, like so:


<ul>
  <li v-for="todo in todoList">{{ todo }}</li>

</ul>


Bam, just like that v-for will iterate through every item in our .data‘s todoList array, create a variable called todo containing each succesive array element, and create an li displaying each element in the list. Even if a new item is added to the list, the list will be re-rendered instantly to display that new item.

One more super cool directive is v-model. v-model can be added to any form field and hooked up to our Vue app’s data. Modifying the form field will then automatically modify the specified Vue app data!


<input v-model="username" />


The above input field will display the current value of username on the Vue app’s data object and will change the value of username if the user modifies the value in the field. That’s some complicated JavaScript implemented perfectly with very little code.

As you may have noticed, every built-in Vue directive starts with v-. There are too many for us to cover in this lesson, however you can view a list of them all here. Just know that if there isn’t a directive that does what you need — you can even make your own!

Directives make complex front-end code easy to write, easy to read, and optimized for great site performance.

 

Components

It is incredibly common to re-use complex elements throughout a front-end web app. For example, every post on Instagram or Facebook needs to look the same but contain different information. Additionally, they need to look the same on many different pages within the site and on many different devices. To make this easier, Vue has added the ability to create custom, reusable HTML elements called components.

When creating a component, you provide a template that should be rendered whenever the component is used in HTML. You then specify which pieces of dynamic information, called props, the component can receive to fill in this template. When used in your HTML code, props look like normal HTML attributes, you add them to the opening tag of the component HTML element with a name and a value.

Once you’ve created your component, you can then use it throughout your site just like any other HTML element. This means no copy/pasting of HTML code, no need to make the same change in multiple places across your site, and no potentially broken or misstyled elements.

Knowing how and when to make components is a slightly more advanced topic, so we won’t cover it in depth. However, that doesn’t mean we can’t play around with them right now. Let’s check one out!


const Tweet = Vue.component('tweet', {
 props: ['message','author'],
 template: '<div class="tweet"><h3>{{ author }}</h3><p>{{ message }}</p></div>'
});


in html 

  <tweet v-for="tweet in tweets" 
             v-bind:message="tweet" v-bind:author="username"></tweet>


Virtual DOM

Everything we’ve learned about Vue thus far has been primarily about syntax. Syntactical features like mustache templates, directives, and components greatly improve speed of code-writing and readability of code. However, these features don’t necessarily improve page speed, an essential issue all front-end frameworks need to address.

Behind the scenes, Vue uses a really cool data structure called a virtual DOM to vastly improve speed and responsiveness of Vue apps. The best way to introduce this topic is to see it in action, so we’ve created a short video to explain what a virtual DOM is and how it speeds up app performance. Check it out to learn how Vue apps render and respond to user actions so quickly.

Ex: video


 

Labels:

Comments

Post a Comment

Thank you :)

Popular posts from this blog

Laravel Commands

By
Laravale commands #Check route list php artisan route:list #Check upload files links php artisan storage:link #Check database connected or not php artisan db #Make Request file php artisan make:request YourNameRequest #Make Controller #(In this statement you used -r -> resources and -m -> model. It will create CustomersController and Customers Model files) php artisan make:controller CustomersController -r -m Customers #Make Resource file php artisan make:resource CustomersResource #To check migration files status that those files are running or not with below commands php artisan migrate:status #To check if there is any pending migrate files to run #(also this command shows us the mysql query before running migration file) php artisan migrate --pretend #To make a database table (in this example Products name as taken) php artisan make:migration create_products_table #To create a Request file php artisan make:request StoreProductRequest php artisan make:request Up...
Post a Comment
Read more

Mysql columns creation in laravel

By
List of columns  $table->id(); // increment value $table->string('title')->comment('this is blog title'); $table->string('slug')->unique(); $table->text('short_desc'); $table->longText('description'); $table->boolean('is_published')->default(false); $table->integer('min_of_read')->nullable(true); $table->enum('status', ['Active', 'Inactive']); $table->float('discount'); $table->smallInteger('type_id'); $table->date('start_date')->nullable(); $table->timestamps(); $table->foreign('created_by')->references('id')->on('users'); // introducing foreign key $table->unsignedBigInteger('user_id'); //? $table->decimal('latitude', 9, 6)->nullable(true); // Let's say you want starting value from 1000 $table->id()->from(1000); // increment value start from 1000 ->nullabl...
Post a Comment
Read more

React Advanced JSX

By
 class vs className This lesson will cover more advanced JSX. You’ll learn some powerful tricks and some common errors to avoid. Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for. The most frequent of these involves the word class. In HTML, it’s common to use class as an attribute name: <h1 class = "big" > Title </h1> In JSX, you can’t use the word  class ! You have to use  className  instead: <h1 className = "big" > Title </h1> This is because JSX gets translated into JavaScript, and  class  is a reserved word in JavaScript. When JSX is  rendered , JSX  className  attributes are automatically rendered as  class  attributes. Self-Closing Tags Another common JSX error involves  self-closing tags . What’s a self-closing tag? Most HTML elements use two tags: an  opening tag  ( <div> ), and a  closing tag  ( </div> ). However, som...
Post a Comment
Read more