Vue js Standalone

https://www.javatpoint.com/vue-js

Standalone Script

Vue can be used as a standalone script file - no build step required! If you have a backend framework already rendering most of the HTML, or your frontend logic isn't complex enough to justify a build step, this is the easiest way to integrate Vue into your stack. You can think of Vue as a more declarative replacement of jQuery in such cases.

Vue also provides an alternative distribution called petite-vue that is specifically optimized for progressively enhancing existing HTML. It has a smaller feature set, but is extremely lightweight and uses an implementation that is more efficient in no-build-step scenarios.


<html>

  <head>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

  </head>

  <body>

    <div id="app">

      <p>{{ message }}</p>

    </div>

    <script>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js 123!'

}

})

</script>

  </body>

</html>



Using CDN

We can also start using VueJS file from the CDN library. The link https://unpkg.com/vue will give the latest version of VueJS. VueJS is also available on jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) and cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).

We can host the files at our end, if required and get started with VueJS development.

Example 1:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>My first Vue app</title>  
  5.   <script src="https://unpkg.com/vue"></script>  
  6. </head>  
  7. <body>  
  8.   <div id="app">  
  9.     {{ message }}  
  10.   </div>  
  11.   <script>  
  12.     var app = new Vue({  
  13.       el: '#app',  
  14.       data: {  
  15.         message: 'Vue.js example with CDN'  
  16.       }  
  17.     })  
  18.   </script>  
  19. </body>  
  20. </html>  


Check the version of your installed Vue.js

If you are already familiar with Node.js and have installed Vue.js CLI on your system, you can check the version of your installed Vue.js using the following command on your Node.js command prompt:

  • Open the Node.js command prompt and run the following command:
  1. vue --version  


Mine - 2.9.6 (June 5 2022)

Stable release3.2.33 / 14 April 2022

Vue.js Conditions & Loops

Conditions and Loops are used in all programming languages to provide repetitive control structures. They can repeat one or more various steps depending on the conditions. Same we can use in the case of Vue.js

.

v-if Directive Example

  1.         <div id="app">  
  2. <span v-if="seen">This is visible to you</span>  
  3.         </div>             




v- for Directive Example

The v-for directive is used to display a list of items using the data from an Array. See the following example.

  1. <div id="app-4">  
  2.   <ol>  
  3.     <li v-for="todo in todos">  
  4.       {{ todo.text }}  
  5.     </li>  
  6.   </ol>  
  7. </div>  


Index.js file:

  1. var app4 = new Vue({  
  2.   el: '#app-4',  
  3.   data: {  
  4.     todos: [  
  5.       { text: 'HTML Tutorial' },  
  6.       { text: 'CSS Tutorial' },  
  7.       { text: 'JavaScript Tutorial' },  
  8.       { text: 'AngularJS Tutorial' },  
  9.       { text: 'Vue.js Tutorial' }  
  10.     ]  
  11.   }  
  12. })  


Output:

    

  1. HTML Tutorial
    2. 

  2. CSS Tutorial
    3. 

  3. JavaScript Tutorial
    4. 

  4. AngularJS Tutorial
    5. 

  5. js Tutorial
    6.



Handling User Input

The v-on directive facilitates users to interact with your Vue.js app. It is used to attach event listeners that invoke methods on Vue instances. Let's see an example of v-on directive.

v-on Directive Example

  1.             <p>{{ message }}</p>  
  2.             <button v-on:click="reverseMessage">Click Here to Reverse Message</button>  


v-model Directive Example

The v-model directive is used to make two-way data binding between form input and app state. See the following example:

  1.   <input v-model="message">  


  1.  data: {  
  2.     message: 'Two way data binding!'  
  3.   }  



Composing with Components

The component system is used when we want to build large-scale applications composed of small, self-contained, and often reusable components. A large application interface can be abstracted into a tree of components:

Vue.js Conditions & Loops

