首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【实战记录】WebSocketvue2中的使用

---- 感觉有帮助的小伙伴请点赞鼓励一下 ~ 什么是WebSocket 官方说, WebSocket 是 HTML5 开始提供的一种单个 TCP 连接上进行全双工通讯的协议。... WebSocket 出现之前,我们要获取服务端的数据只能通过 客户端向服务端发送请求,服务端接到请求后返回数据,但是这样有一个很明显的缺点就是那些需要 频繁接收数据 的场景就需要不断的向服务端发送请求...("show",args); 如何在vue中使用socket.io 首先安装依赖 npm i vue-socket.io --save npm i socket.io-client --save 然后...", { transports: ["websocket"],//默认使用的请求方式 autoConnect: false,//是否自动连接 }), }) ); 组件中使用...$socket.open() }, 也别忘了组件销毁的时候手动断开连接,不然就只有客户端关闭的时候才会默认断开 beforeDestroy () { this.

2.5K20

vue2

-- 我们在这里引入vue而不是选择head标签引入vue是因为代码 的加载顺序,如果将其放在head内则会先加载vue,如果在网速较慢时页面的加载速度很慢,如果 将其放在下面,就会先加载body内的内容...} ] } }) 循环指令案例 需求描述 模仿留言框做一个输入框,可以输入数据,当提交后数据会显示留言框的下方...例子:两个input框,向两个框内输入不同的数字,第三个框显示前两个框的数字之和。...监听方法不需要返回值 2.监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法 3.监听方法有两个回调参数:当前值,上一次值 应用场景:当多个变量值依赖于一个变量值的改变而改变时使用 例子:input...用于标示被拖起的对象不允许光标的当前位置被放下。 not-allowed禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 pointer(hand)竖起一只手指的手形光标。

5.4K20

Vue2 源码解析

DOM,将它们放入常量中,这样重新渲染和 patch 的时候能直接跳过它们) 4、render 方法的原理 前文提过,Vue 将模板编译为 AST 并且优化之后,会将 AST 转换成虚拟 DOM...渲染时组件也拥有独立的 Vue 实例,父实例渲染的时候只会生成一个占位虚拟 DOM,组件的渲染则由组件自行完成 五、实现细节 1、v-model 双向绑定 将双向绑定拆开来看,有两个方向的变化需要处理... Vue 中,双向绑定是通过 v-model 指令来实现的,但是这个指令 1.0 和 2.0 中的实现原理差别比较大。...按上面的常识,JS 操作完 DOM 后,DOM 的渲染、更新是微任务中的。...当模块被安装的时候,npm 会自动全局或者 node_modules/.bin 下生成命令行脚本。

1.1K42

Vite 搭建 Vue2 项目(Vue2 + vue-router + vuex)

写本文时 Vite 没有提供 Vue2 的创建方式。 相信有些开发者还没开始学 Vue3,但又想尝尝 Vite。那可以参考本文的进食方式。 如果心急的话,“0、简介” 可以跳过。...0、简介 写本文时,Vite 默认不提供 Vue2 项目的创建方式。 使用 Vite 创建出来的 Vue 项目,暂时都是 Vue3 的。 Vite 是构建工具的高阶封装。...项目 写本文时,Vite 默认没提供 Vue2 项目创建的选项。...如果后面 vue3 全面更新了,需要安装 vue2 的话,需要在以上命令加上版本号。 1.4、修改项目文件依赖关系 1.4.1、创建 src 目录 项目根目录下创建 src 目录。...image.png 3、安装 vuex 3.1 安装 npm install vuex --save 写本文时,使用以上命令安装的 vuex 是支持 Vue2 项目的。

6.5K62

vue2使用animate css

vue2使用animate css 先上几个链接 vue插件大集合:awesome-vue vue2插件: vue2-animate:vue2-animate vue2插件vue2-animateDEMO...: vue2-animatedemo:vue2-animate-demo 我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库,但是我想在vue2中使用animatecss却是很麻烦的事...其实vue的官网上使用过度的时候就说过和animate配合很好什么的bulabula,但是要是用的话也好麻烦,还要自己根据过度类名的写法写css,或者绑定一堆属性, 但是但是,今天翻awesome-vue...使用vue2-animate 其实直接看他的github就非常快了 这里简单地复述一遍 安装 安装的方式有很多种 1> html文件中直接引用从github上下载的资源 2>如果使用webpack并且用对了css-loader可以使用npm 安装 npm安装包依赖 npm install --save vue2-animate main.js

80610

Vue2笔记

{{ }} 插值表达式:实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容! v-html 指令的作用:可以把带有标签的字符串,渲染成真正的 HTML 内容! 2.... vue 中,可以使用 v-bind: 指令,为元素的属性动态绑定值; 简写是英文的 : 使用 v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如: <div...v-show 性能会更好 v-if 的原理是:每次动态创建或移除元素,实现元素的显示和隐藏 如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时 v-if 性能更好 实际开发中...v-if 指令使用的时候,有两种方式: 直接给定一个布尔值 true 或 false 被 v-if 控制的元素 给 v-if 提供一个判断条件,根据判断的结果是...计算属性 特点: 定义的时候,要被定义为“方法” 使用计算属性的时候,当普通的属性使用即可 好处: 实现了代码的复用 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!

1.9K20
领券