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

JavaScript019

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

BootCDN(国内)

unpkg

cdnjs

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

进入项目,安装并运行:

打开localhost:8080

vue实例:

选项API:

https://cn.vuejs.org/v2/api/#components

组件化应用构建

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

指令邦定

指令

指令 (Directives) 是带有 v- 前缀的特殊属性

v-bind:

v-on:

v-if

v-for:

v-model:

数据,方法,计算属性,侦听器

生命周期

组件

全局注册

局部注册

组件组合

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。

prop 向下传递,事件向上传递

子组件要显式地用 props 选项 声明它预期的数据:

动态邦定prop

单项数据流

Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

自定义事件

每个 Vue 实例都实现了 事件接口 ,即:

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

这里有一个如何使用载荷 (payload) 数据的示例:

官方支持的 vue-router 库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。