Vue 系统修炼与精彩实战-周末班

至今日起,停止无效学习!
面对 Vue.js 这个框架,我们为大家精心安排的 学习路径始于 “初阶” > 迈入 “晋级” > 逐渐 “深入” > 陷于 “沉迷”
那些应当熟练掌握的 Vue.js 知识,现已呈现在你眼前:

周末班课程:Vue 全家桶系列

  • Vue 语法从零到熟练;
  • vue-cli 脚手架创建无痛 webpack 配置目录结构;
  • vue-router 单页应用的前端路由管理利器;
  • vuex 集中式应用状态管理器;

配套工具使用

  • Npm 基本使用
  • axios 用作与后端进行通信

为什么选择 Vue.js?

Vue 是一个构建数据驱动的 Web 界面的库,通过简单的 API 提供高效的数据绑定和灵活的组件系统。
Vue 具有简洁、轻量、快速、 数据驱动、组件化等特点,除此之外,Vue 还具有上手快、简单易学、学完即用、快速开发的优势。
可把页面组件化、模块化,分工明确、互不干涉,低耦合的设计使组件可复用、可测试,更易于维护。
响应式编程,开发者只需要聚焦在状态的逻辑处理上,让框架来进行 DOM 操作,不需要自己手动更新视图。
官方提供健全的周边工具,例如 vue-cli 创建项目目录和开发环境配置、vue-router 前端路由创建单页应用、vuex 集中式应用状态管理器。

通过本课程,你能够学到什么?

通过本课程,你可以快速学习、熟练使用 vue 的基本语法,包括理解 vue 中核心的运行原理;
构建在项目中所需要的通用组件的封装,学会组件化、模块化的开发模式;
掌握使用 Vue-cli 脚手架初始化 Vue.js 项目,了解 webpack 打包过程和基本配置;
掌握 vue-router 开发单页应用,使用 axios 与后端进行数据交互;
了解项目的开发流程,并使用 vuex 管理整个应用的状态;
最后通过实例,可体验前后端分离的开发方式,并能很受益的应用在自己的项目中;


妙味 Vue 系统修炼与精彩实战(周末班)

开班时间:

  • 北京 201801届 Vue 系统修炼与精彩实战周末班(课程已开班)
  • 北京-2018年03月10日 Vue 系统修炼与精彩实战周末班(课程已开班)
  • 上海-2018年03月10日 Vue 系统修炼与精彩实战周末班(课程已开班)
  • 北京-2018年05月26日 Vue 系统修炼与精彩实战周末班(招生中…)

开班地点:

课时安排:

全天上课,每天 6~8 小时,共计 6 周,约 48 课时

课程总费用:1888 元/位

课程优惠信息:

☩ 在 2018 年 5 月 19 日前报名,每人减免 88 元,即:1800 元/位;
☩ 凡 2 人组团报名,每人减免 158 元,即:1730 元/位;
☩ 凡 3 人组团报名,每人减免 188 元,即:1700 元/位;

咨询QQ:2852509866

微信咨询:miaov-class

上课形式 & 课程服务:

  • 讲师面授:
    采取讲师现场面授的形式,一边现场讲解、一边演示代码。不仅深入讲解课程中涉及到的知识点,且会一一辅导,帮助所有人顺利进入开发场景;

  • 耐心辅导:
    遇到知识难点,或者有人听不太明白的情况,讲师会耐心的一遍遍重复讲解,直到大家都听懂为止;

  • 现场练习:
    学员们上课时必须要带笔记本电脑来听课,每次课后,学员们需要在讲师辅导下,在笔记本电脑上配置安装环境、每次课都要完成各种代码练习后才能离开教室,确保学习质量;

  • 远程学习:
    对于无法参加实体上课的学员,可以观看上课录制的视频进行观看学习。
    在学习过程中遇到的问题,可以提问,并提交给讲师,讲师会给予解答。
    另外相关的课程练习,均可提交给讲师批改。

  • 录制视频:
    现场授课会录制视频,方便大家课后复习知识点。同时周末班临时有事来不了的同学,事后也能在线观看当天现场录制的授课内容;

  • 源码课件:
    提供讲师现场演示的源代码、PPT 等授课资料;

  • 技术解答:
    讲师现场除了给大家答复课程范围内的提问外,也愿意和大家一起讨论工作中的各种问题;

学前基础要求:

1、有 HTML、CSS、JS 基础,熟悉 DOM\BOM 等操作,能独立完成 妙味 JavaScript 课程 中级阶段课后案例即可,例如:>QQ邮箱删除功能
2、具备 AJAX 等相关知识;

对于 AJAX 基础稍差的伙伴可以参考:http://2017.miaov.com/v_show/830

报名须知:

