当前播放: 04 | 第一个Vue程序
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:基础篇 (17讲)
01 | 课程介绍
免费
02 | Vue简介
免费
03 | 内容综述
免费
04 | 第一个Vue程序
免费
05 | 组件基础及组件注册
免费
06 | Vue组件的核心概念:事件
免费
07 | Vue组件的核心概:插槽
免费
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
第二章:生态篇 (13讲)
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层原理
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element UI、Ant Design Vue、iView
27 | 提升开发效率和体验的常用工具:ESLint、Prettier、vue-devtools
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
第三章:实战篇 (21讲)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建项目
33 | 如何自定义Webpack和Babel配置
34 | 如何设计一个高扩展性的路由
35 | 实现一个可动态改变的页面布局
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权限组件、权限指令)
39 | 如何在组件中使用ECharts、Antv等其他第三方库
40 | 如何高效地使用Mock数据进行开发
41 | 如何与服务端进行交互(Axios)
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态赋值
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验的表单项
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主题
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
第四章:福利篇 (2讲)
52 | 如何发布组件到npm
53 | 结课测试&GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
04 | 第一个Vue程序

04 | 第一个Vue程序

唐金州
一点资讯前端技术专家,Ant Design Vue 作者
全集19558
单独订阅¥129
2人成团¥99
90
登录 后留言