Here, we use the v-bind directive to pass values in repeated component. See the following example:

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>        
  7.         <div id="app">  
  8.   <ol>  
  9.     <todo-course  
  10.       v-for="course in courseList"  
  11.       v-bind:todo="course"  
  12.       v-bind:key="course.id"  
  13.     ></todo-course>  
  14.   </ol>  
  15. </div>          
  16.         <script src="index.js"></script>  
  17.     </body>  
  18. </html>  

Index.js file:

  1. Vue.component('todo-course', {  
  2.   props: ['todo'],  
  3.   template: '<li>{{ todo.text }}</li>'  
  4. })  
  5. var app = new Vue({  
  6.   el: '#app',  
  7.   data: {  
  8.     courseList: [  
  9.       { id: 0, text: 'Java' },  
  10.       { id: 1, text: 'PHP' },  
  11.       { id: 2, text: 'Angular' },  
  12.       { id: 3, text: 'Vue.js' }  
  13.     ]  
  14.   }  
  15. })  

Output:

Vue.js Conditions & Loops


Vue.js Instance

To start a Vue application, you have to create a new Vue instance by using the Vue function. Whenever we create a new Vue project, the Vue instance gets activated by default in the main.js file. It is also called a root Vue Instance.

Syntax:

  1. var vm = new Vue({  
  2.   // options  
  3. })  


Vue's application design is inspired by the MVVM pattern. As a convention, we have to use the variable vm (short for ViewModel) to refer to our Vue instance. When you create a Vue instance, you have to pass in an options object. In this article, you will learn how you can use these options to create your desired behavior.

A Vue application contains a root Vue instance created with a new Vue. It is organized into a tree of nested and reusable components. For example, if you create a todo app, then its component tree might look like the following image:


Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>         
  7. <div id = "app">  
  8.          <h1>Firstname : {{firstname}}</h1>  
  9.          <h1>Lastname : {{lastname}}</h1>  
  10.          <h1>{{mydetails()}}</h1>  
  11.       </div>  
  12.         <script src="index.js"></script>  
  13.     </body>  
  14. </html>  


Index.js file:

  1. var  vm = new Vue({  
  2.    el: '#app',  
  3.    data: {  
  4.       firstname : "Albert",  
  5.       lastname : "Pinto",  
  6.       address : "Las Vegas"  
  7.    },  
  8.    methods: {  
  9.       mydetails : function() {  
  10.          return "I am "+this.firstname +" "+ this.lastname +" from "+ this.address;  
  11.       }  
  12.    }  
  13. })

Vue Instance Lifecycle Hooks

Every Vue instance goes through a series of initialization steps. When you create an instance, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. This process is known as the lifecycle of a Vue instance.

Lifecycle Diagram of the Vue Instance

Vue.js Instance

Explanation of Vue Instance Lifecycle Hooks

Following is the list of all events or hooks a Vue instance goes through. There are eight lifecycle events/methods or hooks for Vue.js Instance Lifecycle:

  1. Before create hook
  2. Created hook
  3. Before mount hook
  4. Mounted hook
  5. Before update hook
  6. Updated hook
  7. Before destroy hook
  8. Destroyed hook



beforeCreate() hook: The beforeCreate() hook is the first event or hook that occurs in the creation process. It facilitates developers to perform actions even before the component has been added to the DOM. We cannot access the DOM inside of this event. In this hook, the data is still not reactive and events that occur during the component's lifecycle have not been set up yet.

created() hook: The created() hook is used to run the code after creating the instance. It facilitates you to access the reactive data, but the mounting or rendering of templates and Virtual DOM is not completed yet. In this hook, events are active and access to reactive data is enabled though templates have not yet been mounted or rendered.

beforeMount() hook: The beforeMount() hook is used to execute just before the initial render happens and after the template or render functions have been compiled. It is invoked after the template has been compiled and the virtual DOM updated by Vue. This is the rarely used event, and in most cases, you don't need to use this event.

mounted() hook: The mounted() hook is the most frequently used event or hook. This hook provides you full access to the reactive component, templates, and rendered DOM In this hook; you have full access to the reactive component, templates, and rendered DOM.

