Vue.js-组件化前端开发新思路资源-CSDN文库

141 浏览量 2021-01-27 13:40:47 上传评论收藏 630KB PDF 举报

资源推荐

资源详情

资源评论

Vue.js-组件化前端开发新思路组件化前端开发新思路

1. 认识Vue.js

Vue.js（读音 /vju?/，类似于view）是一套构建用户界面的渐进式框架。

如果你有react或者Angular开发经验，你肯定不会对Vue.js感到太过陌生。Vue.js是踩在Angular和React肩膀上的后来者，它

充分吸收了二者的优点，是MVVM框架的集大成者。我们只需要花10分钟写一点代码，就能大概窥见Vue的本质。

1.1 数据绑定

所有的MVVM框架要解决的第一件事都是数据绑定。首先要将Model的变化渲染到View中，当有用户输入还需要把用户的修改

反映到Model中。所谓的MVVM就是这么来的。

在浏览器打开这个HTML文件后，可以看到页面上显示了“Hello Vue”字样。我们在控制台输入app.message = 'hello world'并回

车后，发现页面上的消息也变成了“Hello World”。你会发现这一切都是响应式的！Vue在背后为我们搞定了数据到视图的绑

定，然而这一切并没有什么黑魔法，这背后的原理是Object.defineProperty和对象的存取器属性。

这是Vue官网的一张图，高度概括了响应式数据绑定的原理。使用Object.defineProperty将data中的所有属性都转为存取器属

性，然后在首次渲染过程中把属性的依赖关系记录下来并为这个Vue实例添加观察者。当数据变化时，setter会通知观察者数

据变动，最后由观察者触发render函数进行再次渲染。

理解了这个，就不难理解Vue中视图到数据的绑定了：

1.2 条件、循环与事件

Vue中可以很方便地进行条件渲染、循环渲染和事件绑定。我们将通过一个列表的例子来体验：

1.3 组件系统

我们今天的重点是Vue的组件系统。在Vue中定义和使用一个组件非常简单：

我们在这里分别注册了一个全局组件和一个局部组件。所谓全局组件就是一旦注册，所有的Vue实例中都可任意使用而不需要

再单独声明；局部组件则是只有当前Vue实例可以使用该组件。

另外，既然是组件系统，肯定会有生命周期。在Vue中组件实质上就是Vue实例，Vue实例的生命周期就是组件的生命周期：

剩余8页未读，继续阅读

内容反馈

weixin_38629939

粉丝: 11
资源: 925

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip