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 ...
随机推荐
- 常用Shell脚本命令(备忘)
此处纪录一些个人常用的Shell命令,留作复用 Linux 必备软件 Tmux 终端复用神器 zsh 无比强大Shell运行环境 oh my zsh 搭配zsh食用 uGet Linux下载工具 Do ...
- asyncio异步IO——Streams详解
前言 本文翻译自python3.7官方文档--asyncio-stream,译者马鸣谦,邮箱 1612557569@qq.com.转载请注明出处. 数据流(Streams) 数据流(Streams)是 ...
- 第一个 java 程序
java程序的运行机制 JVM实现了跨平台 JDK > JRE > JVM java Development Kit(JDK)包含:JRE,以及增加编译器和调试器等用于程序开发的文件 Ja ...
- C# List集合去重使用lambda表达式
name age sex Lucy 22 woman Lily 23 woman Tom 24 man Lucy 22 woman Lily 23 woman LiLei 25 man List< ...
- AD域安装及必要设置
本文主要介绍AD域的安装和程序开发必要的设置. 一.安装AD域 运行dcpromo命令,安装AD域. 步骤: 1.win+R 2.dcpromo 图例: 百度百 ...
- centos7配置静态ip地址
1.配置文件所在目录为 /etc/sysconfig/network-scripts cd /etc/sysconfig/network-scripts 2.打开配置文件进行修改,建议在修改之前先备份 ...
- Blink: How Alibaba Uses Apache Flink
This is a guest post from Xiaowei Jiang, Senior Director of Alibaba’s search infrastructure team. Th ...
- python之log
#!/usr/bin/python # -*- coding: UTF- -*- ''' ''' import logging # 设置输出文件.文件格式和日志级别 logging.basicConf ...
- python之json模块
#!/usr/bin/python # -*- coding: UTF- -*- ''' )序列化相关 json pickle (序列化是指将) 序列化是指将一个字符串转换成基础数据类型或者基础数据类 ...
- android 图片上传图片 报Socket: Broken pipe
上传图片的时候报如下错误: 上传失败的原因是服务器限制了文件上传的大小.让服务端改一下配置文件就好了