1、报名需要预交 500 元定金,用来确定座位以及占据该班相应名额,报名后不支持退费。如开班前放弃学习,则退还 70% 定金给所报名的学员;
2、请至少提前一天缴纳剩余学费,开班当天仍然有顾虑的学员,可参加半天的试听课。试听后满意即补交余款,试听不满意则不必补交余款,但之前缴纳的定金只能退还 70%;
3、周末班属于短期学习计划,因此开课后均不受理任何请假、重听服务。


- 课程大纲 -

初阶:Vue 语法从零到熟练

  • Vue.js 是什么

    • 一套构建用户界面的渐进式框架
    • 增量开发的设计
    • 只关注视图层
  • Vue 两大特点

    • 响应式数据绑定:数据的增删改查都是可被 watch 的,一旦变动自动更新视图;
    • 可组合的视图组件:把页面拆成多组件,可达到封装、复用、可测试的目的;
  • 声明式渲染

    • 描述要什么样子,让框架帮你做;
    • 声明模板语法将实例数据进行绑定;
    • 模板语法-插值:采用 “Mustache” 语法 {{表达式|实例数据}};
    • 把注意力全身心的投入到业务逻辑的数据处理上,而无需手动变动 DOM 更新;
  • 指令

    • 自定义属性,写在标签上以 v- 为前缀的特殊属性;
    • 预期的值为 javascript 表达式;
    • 作用是将数据和 DOM 做关联,当表达式的值改变时,响应式地作用于 DOM 上;
  • 常用指令一览

    • v-bind:动态的绑定数据到 DOM 元素上,当数据发生变化,响应的更新 DOM 数据;
    • v-once:只渲染元素和组件一次,随后数据更新,并不会重新更新 DOM 数据,可视为静态内容,将渲染结果缓存起来,用于优化更新性能;
    • v-show:根据表达式之真假值,切换元素的 display CSS 属性;
    • v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建;
    • v-if、v-else-if、v-else:多重条件选择渲染;
    • v-for:基于源数据多次渲染元素或模板块;v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性;
    • v-model:随表单控件类型不同而不同,在表单控件或者组件上创建双向绑定;
    • v-cloak:以隐藏未编译的 Mustache 标签直到实例准备完毕;
    • v-once:只渲染元素和组件一次,这可以用于优化更新性能;
    • 自定义指令:除了核心功能默认内置的指令,也允许注册自定义指令;
  • 选项对象

    • 在启动整个应用实例化时传入的参数。通过这些选项来创建想要的行为;
    • el(element):提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标;
    • 数据类:

      • data(数据):应用的数据,可被转为getter/setter,能够响应数据的变化;
      • computed(计算属性):将对 data 数据的逻辑抽离在计算属性中。这些属性依赖 data 的变化而相应反应。计算属性的结果会被缓存,多次使用而不重新计算;
      • methods(方法):存放应用中封装的方法,例如事假处理函数;
      • watch(侦听属性):当有一些数据需要随着其它数据变动而变动时,可通过 watch 侦听;
      • computed VS methods VS watch watch:这三者在某些功能点是重复的,何时使用、使用在什么样的场景;
    • 生命周期钩子函数

    • beforeCreate:实例初始化之后,数据观测之前调用;
    • created:实例创建完成后被立即调用,数据观测,计算属性,方法定义都已完成,但还没开始挂载;
    • beforeMount:挂载开始之前被调用;
    • mounted:挂载之后调用该钩子函数;
    • beforeUpdate:数据更新时调用,可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程;
    • updated:数据更新之后调用该函数,当这个钩子被调用时,组件 DOM 已经更新;
    • beforeDestroy:实例销毁之前调用;
    • destroyed:实例销毁后调用,调用后实例中所有东西都会解除绑定,子实例也会被销毁;
  • Vue 案例精选荟萃

    • 【实例】数据控制的选项卡切换;
    • 【实例】自由展开收缩的好友列表;
    • 【实例】管理购物车商品列表;
    • 【实例】单一修改文本框的值;
    • 【实例】留言板;
  • 组件

    • 什么是组件:
      • 封装可重用的代码;
      • 组件是自定义元素,Vue.js 的编译器为它添加特殊功能;
      • 用 is 特性进行了扩展的原生 HTML 元素;
    • 组件的定义和使用:
      • 全局组件;
      • 局部组件;
      • 单文件组件;
    • 一个通用组件所具备的三个部分:
      • Prop 允许外部环境定制组件;
      • custom event 监听内部触发外部产生的副作用;
      • slot 插槽允许将外部环境的结构组合到组件中;
    • 组件之间的通信
      • 父->子 使用可定制的 prop 传递;
      • 子->父 自定义事件;
    • slot 插槽定制组件的结构
      • 单个插槽;
      • 具名插槽;
      • 作用域插槽;
    • 组件间的双向数据绑定;
    • 动态组件;
    • 异步组件;
    • 递归组件;
  • Vue 案例精选荟萃

    • 【实例】封装通用的 modal 框组件;
    • 【实例】封装通用的树形菜单组件;
  • Vue 综合案例:任务管理系统

    学习目标:这一部分是学习 Vue 的基本语法,从概念、实例、组件、指令、选项,一直到模版渲染、事件绑定、计算属性等、组件交互,逐一讲解。虽然 Vue 官方的文档通俗易懂,但是给的实例并不是很多。在这一部分的学习中,通过一个个实例将学习到的语法融入在具体的场景之中,不但学会了语法的使用,并可以知道语法能够使用在哪些场景,进而理解的更加深刻,运用起来也会更加的得心应手。有实例的加持,从零到熟练语法将会是轻而易举的事。


