Vue.js初体验

Content

  • Intro
  • Demo
  • Others
  • Q&A

Intro

Intro

数据驱动的组件,为现代化的Web界面而生。

Intro

Demo

Demo

扫码体验

代码组织结构

|-- build <—— webpack编译相关文件
|-- config <—— 配置文件
|-- index.html <—— 主入口文件
|-- package.json
|-- README.md
`-- src
    |-- main.js <—— 主体js,调用vue及vue相关服务
    |-- app.vue <—— 应用主入口
    |-- assets <—— 静态资源目录,如图片,类库css文件等
    |   |-- avatar-man.png
    |-- components <—— 页面组件
    |   |-- medical-log.vue
    |   |-- medical-service.vue
    |   |-- medical-word.vue
    |   |-- rank-dept-chart.vue
    |   |-- rank-disease-chart.vue
    |   |-- rank-doc-chart.vue
    |   |-- rank-form.vue
    |   |-- rank-hosp-chart.vue
    |   `-- user-card.vue
    |-- router-config.js
    `-- views <—— 子页面view
        |-- personal.vue
        |-- rank.vue
        `-- service.vue

官方推荐脚手架

Vue-cli

Vue.js主要特性

  • 双向绑定
  • 条件渲染
  • 计算属性
  • 方法及事件处理器
  • 组件及组件通信

融合其他类库

  • 路由(vue-router)
  • 网络请求(vue-resource)
  • 数据可视化(Echarts 3.0)

More

  • vuex
  • 组件拆分
  • 懒加载
  • 各种优化

Others

对比项 Vue Angular 1 React
性能 = > >≈
生态 活跃 丰富 丰富
上手速度 中等 稍慢

Vue vs Angular vs React

总结

各有所长亦各有所短

  • Vue:不需要兼容IE9-,应用场景相对简单,且要求效率的场景
  • Angular:对性能要求不高,内部平台及中等复杂应用场景
  • React:中大型、复杂、长线应用,且需大量成本投入的场景

Q&A

Made with Slides.com