vue

vue项目中使用sass、less

  • Post author:
  • Post category:vue

一、安装 在命令行中进入项目的根目录下执行：npm isntall node-sass sass-loader --save-dev就能给项目安装 node-sass和sass-loader 但可能会存在版本问题，可以通过固定安装版本来解决： cnpm install node-sass@4.13.0 sass-loader@8.0.0 --save-dev 二、使用 在页面或者组件的style标…

继续阅读 vue项目中使用sass、less

vue 项目打包dist目录下index.html打开空白解决办法

  • Post author:
  • Post category:vue

config 文件下面的index.js build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', &l…

继续阅读 vue 项目打包dist目录下index.html打开空白解决办法

Vue中v-for添加key的作用

  • Post author:
  • Post category:vue

key值可以用于提高v-for的渲染性能.当数据发生变化的时候,vue会将新的虚拟dom与旧的虚拟dom使用diff算法进行对比。 如果key值不同,vue不复用元素而是就地更新，只有key值相同,vue才会考虑复用，一般开发中key值会优先设置为id ,如果没有id才会设置下标, 因为默认key就是下标,当数组长度发生变化的时候, 下标也会变化, 就会导致key值也发生变化, 就不会复用 版权声…

继续阅读 Vue中v-for添加key的作用

【VUE】websocket重连__Vue.js

  • Post author:
  • Post category:vue

场景描述 手机锁屏后大约60秒， IOS 会自动断开 websocket 连接，连接丢失了，那我们的数据也就断了 解决办法 第一步：安装依赖包 npm install --save reconnecting-websocket 第二步：需要用到的页面引用 import ReconnectingWebSocket from 'reconnecting-websocket'; 第三步：使用 将 Web…

继续阅读 【VUE】websocket重连__Vue.js

第八章、Vue3中的组件通信方式

  • Post author:
  • Post category:vue

示例： options API演示 一、父子组件通信： props / emit // parent.vue <template> <Foo :msg="msg" :state="state" @modifyMsg="modifyMsg" /> </template> const msg = ref('Hello World') const modifyMsg …

继续阅读 第八章、Vue3中的组件通信方式

vue中el-image-viewer大图预览 给 v-html 添加 onclick 拦截事件

  • Post author:
  • Post category:vue

直接当前页面引入 ElImageViewer css引入为了正常显示 import ElImageViewer from 'element-ui/packages/image/src/image-viewer' import 'element-ui/lib/theme-chalk/index.css'; import imageViewMixins from '@/views/mixins/ima…

继续阅读 vue中el-image-viewer大图预览 给 v-html 添加 onclick 拦截事件

Vue使用ElementUI对table的指定列进行合算

  • Post author:
  • Post category:vue

前言 最近有一个想法，就是记录自己花销的时候，table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。 然后我就顺着elementui的table组件寻找相关的demo，还真发现了一个这样的demo。 对于这个demo，官方是这么描述的： 将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计…

继续阅读 Vue使用ElementUI对table的指定列进行合算

vue3实现上下无缝滚动效果

  • Post author:
  • Post category:vue

此处以html文件为例，参考了 javascript实现无缝上下滚动特效这个案例 对其进行了部分修改，让其更衔接更加自然，需要注意的是要给主容器添加一个定位属性，不然会跳动闪烁特别的明显。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-eq…

继续阅读 vue3实现上下无缝滚动效果

【译】如何使用Vue捕获网络摄像头视频

  • Post author:
  • Post category:vue

几个月前，我一直关注着比特币的爆发并且在 GDAX 网站上注册账号。在注册验证的过程中，网站提示要通过计算机的网络摄像头提交我自己的一张照片作为照片ID。这是一个很酷的做法，让我思考一个问题：在网络浏览器上集成网络摄像头使用需要怎么做？ 事实上，有一些HTML5的API可用于通过JavaScript与网络摄像头进行交互。 下面，我们来看下如何创建一个VueJS的Web应用，在Web浏览器上通过网络…

继续阅读 【译】如何使用Vue捕获网络摄像头视频

14-使用Vue来实现JQuery的动画效果

  • Post author:
  • Post category:vue

在学Vue之前学jQuery的时候，觉得jquery可能是最好用的，比JavaScript简洁了非常多，那段时间写的所有效果都用的jquery不管是轮播图还是页面效果，用jquery都可以轻松解决，但是随着Vue的学习，我发现代码可以越来越省，jquery还需要直接操作dom来改变具体样式，而Vue直接一个methods搞定，最直接的好处就是节省了大量的代码和时间。接下来用Vue实现了一个slid…

继续阅读 14-使用Vue来实现JQuery的动画效果