晋级:vue-cli 脚手架创建无痛 webpack 配置目录结构

  • webpack 的基础配置初探;
    • 启动应用开发模式;
    • resolve 配置访问路径;
    • 打包项目;
  • 单文件组件的定义和使用
    • 定义的命名约定;
    • import 引入使用组件;
  • 实用的 webpack 配置

    • 入口 enrty,配置一项和多项
    • 出口 output,配置文件名和文件路径,已经 cdn 的公共路径
    • loader 相关, 在引入模块前, loader 会先预处理一下模块的内容
      • babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容
        • css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理
        • file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理.
    • plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用

      • html-webpack-plugin
      • clean-webpack-plugin
      • ProvidePlugin, 更快速的引入模块
      • devtool 找到源码的位置
      • webpack-dev-server, 开发测试的利器

      学习目标:这个脚手架工具是官方推出的,只需要安装即可使用,无需对 webpack 进行多余的配置,它的目标也是解决 webpack 配置繁琐的问题,达到无痛的使用 vue 编写应用的目的。学习 Vue-cli 搭建的目录结构,并在此基础上创建自己的应用。


深入:vue-router 单页应用的前端路由管理利器

  • 前端路由的作用
    • 将组件映射在对应的路由,访问时渲染;
    • 做单页应用;
  • 路由配置使用前置准备
    • 安装路由模块;
    • 配置路由参数;
    • 注入 Vue 根实例中;
    • router-view 声明渲染的位置;
  • 嵌套路由:视图有多层组件嵌套,同样路由也有多层组件嵌套,格式为:/a/b/c;
  • 动态路由:把匹配到的路径都映射到同一个组件,其中不同路径可以设置为动态路径访问,可通过路由信息对象 $route 拿到动态参数 pramas;
  • 命名路由:通过 name 标识一个路由;
  • HTML5 History 模式;
  • 重定向 和 别名;
  • 导航钩子函数;
  • 代码分隔懒加载;
  • 编程式导航;
  • 常用 API:

    • router-link:创建一个链接;
    • router-view:声明组件渲染的位置;
    • mode:访问模式,默认为:“hash”模式,可改为 “history”;
    • base:路由的基本路径,上线到服务端常用;
  • Vue 案例精选荟萃

    • 【实例】mock 数据网站

      学习目标:vue-router 是管理路径映射组件的前端路由模块,简单的快速创建单页应用。学习如果配置路径和组件的映射关系,处理各个页面不同的访问权限。


沉迷:vuex 集中式应用状态管理器

  • vuex 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化;
  • 什么时候需要用到 vuex;
    • 当多个视图依赖于同一状态;
    • 来自不同视图的行为需要变更同一状态;
  • store(仓库):它就是一个容器,它包含着你的应用中大部分的状态;状态存储是响应式的;不能直接改变 store 中的状态;
  • state(状态):定义应用的单一状态树,用一个对象就包含了全部的应用层级状态;
  • getter(派分的状态):抽离操作状态的逻辑,可被多组件使用;
  • mutation(修改状态的唯一途径):要使改变状态可被记录,必须要 commit 一个 mutation;mutation 必须是同步更新状态;
  • action(异步操作):异步操作产生结果;Action 提交的是 mutation,而不是直接变更状态;

  • Vue 案例精选荟萃

    • 【实例】计数器
      学习目标:当跨多层组件需要传递数据时候,自然而然的就会使用 vuex 来解决这样的事情,变得异常简单。而学习 vuex 本身也有一定的复杂度,最主要的是刚上手书写可能不习惯,等写多了就会发现设计的精妙之处。通过例子的学习,学会抽象的 mutations,actions 这些概念的运用。
  • 【令人期待的 Vue 精彩实战】

免费加入妙味 vue 技术交流群,扫描下方二维码联系客服



报名方式:

• 咨询QQ:2852509866、2852509867、2852509868
• 微信:miaov-class
• 电话:010-57269690

想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号