Vue.js能做PC端单页式网站开发吗

JavaScript025

Vue.js能做PC端单页式网站开发吗,第1张

完全可以。

1、另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用,实现PC端单页式的前端开发。

2、PC端网站在不需要优先考虑SEO和首屏渲染时间时,单页式在用户体验和开发体验(开发效率)上是完胜多页式的。

3、vue.js作为主流框架之一,同样支持SSR,vue.js的PC端网站开发时服务端渲染编译比较慢,使用用单页式效率更高。

扩展资料:

主流框架Vue.js与angularjs的开发区别:

一、相同点:

都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

二、不同点:

1、AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

2、在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

3、Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说,这个优化差异还是比较明显的。

参考资料:vue.js官网-介绍-Vue.js

一、iframe框架调用

iframe框架调用相比js调用来说会简单一些。具体的代码如下:

<iframe src="IP" frameborder="0" scrolling="no" width="250px" height="250px" name="google" marginwidth="1" marginheight="1" scrolling="No" frameborder="0"></iframe>

1、将打算调用的页面文件上传到的网站根目录,或者某个特定的位置就可以了,在这里假定要调用的页面是:admeng250v250.htm。

2、在的调用模板文件中的body区里面添加iframe调用代码,就是上面的代码,可以复制上面方框中的代码。根据自己的需要修改尺寸、边框等功能,然后添加到模板网页中,修改保存,上传。

在iframe调用时的地址可以是绝对地址或者相对地址,编辑员可以根据自己的要求来进行了。这样打开的网站首页会看到打算调用的单页已经出现在网站的上面。

3、上面步骤就可以轻松地完成了首页的调用,当然也可以在其他页面修改模板文件,添加上调用的iframe语句就可以了。

二、JS调用

js调用步骤稍微多一些,先提供代码:

代码A:

<script languare="javascript" type="text/javascript" src="IP"></script>

代码B:

document.writeln("<iframe marginwidth=\"0\" maiginheight=\"0\" hspace=\"0\" vspace=\"0\" topmargin=\"0\" scrolling=\"no\" frameborder=\"0\" width=\"250\" height=\"250\" src=\"\/js\/ad250v250_1.htm\"><\/iframe>")

1、将打算调用的页面文件上传到的网站根目录,或者某个特定位置,这里假定需要调用的页面名称是:ad250v250_1.htm,也可以是其他任意文件名;

2、复制“代码A”中的代码,然后根据自己的需要进行修改,修改后的代码添加到的网页模板文件中的body区里。修改后保存,然后上传该模板网页。

3、新建一个文本文件,复制“代码B”到文本文件中,保存,命名为ad250v250_1.js(备注,名字可以是任意文件名,以英文字母或者数字最佳,对于文本文件来说去掉其中的“自动换行”功能,里面不允许换行,当打开JS文件时,用网页编辑器,直接用记事本是无法打开的)。

4、上传这个js文件到的网站根目录,或者特定位置。

coding

teambition

cloud9

注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情。它们的界面切换非常流畅,响应很迅速,跟传统的网页明显不一样,它们是什么呢?这就是单页Web应用。

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。(使用js控制渲染来替换html跳转)

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。

因此,对单页面应用来说,模块化的开发和设计显得相当重要。

原理:JS会感知到url的变化,通过这一点,可以用js动态的将当前页面的内容清除掉,然后将下一个页面的内容挂载到当前页面上,这个时候的路由不是后端来做了,而是前端来做,判断页面到底是显示哪个组件,清除不需要的,显示需要的组件。这种过程就是单页应用,每次跳转的时候不需要再请求html文件了。

单页面应用的优缺点:

优点:

1、用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作。

2、适合前后端分离开发,服务端提供http接口,前端请求http接口获取数据,使用JS进行客户端渲染。

缺点:

1、首页加载慢

单页面应用会将js、 css打包成一个文件,在加载页面显示的时候加载打包文件,如果打包文件较大或者网速慢则用户体验不好

2、SEO不友好

SEO(Search Engine Optimization)为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好,所以使用单页面应用将大大减少搜索引擎对网站的收录。

1、Hash模式:(也就是通过锚点?)

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 " www.baidu.com/#hashhash " ,其中 "#hashhash" 就是我们期望的 hash 值。

hash 值的变化不会导致浏览器像服务器发送请求,而且hash 的改变会触发 hashChange 事件,浏览器的前进后退也能对其进行控制,所以在 H5 的 history 模式出现之前,基本都是使用 hash 模式来实现前端路由。

2、History模式

在 HTML5 之前,浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。

在 HTML5 的规范中,history 新增了以下几个 API:

hash模式和history模式对比

1、hash 模式相比于 history 模式的优点:

兼容性更好,可以兼容到IE8

无需服务端配合处理非单页的url地址

2、hash 模式相比于 history 模式的缺点:

看起来更丑。

会导致锚点功能失效。

相同 hash 值不会触发动作将记录加入到历史栈中,而 pushState 则可以。

引用:

https://www.cnblogs.com/ppforever/p/5126640.html

https://www.jianshu.com/p/0c32c85c668b

https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1