01 Brief introduction of Vue+axios+SSE component functions

table of Contents

Vue front-end framework

The first vue program

vue instruction

axios network request library

Precautions for axios applied to vue

SSE technology

---

Vue front-end framework

 In front-end development, it is often necessary to perform some logical operations through js code, and finally display the results of these logical operations on the page, which requires us to operate the DOM to complete. The Vue MVVM model framework realizes two-way data binding through viewmodel, allowing data to be automatically synchronized in two directions, thereby avoiding the process of operating the DOM.

The first vue program

1. Import the development version of Vue.js

2. Create a Vue instance object, set the el attribute and data attribute

3. Use template syntax to render data to the page

el mount point:

• el is the element used to set the Vue instance mount
• Vue will manage the elements hit by the el option (by id, class, etc.) and their internal descendant elements
• Other attribute selectors can be used, but ID selector is recommended
• Other double tags can be used, but HTML and BODY cannot be used

data data object:

• The data that needs to be rendered on the page in the Vue framework is defined in data
• Data can write complex types of data, such as arrays
• When rendering complex data, just follow the js syntax

vue instruction

The vue instruction is a set of special syntax beginning with v-, used for data rendering of the vue framework

1. v-text command

• The function of the v-text command is to set the content of the note
• The default wording will replace all content, and the specified content can be replaced by interpolation expression { {}}
• Support writing expressions internally

2. v-html command

• The function of the v-html instruction is to set the innerHTML of the element
• HTML structure in the content will be parsed as tags
• The v-text command will only be parsed as text , no matter what the content is
• Use v-text to parse text , and use v-html to parse html structure

3. v-on instruction

• The function of the v-on instruction is to bind js events to an element
• The event name does not need to be written on
• The instruction can be abbreviated as @
• The bound method will be defined in the methods attribute
• The data defined in data can be accessed through the this keyword inside the method

4. v-show command

• The function of the v-show command is to switch the display state of the element according to the true or false of the expression
• The principle is to modify the display of the element to achieve display and hide
• The content after the instruction will eventually be interpreted as a Boolean value
• The value of true element is displayed, the value of false element is hidden
• After the data is changed, the display status of the corresponding element will be updated synchronously

5. v-if instruction

• The function of the v-if instruction is to switch the display state of the element according to the true or false of the expression
• The essence is to switch the display state by manipulating the dom element
• The expression value is true , the element exists in the dom tree, if false , it is removed from the dom tree
• Frequent switching of v-show , and vice versa, use v-if , the former has a small switching cost

6. v-bind attributes

• The function of the v-bind instruction is to dynamically set the attributes of the element
• The complete wording is v-bind:attribute name="data variable name"
• Abbreviated as  : attribute name="data variable name"
• Need to dynamically add or delete classes, suggest using objects

7. v-for instruction

• The function of the v-for instruction is to generate a list structure based on the data
• Arrays are often used in combination with v-for
• The syntax is (item, index) in data
• item and index can be used in combination with other instructions
• The length of the array will be updated synchronously on the page, which is responsive

8. V-on instruction supplement

• Event binding method is written in the form of function call , you can pass in custom parameters
• When defining a method, you need to define formal parameters to accept the incoming actual parameters
• The event is followed by . Modifiers can limit the event. For example, enter is a carriage return event and can be bound to a certain dom element
• There are multiple event modifiers

9. v-model instruction

• The function of the v-model instruction is to conveniently set and get the value of the form element, two-way data binding
• The bound data data will be associated with the page value of the form
• Bound data <--> the value of the form element

axios network request library

The main function of axios is to obtain data from a given URL address or transmit data to a given URL address

Precautions for axios applied to vue

• The this in the axios callback function has been changed, and the data in data cannot be accessed through this
• Solution: save this, save this directly in the callback function

SSE technology

There are roughly 4 mainstream web-side instant messaging solutions: traditional Ajax short polling, Comet technology, WebSocket technology, SSE (Server-sent Events)

Related advantages, disadvantages and features: web-side instant messaging

Front-end content: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Server-sent events demo</title>
    </head>

    <body>
        <button>Close the connection</button>

        <ul></ul>

        <script>
            var button = document.querySelector('button');
            var evtSource = new EventSource('http://jiuyoung.cn:9000/stu/sse'); //后端的url
            console.log(evtSource.withCredentials);
            console.log(evtSource.readyState);
            console.log(evtSource.url);
            var eventList = document.querySelector('ul');

            evtSource.onopen = function() {
                console.log("Connection to server opened.");
            };

            evtSource.onmessage = function(e) {
                var newElement = document.createElement("li");
                newElement.textContent = "message: " + e.data;
                eventList.appendChild(newElement);
            };

            evtSource.onerror = function() {
                console.log("EventSource failed.");
            };

            button.onclick = function() {
                console.log('Connection closed');
                evtSource.close();
            };

            // evtSource.addEventListener("ping", function(e) {
            //   var newElement = document.createElement("li");
            //
            //   var obj = JSON.parse(e.data);
            //   newElement.innerHTML = "ping at " + obj.time;
            //   eventList.appendChild(newElement);
            // }, false);
        </script>

    </body>
</html>