美文网首页互联网科技Vue.js专区前端杂货铺
基础知识-第三节:从组件到页面

基础知识-第三节:从组件到页面

作者: iplaycodex | 来源:发表于2016-12-15 17:02 被阅读111次

在vue.js中核心的一点就是组件化的思想,也就说说页面上的所有东西都可以看作是一个组件.组件也可以嵌套组件.由众多的组件组成了N多完整的页面.

我们已经知道了在vue.js中组件的后缀就是mycompont.vue这样的一个东西.那么他是怎么编译成浏览器可以认识的HTML和CSS和JS呢?答案就是webpack!正是由这个东西来完成了组件的编译工作,压缩合并的一些功能.看下面的图示:

组件到页面.png

关于构建工具

在这个前端飞速发展的年代如果你还没有用过构建工具,那么真的就out了.在我们自己的极服务项目中我使用的是Gulp来做工程构建.而现在流行的webpack也是具有这样的功能很流行的一个构建工具.他可以帮你压缩,合并,热更新,执行某些编译工作.

作为一名合格的前端,必须要掌握一个构建工具的使用.对于入门使用强烈推荐Gulp,简单容易配置.学会之后如果有兴趣还可以去学习webpack或者是fis3

最简单的vue.js模板渲染案例

最简单的莫属最经典的Hello World了,看下面的图示:

Hello World.png

通过上图可以很明显的看到vue.js的MVVM的实现过程,很容易看懂,这里就不再赘述了,这就是一个最基本的vue.js的模板渲染.

最后

这一节内容很少,简单的介绍了一些入门的概念,和强调了构建工具在项目中使用的重要性.

相关文章

  • 基础知识-第三节:从组件到页面

    在vue.js中核心的一点就是组件化的思想,也就说说页面上的所有东西都可以看作是一个组件.组件也可以嵌套组件.由众...

  • (二十三)UI组件与容器组件的拆分

    UI组件-页面渲染容器组件-页面逻辑 拆分这样的todolist 把页面渲染从 src\TodoList.js 中...

  • ng4.x 路由配置及数据传递

    路由:根据不同地址加载不同组件,实现单页面应用 # 1 路由基础知识 ================= 在ang...

  • 彻底理解React组件的生命周期(一)

    React组件的生命周期,主要分为挂载、更新以及移除阶段的生命周期。所谓挂载指的是组件从初始化到渲染到页面的过程。...

  • Android 入门学习指南

    思维导图 基础知识 四大组件 Activity掌握生命周期、IntentFilter、启动模式、页面状态保存与恢复...

  • 案例-(Vue组件)购物车

    1 实现组件化布局 把静态页面转换成组件化模式把组件渲染到页面上 2 实现 标题和结算功能组件 标题组件实现动态渲...

  • 小程序基础组件总结 - 整理 1

    组件 【组件页面】 【组件引入页面】 总结:

  • Element-UI库的登录组件二次封装

    普通登录组件 封装一个组件 注册到全局组件 向组件传值 组件向页面传递方法 验证码登录组件 封装一个组件 注册到全...

  • React组件

    为什么要使用组件 将页面组件化页面结构更清晰,增加复用也更便于管理。 编写组件 组件,从概念上类似于 JavaSc...

  • 生命周期

    生命周期 - 概述 目标任务: 能够说出组件生命周期一共几个阶段 组件的生命周期是指组件从被创建到挂载到页面中运行...

网友评论

    本文标题:基础知识-第三节:从组件到页面

    本文链接:https://www.haomeiwen.com/subject/ivdgmttx.html