起步

    • 搜索是什么
    • 看官网能干什么
    • 探索怎么用
    • Vue.js 不支持 IE8 及其以下版本
    • 最新稳定版本：2.5.16
    • 每个版本的更新日志见
    • 直接下载
    • CDN
      • <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    • 使用 npm 下载（默认安装最新稳定版）
      • npm install vue

    Hello World

    Vue 实例

    • el
    • data
    • methods
    • …

    文本绑定

    • {{data}}

    表单控件双向数据绑定

    • text
    • textarea
    • checkbox
    • radio
    • …

    条件渲染

    • v-if

    列表渲染

    • v-for
    • v-on

    课堂练习

    • 姓名展示：两个文本框，让用户分别输入性和名，然后将数据实时展示到界面上
    • 购物车计价器：有商品价格，和商品数量，用户可以点击加减按钮改变商品数量，将价格实时展示到界面上
    • 数字计算器：实现加法计算器
    • 数字计算器：实现加减乘除
    • 根据视图抽象数据模型
      • 数据
      • 行为
    • 数据改变，触发视图更新

    综合案例：Todo List

    • 任务列表展示
    • 添加任务
    • 切换任务完成状态
    • 删除单个任务
    • 删除所有已完成任务
    • 显示所有任务数量
    • 显示所有未完成任务数

    使用总结

    • Vue 最大程度上减少了页面上的 DOM 操作
    • 让开发人员更专注于业务操作
    • 通过简洁的指令结合页面结构与逻辑数据
    • 通过组件化方便模板重用以及增加可维护性
    • 代码结构更合理
    • 维护成本更低