vue 调用原生js页面不显示内容

2024-11-01

当vue.js与其他js文件同时引用导致页面不显示的问题

作为一个萌新,昨天学习的过程中遇到了vuejs与其他js在共同页面时引用时冲突的问题具体如下虽然注意到了前后顺序,但是页面还是出不来东西我知道现实开发中可能不是这么引用,但是学习中是这么引入的,出现这样的问题该怎么解决呢,答案就是在引用其他js文件的时候加入页面就正常引用到了js文件了! 小坑不断,持续学习!

原理和过程1.页面滚动加载事件2.获取元素在页面里的top值根据滚动条的位置判断何时显示图片3.获取元素集合加载过的图片从集合里删除效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-

js 获取浏览器显示内容的宽度和高度

js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高度 */ function getViewHeight() { if (window.innerHeight != window.undefined) return window.innerHeight; if (document.compatMode == 'CSS1Compat') return

vue使用原生js实现滚动页面跟踪导航高亮

需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换. 我使用的方法是在定位元素上添加id,在导航添加 html结构 main.vue <template> <div class="qz-home"> <div class

原生js dom记忆的内容

1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelectorAllgetAttributesetAttributeremoveAttribute domobj.tagNamedomobj.innerHTML innerHTML与innerText的区别.http://akunamotata.iteye.com/blog/440863domobj.idd

深入刨析tomcat 之---第1篇,解决第1,2章bug 页面不显示内容Hello. Roses are red.

writedby 张艳涛, 第一个问题是不显示index.html网页 19年才开始学java的第二个月,就开始第一遍看这本书,我估计当初,做第一章的一个案例,自己写代码,和验证就得一天吧,当初就发现了这个问题,chrome浏览器不显示localhost:8080/index.html页面,还特意在培训班的课堂上问了下,老师说是web服务器没有写http头,这个老师一眼就看出来了,还行;但通过ie浏览器就没这个问题,真是服气了~~~ 先贴下解决这个问题的代码 package com.zyt.to

scrollReveal.js – 页面滚动显示动画JS

简介和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次: WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 animate.css ,但它的动画也是用 CSS3 创建的,所以它不支持

深入刨析tomcat 之---第2篇,解决第3章bug 页面不显示内容http://localhost:8080/servlet/ModernServlet?userName=zhangyantao&password=1234

writedby 张艳涛7月2日, 在学习第4张的过程中,发现了前一篇文章写的是关于1,2张的bug不用设置response响应头,需要在servlet的service()方法里面写是错误想 servlet是tomcat的容器内的居住者,主要功能在于交互式地浏览和生成数据,生成动态Web内容,但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器.那么这个servlet实际上是基于http协议的响应体的实现,可以这么说,servlet本质上是对于一个http请求的响应,servl

Vue结合原生js实现自定义组件自动生成

就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…).这又是为何呢,下一

EasyNVR流媒体服务器网页兼容调试：ie浏览器下的接口调用成功但页面无法显示实时的数据

许多问题很难在开发的过程中就想的面面俱到,都是在实际应用.调试的过程中一一的优化的.由于easynvr的受众越来越多,因此也出现了好多在开发之初并没有留意的一些细节.我这次发现的问题就是给客户远程解决问题过程中发现的.在此记录下来方便自己,也方便大家了解. 问题概述使用过easynvr的都知道,easynvr是通过通道配置来接入摄像头的,这些通道配置.通道展示--都是通过接口的调用来完成的.理论上,只要调用接口返回成功码,就表示该接口调用成功,后续操作得以进行. 接下来就是见证奇怪的时刻:在给

原生js倒计时和显示当前时间

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>当前时间显示 </title> </head> <body onload="startTime()"> <div id="t

js页面实时显示时间

1.通过getMonth()实现获取月份,从0开始计数,需要+1: 2.通过getDay()实现获取星期天数,从0开始,0表示星期日: 3.通过getDate()获取日期. 4.setTimeout(time1,1000); 1秒 5.在div中显示<div id="inn"></div>,使用.innerHTML实现赋值: 在使用<input id="inn" type="text" />,使用.valu

ios开发之 --调用系统的页面，显示中文

在开发的过程中,我们会接入很多的sdk,比如相机,相册,是否允许获取位置等,大多数的情况下是默认显示英文, 在plist文件里面添加一个key就可以了,如下图: key:Localization native development region value:可以选 China 这样的话就可以了!

原生js制作标题与内容保持4行的效果

在制作网页或移动端有时会用到一个效果,类似文章标题和文章描述的排列总是保持一样的行数,要么标题总是一行,多出的省略,要么标题内容1:3或2:2或3:1这样,今天练习这样的效果. 实现的原理:给标题和内容分别加上行高,获取标题的高度除以自身的行高,得知标题的行数,再分配内容的行数即可. <style> *{padding: 0;margin: 0; font-family: 'Microsoft Yahei'} .book{ width: 320px; border: 1px solid #cc

原生js动态创建文本内容的几种方式

1.通过CreateTextNode文本节点首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <script>

Hystrix Stream的监控页面不显示内容

打开Hystrix Stream页面,进入后,发现只有一行Unable to connect to Command Metric Stream. 因为springboot的默认路径不是 "/hystrix.stream",在启动类中加入如下代码 @Bean public ServletRegistrationBean getServlet() { HystrixMetricsStreamServlet streamServlet = new HystrixMetricsStreamSe

BootStrap tabs标签使用fade效果首次加载页面不能显示内容

<div class="tab-pane active fade" id="home"> <div class="alert alert-success fade in" id="success" style="width: 98%; margin: auto"> <button type="button" class="close" d

ionic-native-transitions调用原生页面切换实现ionic路由切换

废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic的的页面切换插件,主要功能是可以让我们在不改变ionic路由的情况下,实现调用原生的页面切换,从而提升App性能.还可以让原生页面切换和ionic页面切换同时存在. ionic-native-transitions演示图片: ionic-native-transitions github地址 :

调用save()方法,页面显示保存成功,但是数据库中没有值的原因

在DAO层调用save()方法,页面上显示成功,但是在数据库中查找时发现数据没有保存到数据库中的原因可能是: 1.Service层中是否在调用DAO层中的save()方法之前添加注解@Transactional,凡是对数据库的更新操作都要加上该句注解. 2.查看项目中的WEB-INF文件夹下面的application.xml文件,看看<tx:annotation-driven transaction-manager="transactionManager"/>标签中是否缺少

常用原生JS函数和语法集合

luoyishan-2017-10-08 1. 输出语句:document.write(""); 2. JS中的注释为// 3. 传统的HTML文档顺序是:document->html->(head,body)4. 一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5. 得到表单中元素的名称和值:document.getElementById("表单中元素的ID号"

vue实现实时监听文本框内容的变化（最后一种为原生js）

一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello vue</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body