• 课程介绍
  • 学习目标
  • 课程详情
  • 面对 Vue.js 这个框架,我们为大家精心安排的 学习路径始于 “初阶” > 迈入 “晋级” > 逐渐 “深入” > 陷于 “沉迷”…
    那些应当熟练掌握的 Vue.js 知识,现已呈现在你眼前:Vue 语法从零到熟练;vue-cli 脚手架创建无痛 webpack 配置目录结构;vue-router 单页应用的前端路由管理利器;vuex 集中式应用状态管理器;
  • 通过本课程,你可以快速学习、熟练使用 vue 的基本语法,包括理解 vue 中核心的运行原理;构建在项目中所需要的通用组件的封装,学会组件化、模块化的开发模式;
    掌握使用 Vue-cli 脚手架初始化 Vue.js 项目,了解 webpack 打包过程和基本配置;掌握 vue-router 开发单页应用,使用 axios 与后端进行数据交互;
    了解项目的开发流程,并使用 vuex 管理整个应用的状态;最后通过实例,可体验前后端分离的开发方式,并能很受益的应用在自己的项目中;
  • 至今日起,停止无效学习!
    面对 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 管理整个应用的状态;
    最后通过实例,可体验前后端分离的开发方式,并能很受益的应用在自己的项目中;

    学前基础要求:

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

    - 课程大纲 -

    初阶: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 精彩实战】

    咨询方式:

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

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

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

王允

主讲教师:王允

讲师介绍:实战派讲师,电子商务专业,学习编程之前,曾自学各类软件,如:PS\AI\AE\DW\Maya\flashAS… 后转战至编程领域,为知名餐饮企业“西贝菜品”开发官网,另外还开发了基于微博的“企业粉丝管理”系统。 随后任职于“中国移动”,成为前端团队负责人,负责“技术人员招聘、技术难点攻关”等事宜; 2014年供职于“国美在线”2014年供职于“国美在线”任“JS高级前端工程师”,负责“国美在线”的“购物车”及周边相关功能模块开发,并负责团队技术攻关,如:Angular\RequireJS\SeaJS\Backbone等

相关课程

  • vue.js 进阶

    ¥158.00
    当前热度:52392
  • vue.js仿锤子商城实战

    ¥139.00
    当前热度:23516
  • Vue 入门语法和实战案例

    ¥388.00
    当前热度:626
  • Vuex 状态管理和路由配置

    ¥488.00
    当前热度:650
  • Vue 酷狗音乐综合实战

    ¥588.00
    当前热度:474
“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
联系我们

点我咨询QQ客服

010-57269690

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

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号