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 ...
随机推荐
- Prometheus Operator 架构 - 每天5分钟玩转 Docker 容器技术(178)
本节讨论 Prometheus Operator 的架构.因为 Prometheus Operator 是基于 Prometheus 的,我们需要先了解一下 Prometheus. Prometheu ...
- Ehcache入门经典:第一篇
ehcache主要是轻量级的缓存实现 ehcache.xml <?xml version="1.0" encoding="UTF-8"?> < ...
- Linux内核的冷热缓存
缓存为什么会有冷热? 究其原因,是因为对于内存的访问,可能是CPU发起的,也可以是DMA设备发起的. 如果是CPU发起的,在CPU的硬件缓存中,就会保存相应的页内容.如果这个页本来没有存在于硬件缓存中 ...
- php+qrcode类+生成二维码方法
//生成二维码 public function qrcode() { $data = input(); if(!$data['param']){ return json(['code ' => ...
- GoldenDict词典的超级实用高级玩法----全文搜索功能
快捷键: Ctrl+Shift+F 菜单进入:搜索--全文搜索 模式:正则表达式 比如:我想知道地道的英文表达 请xx天/周/年假 给搜索框写入正则表达式 请(.)(天|周|年)假 就可以了 ...
- 虚拟机硬盘vmdk压缩瘦身并挂载到VirtualBox
这个问题其实困扰了挺久的,一直没闲情去解决,网上搜索过很多压缩方法感觉都太麻烦太复杂,因最近在windows上搞docker就一并解决了. 压缩vmdk 首先下载DiskGenius,这工具很牛X,相 ...
- 英语口语练习系列-C03-常用问句
连接到英语口语系列总分类 连接到上一章抱怨 枫桥夜泊 How are you doing?你好吗? 美国人见面时候最常用的打招呼方式: "Hey! How are you doing?&qu ...
- 关于 pyspider Web预览界面太小的解决方法
本人最近在学习pyspider时,遇到Web预览界面太小而无法很好的进行开发,于是在网上搜索解决方法. 准备: css代码: body{margin:;padding:;height:%;overfl ...
- kafka-rest:A Comprehensive, Open Source REST Proxy for Kafka
Ewen Cheslack-Postava March 25, 2015 时间有点久,但讲的还是很清楚的 As part of Confluent Platform 1.0 released ab ...
- Openwrt自定义CGI实现
此文已由作者吴志勐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 安装uhttpd. 在编译openwrt前,输入make memuconfig,查找Network -> ...