精选留言(27)

  • 希言自然
    老师,请教下Vue用vs code,推荐给学生们几个必要的插件吧,谢谢啦~
    2020-04-10
    2
    6
  • 小目标
    插值表达式用的是什么语法?

    作者回复: Mustache 的双括号{{}} 语法

    2019-07-04
    4
  • 亚东
    老师,你是怎么用vscode 创建html 页面,立即生成一个html模版?

    作者回复: 如果是新版vscode emmet 这个已经默认安装了的
    https://github.com/Microsoft/vscode/tree/master/extensions/emmet

    直接输入 html 就会看到相应提示

    2019-03-23
    4
  • 蝈蝈
    老师您好,我在CentOS下,node-v,npm-v,cnpm-v都可以执行了,也配置配置环境变量
    安装cnpm install -g vue的时候,也没有报错,但是在执行的时候,提示说:找找到命令
    能否单独开一个博客链接,详细讲解一下安装步骤。

    作者回复: 这个博客有很多,你可以搜索下,另外我建议使用nrm来管理npm 源,
    https://github.com/Pana/nrm

    2019-03-29
    1
    3
  • Geek_e774b3
    我看了一下 Ant Design不是基于react的吗 这个也能基于vue开发吗

    作者回复: https://vue.ant.design

    2019-03-19
    3
  • 希言自然
    老师你好~
    // 声明1个对象并定义a属性同时初始化值为1
    var data = { a: 1 };
    // 实例化Vue对象,并绑定对象data
    var vm = new Vue({
       data: data
    });
    疑问:
    为什么通过vm实例访问data对象属性a时,是直接vm.a,而不是vm.data.a?不是访问Vue实例对象vm下的data数据属性对应的data对象下的a属性么?怎么理解这个,谢谢老师~
    2020-04-10
    1
    1
  • 张飞洪
    老师,如果说vue只支持IE9及以上版本,那么是不是会影响前端技术选型?是不是你们在做开发的时候放弃IE8的维护了?

    作者回复: 这个要看业务了,一般中后台系统都是不支持低版本ie的,vue不支持ie8,组件库自然也没办法支持ie8

    2019-05-15
    1
  • young
    老师,我觉得响应式更新原理是当页面加载完毕后Vue迅速查找DOM中的{{}}定界符,将定界符和其中的内容用app.message替换掉?对不对?而且我在刷新页面的瞬间也能看到{{message}}的字样

    作者回复: 不能这么理解,是加载完后,把id=app下的内容取出,生成虚拟树结构,然后根据虚拟树结构生成真实dom树,然后替换html 这个听完后面的虚拟dom 和 template两节课就会懂了

    2019-03-23
    1
  • 楼上来的声音
    请问老师,我我npm用默认的registry安装所以东西都很慢,然后没进入下载进度和报ERR,然后替换成淘宝的registry后使用npm install立马报ERR。error:0906D06C:PEM routines:PEM_read_bio:no start line

    作者回复: 这个很诡异,可以查看这个issue尝试解决,https://github.com/npm/npm/issues/16116

    2019-03-23
    1
  • 雨蒙
    老师您好:现在很少有公司搭建框架是用cli生成的吧,不都是自己按照公司需求配置一个全新的吗

    作者回复: 现在 cli 相较于以前,已经很灵活了,尤其是cli3,我们在cli之上根据公司项目特点再行自定义,可以节省我们很多的时间 当熟悉了整个生态后,并且cli满足不了项目需求的时候,再去从零去配置一个"全新"的也是可以的

    2019-03-20
    1
  • 张闯
    圣诞的彩蛋是老师加的么

    作者回复: 😂 并不是

    2019-03-19
    1
    1
  • 初学者
    老师,我用vue init webpack projectname的方式启动的首页是源自App.Vue,作为初学者我不清楚什么时候首页会加载index.html,什么时候会加载App.Vue, 怎么设置呢?
    2021-02-23
    1
  • Geek__1ffef3ce9b46
    极客时间上的老师都讲得很棒啊
    2021-01-10
  • 罗小黑
    唐老师,我去看了mustache.js,mustache是“Logic-less”的,没有if-else,for循环。vue的模板有v-if,v-for等指令。可以理解为vue是有Logic的mustache吗?
    2020-10-31
  • 小霞
    老师,我的index.html突然间识别不出渲染ID了,报这个:Cannot find element: #app,然后重新建了一个index2.html,代码一模一样的浏览器访问就没有问题,这是为何

    作者回复: 或许是缓存原因

    2020-04-15
  • 希言自然
    请问下老师,Vue的课程学习之前是否需要精通Javascript啊?感觉这些都是动态的操作画面标记的渲染很有用,而以前我们都是用JS操作DOM来动态渲染画面的。另外,vue的这类前端框架的出现,感觉HTML5、CSS3的知识点基本可以不用太深入学习了,没用!是么?不知道老师有什么理解的,谢谢啦~!
    2020-04-10
  • 刘民剑
    课程很不错,讲解的也还算全面。
    2020-03-26
  • Geek_a7fd0f
    老师你好,我想问一下Mustache里只允许表达式要怎么理解?我写了一段代码:
    <span id="example-1">{{msg ,test}} </span>
    <script type="text/javascript">
    var example1 = new Vue({
      el: '#example-1',
      data: {
        msg:"Hello World!!",
    test:"Goodbye"
      }
    })
    </script>
    浏览器只渲染出来:Hello World!!,Mustache改成:<span id="example-1">{{[msg ,test]}} </span>时浏览器渲染出来:[ "Hello World!!", "Goodbye" ],这个是什么原因呢?
    麻烦老师。
    2020-03-26
  • Winks
    vm.message="hello vue";为什么可以直接改data里面的message?vm对象下面不是data么?按我的理解不是应该vm.data.message么?问题很小白还请指点,这个是在那个文档里面有规定吗?
    2020-02-04
    3
  • 、怦然心动 ~
    这个是用什么工具开发的,提示比较好,我一直用的idea

    作者回复: Vscode

    2020-01-14
    1
收起评论
看过的人还看
重学前端

程劭非(winter)  前手机淘宝前端负责人

59讲 | 41374 人已学习

拼团 ¥99 原价 ¥129
数据结构与算法之美

王争  前Google工程师

81讲 | 104431 人已学习

限时 ¥99 原价 ¥129
玩转webpack

程柳锋  腾讯高级工程师,IVWEB团队社区和工程化负责人

84讲 | 8952 人已学习

拼团 ¥99 原价 ¥129
TypeScript开发实战

梁宵  搜狗营销事业部高级架构师

47讲 | 5620 人已学习

拼团 ¥99 原价 ¥129