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 ...
随机推荐
- 微信小程序(七)文章详情页面动态显示
文章详情页面动态显示(即点击某个文章就跳转到相应文章的详情页): 思路:在文章列表页面添加catchtop事件,在js文件中获取文章的index,并用wx.navigateTo中的 url拼接详情页的 ...
- 关于测试:JUnit4课程
JUnit4课程 JUnit4快速入门 测试实践 1.导入jar(右键Build Path --> Add Libraries --> Junit --> Junit4) 2.新建测 ...
- 使用cmd查看电脑连接过的wifi密码(一)
有时总会忘记之前的wifi密码,这时候就需要查看wifi密码: 这个我就写了一个bat文件,方便下次使用,这里我添加了中文和英文的判断,主要是语言不同输出的信息不用,不说了直接上代码: @echo o ...
- httpservlet里单纯分页
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletExcep ...
- C#中的值类型和引用类型,深拷贝,浅拷贝
from https://www.jianshu.com/p/2d27b06e253f 一.C#中的值类型和引用类型 概念 值类型直接存储其值. 引用类型存储对值的引用. 说起来有些拗口,其本质是Va ...
- SQLServer之事务简介
事务定义 事务是单个的工作单元.事务是在数据库上按照一定的逻辑顺序执行的任务序列,既可以由用户手动执行,也可以由某种数据库程序自动执行. 事务分类 自动提交事务 每条单独的语句都是一个事务. 在自动提 ...
- php去掉字符串的最后一个字符
php去掉字符串的最后一个字符 //例如 $str = "12,34,56,"; $newstr = substr($str,0,strlen($str)-1); //从第一位开始 ...
- 第二节 pandas 基础知识
pandas 两种数据结构 Series和DataFrame 一 Series 一种类似与一维数组的对象 values:一组数据(ndarray类型) index:相关的数据索引标签 1.1 se ...
- Configuring Apache Kafka for Performance and Resource Management
Apache Kafka is optimized for small messages. According to benchmarks, the best performance occurs w ...
- 为什么要使用TypeScript开发Web应用程序
TypeScript仍然相对较新,但已经赢得了很多信徒.继续阅读,看看这种很酷的语言的一些最好的功能. 定义TypeScript TypeScript是由Microsoft Corporation开发 ...