• 课程介绍
  • 学习目标
  • 课程详情
  • 本课程的内容包括了:ES6 基础语法开始打基础,到 Vue 基础语法包括:指令学习,v-model 创建双向绑定,计算属性使用,MVVM 模式介绍,组件和组件通信,sync 或 v-model 创建组件双向绑定,ref 和 $nextTick 使用,slot 插槽。
  • 从这个阶段能够学习到,Vue 基础语法,以及 Vue 解决的问题,Vue 的 MVVM 模式,Vue 响应数据的原理,体验到使用 Vue 把关注点聚焦交数据处理的便利,而无需手动的操作 DOM。
  • Vue 全家桶系列之入门语法和实例案例

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

    配套工具使用

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

    为什么选择 Vue.js?

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

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

    本课程的内容包括了:ES6 基础语法开始打基础,到 Vue 基础语法包括:指令学习,v-model 创建双向绑定,计算属性使用,MVVM 模式介绍,组件和组件通信,sync 或 v-model 创建组件双向绑定,ref 和 $nextTick 使用,slot 插槽。

    从这个阶段能够学习到,Vue 基础语法,以及 Vue 解决的问题,Vue 的 MVVM 模式,Vue 响应数据的原理,体验到使用 Vue 把关注点聚焦交数据处理的便利,而无需手动的操作 DOM。

    学前基础要求:

    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 案例精选荟萃:
      【实例】数据控制好友列表展开收缩;
      【实例】音乐全选单选;
      【实例】todoList 任务清单;
      【实例】封装通用的模态框;

    • 组件

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

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

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

      咨询方式:

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

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

课程目录

资料下载

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

讲师信息

王允

主讲教师:王允

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

相关课程

  • vue 进阶

    ¥158.00
    当前热度:69093
  • Vue 仿锤子商城实战

    ¥139.00
    当前热度:29361
  • Vue 系统修炼与精彩实战

    ¥1,888.00
    当前热度:6249
  • Vuex 状态管理和路由配置

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

    ¥588.00
    当前热度:3943
“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客服
微信客服
返回顶部