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

目录

Vue前端框架

第一个vue程序

vue指令

axios网络请求库

axios应用于vue的注意事项

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>

 

 

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页