nuxt.js实战之window和document对象的使用
在开发nuxt项目的时候,我们难免会使用到document来获取dom元素。如果直接在文件中使用就会报错。这是因为document是浏览器端的东西服务端并没有。
解决方法:
我们只需要在使用的地方通过process.browser/process.server来判断
如下:
if (process.browser) {
let myVideo = document.getElementById('mini_video');
if (myVideo) {
if (!this.videoShow) {
myVideo.pause();
} else {
myVideo.play();
}
}
}
nuxt.js实战之window和document对象的使用的更多相关文章
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
- Window及document对象的区别
一.Window对象 -------------------------------------------------- ------------------- 对象属性 window //窗户自身 ...
- js基础之DOM中document对象的常用属性方法
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
- Window及document对象
注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写 否则会提示你1个错误信息 "引用的元素为空或者不是对象" 一.Window对象 ---------- ...
- nuxt.js实战之引入jquery
head: { title: 'nuxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-widt ...
- nuxt.js实战之移动端rem
nuxt.js的项目由于是服务端渲染,通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷.由于设置字体的代码不能做服务端渲染,导致服务端返回的代码一开始没有相应的跟字体,直到与前端代码进行 ...
- nuxt.js实战之用vue-i18n实现多语言
一.实现步骤 1.安装vue-i18n并且创建store.js(vuex状态管理)文件 2.创建一个(middleware)中间件,用来管理不同的语言 3.创建不同语言的json文件作为语言包(例如: ...
- nuxt.js实战踩坑记录
读万卷书不如行万里路,必须实践出真理! 看官方文档安装项目vue init nuxt-community/starter-template <project-name>注意:这是新手项目不 ...
- nuxt.js实战之开发环境配置
一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用np ...
随机推荐
- MongoDB副本集及C#程序的连接配置
1.副本集 高可用是绝大多数数据库管理系统的核心目标之一.如果要想生产数据在发生故障后依然可用,就需要确保为生产数据库多部署一台服务器.MongoDB副本集提供了数据的保护.高可用和灾难恢复的机制. ...
- selenium-获取元素属性(六)
获取元素属性很简单,使用 get_attribute 方法即可 如下图 获取具体的属性直接将该属性名当作参数传入即可 若是获取值,则获取的实则是该元素的 value,需要将 value 当参数传入 i ...
- RabbitMQ广播:direct模式
一. 消息的广播需要exchange:exchange是一个转发器,其实把消息发给RabbitMQ里的exchange fanout: 所有bind到此exchange的queue都可以接收消息,广播 ...
- Redis学习笔记(2)——Redis的下载安装部署
一.下载Redis Redis的官网下载页上有各种各样的版本,如图 但是官网下载的Redis项目不正式支持Windows.如果需要再windows系统上部署,要去GitHub上下载.我下载的是Redi ...
- Docker Selenium
SeleniumHQ官方项目:https://github.com/seleniumHQ/docker-selenium 项目目前快速迭代中. Docker 一般叫docker容器,一个可爱的鲸鱼,上 ...
- 网络虚拟化基础一:linux名称空间Namespaces
一 介绍 如果把linux操作系统比作一个大房子,那命名空间指的就是这个房子中的一个个房间,住在每个房间里的人都自以为独享了整个房子的资源,但其实大家仅仅只是在共享的基础之上互相隔离,共享指的是共享全 ...
- 利用numpy+matplotlib绘图的基本操作教程
简述 Matplotlib是一个基于python的2D画图库,能够用python脚本方便的画出折线图,直方图,功率谱图,散点图等常用图表,而且语法简单.具体介绍见matplot官网. Numpy(Nu ...
- FM算法解析及Python实现
1. 什么是FM? FM即Factor Machine,因子分解机. 2. 为什么需要FM? 1.特征组合是许多机器学习建模过程中遇到的问题,如果对特征直接建模,很有可能会忽略掉特征与特征之间的关联信 ...
- centOS中mysql一些常用操作
安装mysqlyum -y install mysql-server 修改mysql配置vi /etc/my.cnf 这里会有很多需要注意的配置项,后面会有专门的笔记暂时修改一下编码(添加在密码下 ...
- mysql 5.7 json
项目中使用的mysql5.6数据库,数据库表一张表中存的字段为blob类型的json串数据.性能压测中涉及该json串处理效率比较低,开发人员提到mysql5.7版本后json串提供了原生态的json ...