beforeUpdate() hook: The beforeUpdate() hook is executed just before the data changes on the component and the update cycle's start. It runs right before the DOM is patched and re-rendered.

updated() hook: The updated() hook is used to execute after the data changes on the component and the DOM re-renders. If you want to access the DOM after a property change, it is the best place to complete this action.

beforeDestroy() hook: The beforeDestroy() hook is used to execute just before tearing down the instance. This is the second last step of the Vue Instance life process and is the right place to clean up events or reactive subscriptions if you have to do this.

destroyed() hook: The destroyed() hook is the last step of the Vue.js Instance life process and used to do any last minute clean up.

Vue.js Template

In the previous Vue.js Instance chapter, we have learned how to get an output in the form of text content on the screen. In this chapter, we will learn how to get an output in the form of an HTML template on the screen. Vue.js uses an HTML-based template syntax that facilitates Vue.js developers to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js

templates are valid HTML that can be parsed by spec-compliant browsers and HTML
parsers.

If you choose the simple interpolation method i.e., with double curly brackets to display the HTML content on the web browser, it will show the wrong result.

Let's take a simple example and see the output to understand this concept well..

When we assign v-html directive to the html element, Vue.js knows that it has to output it as HTML content

  1.          <div  v-html>{{htmlcontent}}</div>  
  1. data: {  
  2.       htmlcontent : "<div><h1>This is Vue.js Template Example</h1></div>"  
  3.    }  










-----------------------------------------------------------------------------------------------------------

Demo Code

<html>  

<head>  

  <title>My first Vue app</title>  

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  

</head>  

<body>  

  

  <div id="app">  

   <button v-on:click="reverseMessage">Click Here to Reverse Message</button>  

<br/> 

  

  <ol>  

    <li v-for="todo in todos">  

      {{ todo.text }}  

    </li>  

  </ol>

  <br/> 

  <span>two way data binding</span><br/> 

    <input v-model="message">  

<br/> 

  {{seen}}

  <br/> 

    {{ message }} 

<br/> 

<span v-if="seen">This is visible to you</span> <br/>

 <span v-bind:title="message">  

    Hover mouse over me for a few seconds  

    and see a dynamically bound title which I have set!  

  </span>  

  </div>  

              


  <script>  

  

  Vue.component('todo-course', {  

  props: ['todo'],  

  template: '<li>{{ todo.text }}</li>'  

})  


    var app = new Vue({  

      el: '#app',  

      data: { 

courseList: [  

      { id: 0, text: 'Java' },  

      { id: 1, text: 'PHP' },  

      { id: 2, text: 'Angular' },  

      { id: 3, text: 'Vue.js' }  

    ],   

  todos: [  

      { text: 'HTML Tutorial' },  

      { text: 'CSS Tutorial' },  

      { text: 'JavaScript Tutorial' },  

      { text: 'AngularJS Tutorial' },  

      { text: 'Vue.js Tutorial' }  

    ],  

  seen: true,

    message: 'You loaded this page on ' + new Date().toLocaleString()  

      },

  methods: {  

    reverseMessage: function () {  

      this.message = this.message.split('').reverse().join('')  

    }  

  }  

  

    })  

  </script>  

</body>  

</html>  


Comments

Post a Comment

Popular posts from this blog

tech note

Checking of Management Portal credentials should happen through API or direct in the existing application. If the account was not found, ? ( where to check this) then the browser should POST the same username/password over to the Management Portal via a JS POST. ( Which Api ) This page will likely be a modified version of the existing page to be easier to integrate to the login html application, and ideally should accept JSON payload posts and respond with JSON. If we can use the exact same login page control and simply check the payload before doing the normal load to know what “mode” it’s being requested to operate in. So if the content type is application/json, then we know to check the body as JSON to get the username and password to validate against DNN. The existing DNN/Management Portal authentication process will be used, if successful then then user will be authenticated, and the back end code will migrate the users by posting a registration request to the API, which will ad...
Read more