为什么说Vue是单页面应用呢？

相信很多初学Vue的小伙伴都有一个疑惑，为什么使用Vue所制作的网页是单页面的呢？下面我们一起来探讨一下这个问题。

我们都知道Vue的工作就是将我们的数据渲染到页面上。想要在模板上渲染数据，首先就要把Vue的实例对象挂载到模板上，下面我们就以一个使用vue-cli创建的项目来讲解：

首先我们点开 src/mian.js 文件：

可以看到vue-cli首先是帮我们引入了vue和App组件，通过new Vue建立了一个Vue的实例对象，然后就通过$mount方法将这个Vue实例挂载到了一个 id 名为 app 的标签上，然后通过render函数将App组件插入到了这个标签内。

那么这个 id 名为 app 的标签在哪呢？我们进入到 public/index.html 文件：

可以发现这个 id 名为 app 的标签是一个 html 里面的一个 div 标签。这说明我们在 App组件内写的代码都会汇集到这个 index.html 文件内，而我们写的 Component组件都由这个App组件所管理，所以说我们写所有代码最终都会汇集到这一个 HTML文件中。

这就是为什么说Vue写的网页都是单页面的。

我们平常看到的页面跳转其实大多数都是后端路由，而我们在Vue中写的路由是属于前端路由，是用于实现组件间跳转的。后端路由在跳转时会向服务器发送请求，而前端路由则不会向服务器发送请求。

为什么说Vue是单页面应用呢？相关推荐

[vue] SPA单页面的实现方式有哪些？
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
vue多单页面多tab_vue-cli3创建多页面项目
开发了很多个单页面的项目,也开发了很多原生的项目,就是一直没机会开发多页面和单页面混合的项目,于是自己去查了一些资料,用的是vue-cli3脚手架搭建了一个多页面和单页面混合的小demo. 首先,vu ...
vue与单页面使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
新手vue构建单页面应用实例
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用 ...
Vue.js进阶【3】纯Vue实现单页面-列表增删改查
增删改查最能代表一个技术的完备性的,下面就展示Vue的增删改查,为了界面的美观实用了bootstrap 仔细阅读下面的代码,即可领会其意思.不懂的标签和元素百度查一下一查一大堆.很快就可以理解了运行 ...
vue.js单页面应用实例
一:npm的安装由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号: ...
vue实现单页面多标签页
不废话先上效果图实现上面的效果,主要是通过改变vue的路由机制实现的在router目录文件下新建TabRouter.js文件,添加以下内容 const route = Object.create( ...
vue canvas 单页面(html)海报且显示多行文本与渐变文字
未输入内容之前: 生成后的图片: 用下列图片到https://c.runoob.com/front-end/59 转换成base64格式后放入imgSrc的""中完整代码: &l ...

为什么说Vue是单页面应用呢？

为什么说Vue是单页面应用呢？相关推荐

最新文章

热门文章