01 Vue+axios+SSE组件功能简绍

Vue前端框架

在前端开发中，经常要通过js代码来进行一些逻辑操作，最终还要把这些逻辑操作的结果展现在页面中，这需要我们通过操作DOM来完成。而Vue这种MVVM模式的框架，通过viewmodel实现数据双向绑定，让数据自动地双向同步，从而避免了操作DOM的过程。

第一个vue程序

1. 导入开发版本的Vue.js

2. 创建Vue实例对象，设置 el 属性和 data 属性

3. 使用模板语法把数据data渲染到页面

el 挂载点：

el是用来设置Vue实例挂载的元素

Vue会管理 el 选项命中(通过id、class等)的元素及其内部的后代元素

可以使用其他的属性选择器，但是建议使用ID选择器

可以使用其他的双标签，不能使用HTML和BODY

data数据对象：

Vue框架中需要渲染到页面上的数据都定义在data当中

data中可以书写复杂类型的数据，比如数组

渲染复杂类型数据时，遵守js的语法即可

vue指令

vue指令是以v-开头的一组特殊语法，用于vue框架的数据渲染

1. v-text指令

v-text指令的作用是设置便签的内容

默认写法会替换全部内容，使用插值表达式{ {}}可以替换指定内容

内部支持写表达式

2. v-html指令

v-html指令的作用是设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么，只会解析为文本

解析文本使用v-text，需要解析html结构使用v-html

3. v-on指令

v-on指令的作用是为某个元素绑定js事件

事件名不需要写on

指令可以简写为@

绑定的方法会被定义在methods属性当中

方法内部通过this关键字可以访问到定义在data当中的数据

4. v-show指令

v-show指令的作用是根据表达式的真假切换元素的显示状态

原理是修改元素的display，实现显示和隐藏

指令后面的内容，最终都会被解释为布尔值

值为true元素显示，值为false元素隐藏

数据改变后，对应元素的显示状态会同步更新

5. v-if指令

v-if指令的作用是根据表达式的真假的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式值为true，元素存在于dom树当中，为false，则从dom树中移除

频繁的切换v-show，反之使用v-if，前者的切换消耗小

6. v-bind属性

v-bind指令的作用是动态设置元素的属性

完整的写法为 v-bind:属性名="data变量名"

简写为 :属性名="data变量名"

需要动态增删class建议使用对象的方式

7. v-for指令

v-for指令的作用是根据数据生成列表结构

数组经常和v-for结合使用

语法是 (item, index) in 数据

item和index可以结合其他指令一起使用

数组长度会同步更新到页面上，是响应式的

8. v-on指令补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接受传入的实参

事件后面跟上.修饰符可以对事件进行限制，比如.enter是回车事件，可以绑定到某个dom元素上

事件修饰符有多重

9. v-model指令

v-model指令的作用是便捷的设置和获取表单元素的值，双向数据绑定

绑定的data数据会和表单的页面值相关联

绑定的数据<-->表单元素的值

axios网络请求库

axios的主要作用是实现从给定的url地址当中获取数据或者是向给定的url地址传送数据

axios应用于vue的注意事项

axios回调函数中的this已经改变，无法通过this访问到data当中的数据

解决：将this保存起来，回调函数中直接保存的this即可

SSE技术

主流的Web端即时通讯方案大致有4种：传统Ajax短轮询、Comet技术、WebSocket技术、SSE（Server-sent Events）

相关优缺点和特性：web端即时通信

前端内容：

<!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>

01 Vue+axios+SSE组件功能简绍

Vue前端框架

第一个vue程序

vue指令

axios网络请求库

axios应用于vue的注意事项

SSE技术

猜你喜欢