每周三集前端免费视频
每年帮助超100万前端爱好者学习

【第一季】Vue2.0视频教程-内部指令(共8集)

Vue2.0视频教程第一季:内部指令

GitHub源码地址:https://github.com/shenghy/VueDemo

第一季课程目录:

第1节:走起我的Vue2.0

第2节:v-if  v-else  v-show 指令

第3节:v-for指令 :解决模板循环问题

第4节:v-text & v-html

第5节:v-on:绑定事件监听器

第6节:v-model指令

第7节:v-bind 指令

第8节:其他内部指令(v-pre & v-cloak & v-once)


第1节:走起我的Vue2.0

很高兴你能来学习这套Vue2.0视频课程,现在越来越多的小公司开始使用Vue来作为前端开发框架了,而且Vue的生态也越来越好,无论你是前端的老手还是新手,都有必要认真并系统的学习,有可能的话尽量在工作中使用它了。

学习这套课程你需要的前置知识:

  1. HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。
  2. CSS的基础知识,最好做过半年以上的切图和布局,最好了解CSS3的知识。
  3. Javascript的基础知识,对基本语法掌握,这个要求不高,因为遇到难的我会在视频中讲解。
  4. node.js初级知识,只需要会npm的使用和项目初始化就可以了

如果你对上面三个知识还不了解,建议不要冒进学习,会影响你的学习热情。但你已经是科班出身或者在培训班毕业后想继续学习,是完全没有难度的。

学习预期这套视频会有很多季,每一季会有几集构成,像美国的电视剧一样,从最基础一直讲到项目实战,你学完这套视频就可以直接上手项目,也希望你能找到一份不错的工作。

学习方法学完视频之后,一定要动手写一遍,如果不写你真的到项目中一定写错或者写不出来,要在学习时就不断采坑。

 

一、下载Vue2.0的两个版本:

官方网站:http://vuejs.org/

  • 开发版本:包含完整的警告和调试模式
  • 生产版本:删除了警告,进行了压缩

二、项目结构搭建

这个部分要视频中有详细讲解。

三、live-server使用

用npm进行全局安装

在项目目录中打开

 

四、编写第一个HelloWorld代码:


第2节:v-if  v-else  v-show 指令

通过上节课的学习,我们已经搭建好了开发环境,并且写出了一个简单的HelloWorld程序,我们今天主要学习v-if  v-else 和 v-show。其实我们这一季学习的都是Vue2.0的内部指令。

一、v-if:

v-if:是vue 的一个内部指令,指令用在我们的html中。

v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称。

关键代码:

完整html代码:

这里我们在vue的data里定义了isLogin的值,当它为true时,网页就会显示:你好:JSPang,如果为false时,就显示请登录后操作。

2、v-show :

调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。

3、v-if 和v-show的区别:

  • v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
  • v-show:调整css dispaly属性,可以使客户端操作更加流畅。

 

下节课我们将学习v-for的知识。


 

第3节:v-for指令 :解决模板循环问题

v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。

一、基本用法:

模板写法

js写法

完整代码:

这是一个最基础的循环,先在js里定义了items数组,然后在模板中用v-for循环出来,需要注意的是,你需要那个html标签循环,v-for就写在那个上边。

二、排序

我们已经顺利的输出了我们定义的数组,但是我需要在输出之前给数组排个序,那我们就用到了Vue的computed:属性。

我们在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。

如果不重新声明报错:

如果一切顺利的话,你已经看到了结果,但是这个小程序还是有个小Bug的,现在我把数组修改成这样。

我们把其中的54修改成了5,我们再看一下结果,发现排序结果并不是我们想要的。

我们可以自己编写一个方法sortNumber,然后传给我们的sort函数解决这个Bug。

用法

经过一番折腾,我们终于实现了真正的数字排序,这是在工作中非常常用的,一定要学好,记住。

三、对象循环输出

我们上边循环的都是数组,那我们来看一个对象类型的循环是如何输出的。

我们先定义个数组,数组里边是对象数据

在模板中输出

加入索引序号:

排序,我们先加一个原生的对象形式的数组排序方法:

有了数组的排序方法,在computed中进行调用排序

注意:vue低版本中 data里面的items和computed里面可以一样,但是高版本,是不允许相同名称。有很多小伙伴踩到了这个坑,这里提醒学习的小伙伴,根据自己版本的不同,请修改代码。(感谢网友:tannnb的指正)。


第4节:v-text & v-html

我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码:

如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。

双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。

需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。

完整代码:


第5节:v-on:绑定事件监听器

v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。

一、使用绑定事件监听器,编写一个加分减分的程序。

效果如图

程序代码

我们的v-on 还有一种简单的写法,就是用@代替。

我们除了绑定click之外,我们还可以绑定其它事件,比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框,然后绑定回车事件,回车后把文本框里的值加到我们的count上。

绑定事件写法:

javascript代码:

因为文本框的数字会默认转变成字符串,所以我们需要用parseInt()函数进行整数转换。

你也可以根据键值表来定义键盘事件:

 


第6节:v-model指令

这节课强烈建议你看视频,文字版你可能会看蒙!

v-model指令,我理解为绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定。

一、我们来看一个最简单的双向数据绑定代码:

html文件:

javascript代码:

二、修饰符

  • .lazy:取代 imput 监听 change 事件。
  • .number:输入字符串转为数字。
  • .trim:输入去掉首尾空格。

三、文本区域加入数据绑定

四、多选按钮绑定一个值

五、多选绑定一个数组

六、单选按钮绑定数据


第7节:v-bind 指令

v-bind是处理HTML中的标签属性的,例如<div></div>就是一个标签,<img>也是一个标签,我们绑定<img>上的src进行动态赋值。

html文件:

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值,这个值是在vue构造器里的data属性中找到的。

js文件:

我们在data对象在中增加了imgSrc属性来供html调用。

v-bind 缩写

绑定CSS样式

在工作中我们经常使用v-bind来绑定css样式:

在绑定CSS样式是,绑定的值必须在vue中的data属性中进行声明。

1、直接绑定class样式

2、绑定classA并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。

3、绑定class中的数组

4、绑定class中使用三元表达式判断

5、绑定style

6、用对象绑定style样式


第8节:其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

这时并不会输出我们的message值,而是直接在网页中显示{{message}}

v-cloak指令

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用,

v-once指令

在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。

第一季总结:

第一季我们学习了Vue中的指令,这也是Vue中最容易理解的部分,以前我也只是使用Vue,通过这个课程的制作,我也对Vue指令有了全面和更深刻的了解。对于小伙伴们的学习,我想说的是,你看完视频后一定要动手去敲写代码,这样你才能理解并记住。我们第二季的课程也已经在准备中了,第二季我们将讲解Vue的全局API。

 

 

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » 【第一季】Vue2.0视频教程-内部指令(共8集)
分享到: 更多 (0)

评论 155

  1. #93

    老师,那个第6节v-model指令的修饰符.lazy:取代 imput 监听 change 事件,那个input单词写错了

    匿名1周前 (07-10)回复
  2. #92

    胖胖老师你好~,我想问一下怎样才是正确的打开终端控制台,我在example文件夹上右击选择在终端打开,然后代码确定正确后再控制台输了live-server后本地host页面打开了,但是没有正确显示出内容而是双花括号,并且报错,说获取不到vue.js,然后我又到资源管理器里找到了vue这个文件夹在路径上输入了cmd打开了电脑的控制台,输入了live-server后浏览器打开了本地host页面,这时候页面打开的是vue文件夹下的几个文件夹,而并非写的v-for.html,需要自己点开example文件夹找到需要打开的页面才能看到,想问一下胖胖老师应该怎样正确使用控制台,麻烦了!

    匿名2周前 (07-07)回复
  3. #91

    爱你哟

    匿名2周前 (07-07)回复
  4. #90

    能不能把视频放到B站不用广告的地方。

    匿名4周前 (06-21)回复
    • B站的视频在博客上播放是有一些问题的,以前转过B站,又转回来了。

      技术胖4周前 (06-22)回复
  5. #89

    小胖确实不错~

    希望小胖减肥成功,不然真的是呼吸都困难

    匿名2个月前 (05-15)回复
  6. #88

    6666 学到东西了 谢谢技术胖

    匿名3个月前 (04-23)回复
  7. #87

    正好也想问怎么关闭呢,关闭终端应该就结束进程了吧

    匿名3个月前 (04-22)回复
  8. #86

    live-server可以打开 ,那怎么关闭??????

    匿名3个月前 (04-16)回复
  9. #85

    v-model.number 为什么我试了一下能输入字母呢, 只能在开头输入数字的情况下,后续才不能输入字母。一开头就输入字母,就没有限制照样和v-model一样的 这是为什么呢胖哥

    匿名4个月前 (03-16)回复
  10. #84

    感谢胖哥的视频,受益匪浅,

    匿名4个月前 (03-15)回复
  11. #83

    胖哥,怎么下载整套教程视频啊,我已经打赏30元了

    匿名4个月前 (03-14)回复
  12. #82

    绑定class中的数组只能显示classB的效果啊,那绑定这个数组的意义呢,或者说什么时候这样绑定,在这儿我理解不到位,哪位大神回答一下,多谢。

    匿名4个月前 (03-13)回复
  13. #81

    //数组对象方法排序:
    function sortByKey(array,key){
    return array.sort(function(a,b){
    var x=a[key];
    var y=b[key];
    return ((xy)?1:0));
    });
    }
    排序不正确啊,我的数组students:[
    {name:”kangJian”,age:”12″},
    {name:”kangJian”,age:”13″},
    {name:”kangJian”,age:”23″},
    {name:”kangJian”,age:”24″},
    {name:”kangJian”,age:”100″}
    ]排序出来后是100-12-13……
    依然是根据sort的第一个数进行排序

    匿名4个月前 (03-12)回复
  14. #80

    业界良心

    匿名4个月前 (03-10)回复
  15. #79

    我运行live-server时报错
    (node:12676) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: spawn cmd ENOENT
    (node:12676) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    请问怎么办

    匿名4个月前 (03-07)回复
  16. #78

    我的v-model.number 怎么没有作用啊 。还是可以输入字符串啊

    匿名5个月前 (03-02)回复
  17. #77

    为什么安装好live-server,在cmd执行弹出浏览器后是空白的

    匿名5个月前 (02-27)回复
    • 重新安装呗

      匿名4个月前 (03-15)回复
  18. #76

    单选框那里应该是 label for=”two” 文章中写的label for= “one” 视频中是正确的

    匿名5个月前 (02-26)回复
  19. #75

    单选按钮绑定


    {{sex}}
    这个地方有点小问题女 修改为女

    匿名5个月前 (02-26)回复
  20. #74

    非常好的视频,谢谢阿胖!

    匿名5个月前 (02-26)回复
  21. #73

    胖哥讲解的特别好,但是有个问题英文发音好多单词不太标准。

    匿名5个月前 (02-26)回复
    • 我的硬伤硬伤,毕业10多年了,没有语言环境。

      技术胖5个月前 (02-26)回复
  22. #72

    感谢胖哥

    匿名6个月前 (02-04)回复
  23. #71

    上面 .lazy 那里应该是input吧

    匿名6个月前 (01-29)回复
  24. #70

    为啥子视频中这么多广告

    匿名6个月前 (01-25)回复
    • 因为没钱去广告。

      技术胖6个月前 (01-25)回复
      • 强制加广告吗?天啊

        匿名6个月前 (02-02)回复
        • 广告是腾讯的,这个没办法,视频的流量太贵了。只能用些免费的吧。

          技术胖6个月前 (02-04)回复
          • 给大家安利个去广告的,电脑下个净网大师,从来没出现过广告。那天我朋友在看胖哥的视频,也发现有广告,我的一直没有,后来才发现是之前按了净网大师。。。强行安利!!!

            匿名2周前 (07-08)
  25. #69

    这是一个最基础的循环,先在js里定义了items数组,然后在模板中用v-for循环出来,需要注意的是,你需要那个html标签循环,v-for就写在那个上边。

    胖 你字写错了 “你需要那个html标签”把那个 改成 哪个

    匿名6个月前 (01-23)回复
    • 看的懂就行了

      匿名4个月前 (03-12)回复
  26. #68

    第三节的[Vue warn]: The computed property “items” is already defined in data.问题有谁解决了吗

    匿名6个月前 (01-23)回复
    • vue版本的问题,现在的版本data和computed中不能重名

      匿名1个月前 (06-12)回复
      • 嗯,可能我讲的版本有些旧了,请根据最新的版本学习哦。

        技术胖1个月前 (06-13)回复
  27. #67

    请问老师 为什么function expression不起作用呢?

    var sortNumber = function(a, b) {
    return a – b
    }
    下面这样的写法就可以
    function sortNumber(a, b){
    return a-b
    }

    匿名6个月前 (01-23)回复
  28. #66

    又可以了。。。

    匿名6个月前 (01-22)回复
  29. #65

    您的链接vue视频的掘金文章页面找不到了,怎么办

    匿名6个月前 (01-22)回复
    • 那就来我的博客看啊。记住博客jspang.com.

      技术胖6个月前 (01-23)回复
  30. #64

    能不能不要这么多的广告啊~~~~~

    匿名6个月前 (01-22)回复
    • 哪里有广告?难道我的网站中毒了?

      技术胖6个月前 (01-22)回复
  31. #63

    请问,Mac可以用live-server 吗?

    匿名6个月前 (01-18)回复
    • Mac是可以使用的。

      技术胖6个月前 (01-18)回复
      • 请问,用live-server ,是不是就不能用sublime和webstorm 去编辑了?

        匿名6个月前 (01-18)回复
        • live-server的使用和编辑器是没有关系的,你可以继续使用。

          技术胖6个月前 (01-19)回复
  32. #62

    我打赏了 怎么不能下载视频

    匿名6个月前 (01-17)回复
  33. #61

    胖,在第三节v-for最后数组对象方法排序,如果数字有三位数的;比如135排序就会乱掉,跟前面你故意做的错误示范一样的。

    匿名6个月前 (01-15)回复
  34. #60

    老师好,我怎么无法加入QQ 群,显示“群主将群设置不允许任何人加入”

    匿名6个月前 (01-15)回复
    • 你可以加入2群,我在2群等你哦。

      技术胖6个月前 (01-16)回复
  35. #59

    第三节,为什么排序后,HTML之前未排序的studens也跟着排序了,所以v-for student 和 sortStudents 效果是一样的,如果只写一个就不会影响了,为什么呢?
    未排序

    {{index + 1}} 姓名:{{item3.name}}
    年龄:{{item3.age}}

    排序

    {{index + 1}} 姓名:{{item4.name}}
    年龄:{{item4.age}}

    匿名6个月前 (01-10)回复
    • 你好,解决了吗?我也遇到这个问题了,技术胖说不会污染数据源,但是现在却污染了

      匿名4个月前 (03-20)回复
  36. #58

    胖老师,我启动了live-server之后,为什么启动了其他项目?而不是当前文件夹里的demo,为啥

    匿名7个月前 (12-28)回复
    • live-server –port=xxxx(xxxx是你之前的其他项目没启动过的端口),其他项目也默认8080端口,所以你要改你当前项目的端口为其他,哪怕9999都行,只要不和其他项目端口启动的一样就行。

      匿名6个月前 (01-24)回复
  37. #57

    是的,第三节会报[Vue warn]: The computed property “items” is already defined in data.错误,可能版本不一样吧,我下载的是最新的,也报错了,解决方法是换个名字就好了:例如在computed对象里改成changeItems,然后再在v-for里改成”item in changeItems”

    匿名7个月前 (12-27)回复
  38. #56

    可以的

    匿名7个月前 (12-27)回复
  39. #55

    第三节 v-for 中报错The computed property “items” is already defined in data.[1,2,3,4,5,6,7]这部分
    输入中英文符号无问题,怎么报错

    匿名7个月前 (12-25)回复
  40. #54

    讲的很好,听得很明白,很清晰。感谢!

    匿名7个月前 (12-24)回复
  41. #53

    computed:{
    items 我也遇到问题了

    匿名7个月前 (12-16)回复
  42. #52

    胖哥,请教一下,是不是通过computed里面自定义一个函数
    sortItems:function(){
    return this.items.sort(sortNum)
    },
    这样会修改源数据data里面的items?

    匿名7个月前 (12-15)回复
  43. #51

    胖哥,QQ群怎么不存在啊,搜索的时候找不到呢 怎么给你打赏。。。

    匿名7个月前 (12-14)回复
    • 看网站右边,只要用心一定可以成为朋友的。

      技术胖7个月前 (12-15)回复
  44. #50

    真的很感谢老师,学到很多

    匿名7个月前 (12-12)回复
  45. #49

    computed替换和排序都没反应,这是什么原因呢?

    匿名8个月前 (12-06)回复
    • 注意:声明新的对象要在v-for=”item in items”将items改成sortItems;这个是我个人的学习笔记

      匿名5个月前 (02-24)回复
  46. #48

    胖哥,text/javascript怎么没有提示呢?需要加什么插件?

    匿名8个月前 (12-06)回复
    • vuet插件就可以啊。

      技术胖7个月前 (12-07)回复
      • 没有提示啊,能不能发下具体的名字呢?

        匿名7个月前 (12-11)回复
  47. #47

    胖老师,真的很感谢你的教程,比外面的视频好多了。对我来说真的很棒。

    匿名8个月前 (12-04)回复
  48. #46

    v-for computed:{items:function(){}}这段报错 items已经定义了,[Vue warn]: The computed property “items” is already defined in data.

    (found in ) 求解是哪里出错

    匿名8个月前 (12-01)回复
    • 你items后面的”:”是中文的

      匿名7个月前 (12-07)回复
      • 感谢你的提醒,也很帮助很多小伙伴。感谢。

        技术胖7个月前 (12-11)回复
      • 我全是英文的:也报错

        匿名6个月前 (01-23)回复
  49. #45

    J胖,请问V-Bind章节如果用radio绑定 :class 三元运算符 的话只有一次性效果如何解决?另外留言区何时支持贴代码…

    匿名8个月前 (11-30)回复
  50. #44

    为什么你的教程跟我实际的不一样呢,我创建了个项目 直接就有了好多文件夹,跟你上面的第一个课程里面都是不一样的,我是用命令 根据官网的命令创建项目的

    匿名8个月前 (11-30)回复
    • 孩子全部开完,后边你就会看到你工作中常用的。vue-cli。

      技术胖8个月前 (11-30)回复
    • 官网是用vue脚手架,用到了webpack模块打包工具。

      匿名7个月前 (12-10)回复
  51. #43

    v-on那节的减分应该加个判断式,不然一开始点击减分的话就为负数了

    、董冬懂冻8个月前 (11-07)回复
    • 我自己是这么改的
      0″ v-on:click=’jianfen’>减分

      匿名7个月前 (12-31)回复
  52. #42

    胖老师,我在输入cnpm install -g live-server安装后 在写live-server后弹出窗口后是空白无内容,再安装了一次也一样,我是哪步出现问题了呢?

    shiny_jun9个月前 (11-03)回复
    • 查看端口和路径是否错误,然后看调试工具里是否有错误。

      技术胖9个月前 (11-03)回复
    • e:\workspace\VSCode\vue_demo>live-server
      Serving “e:\workspace\VSCode\vue_demo” at http://127.0.0.1:8080
      然后index.html的内容是默认显示的哦,查看index.html是否为null

      匿名5个月前 (02-24)回复
  53. #41

    在项目目录中打开 live-server,没有直接进入html,而是先进入整个项目中的文件夹页面 是怎么回事呀??

    ling9个月前 (10-29)回复
    • 要把你的index.html放在根目录。你的根目录只有文件夹,所以就先进入文件夹页面。

      匿名7个月前 (12-24)回复
  54. #40

    第三节 v-for 在computed 里像视频里一样写的 但是报错了‘The computed property “items” is already defined in data.’不知道是什么原因 还请大神指教

    Azraa9个月前 (10-26)回复
    • 我也是诶,照着视频里写的。return [1,2,3,4,5,6,7]的时候报错,‘[Vue warn]: The computed property “items” is already defined in data.
      (found in )

      不知道什么情况

      luoyu9个月前 (11-02)回复
      • 你的vue.js版本是最新版的?不是最好升级到最新版

        匿名6个月前 (01-26)回复
    • 你解决了吗

      匿名6个月前 (01-23)回复
  55. #39

    很棒的教程 加油

    JANG9个月前 (10-14)回复
  56. #38

    胖老是你好帅

    kayzhang9个月前 (10-11)回复
  57. #37

    谢谢胖老师,希望胖老师今年的减肥计划有好的效果,有更健康的身体给我们讲课

    C_Dancing9个月前 (10-09)回复
  58. #36

    你好,很感谢您能分享您的在技术方面的知识,这让我受益匪浅,我在网上看了许多教程,作用都不理想,您的视频非常适合我初步的学习,非常感谢,另外,想提个小小的建议,您的视频因为现在比较多了,能否弄个导航,好像vue视频一样,一目了然,不用一个个的去翻找,最后再次感谢分享这么好的视频!

    lianghui10个月前 (10-02)回复
  59. #35

    live-server必须是安装在项目目录下面么

    吴梅梅10个月前 (09-28)回复
  60. #34

    D:\Backup\桌面\Vue>live server
    ‘live’ 不是内部或外部命令,也不是可运行的程序
    或批处理文件。
    这是怎么回事

    JDW10个月前 (09-27)回复
    • live-server是需要安装的。用npm install -g live-server进行安装

      技术胖10个月前 (09-28)回复
  61. #33

    胖胖,v-bind视频播放有问题啊

    wei10个月前 (09-17)回复
    • 有什么问题,可以说的具体点。

      技术胖10个月前 (09-18)回复
      • 之前看的时候到12秒的时候就卡住了,不过后来好了,不知道什么原因,一开始以为是录制坏了

        wei10个月前 (09-19)回复
  62. #32

    v-model.lazy.trim=”msg”

    燕子斜10个月前 (09-11)回复
  63. #31

    新发现的 胖神没有讲到的, 这样写是可以的!

    燕子斜10个月前 (09-11)回复
  64. #30

    谢谢胖哥

    言Sir11个月前 (09-06)回复
  65. #29

    谢谢胖哥

    刘卓11个月前 (09-04)回复
  66. #28

    胖哥 一个小错误:“单选按钮绑定数据”这里第二个input为女的时候 label应该是for=“two”

    荣天阳11个月前 (08-31)回复
  67. #27

    感谢胖哥

    Owen11个月前 (08-29)回复
  68. #26

    胖哥,麻烦请问一下按照上面加入了 items:function 之后,页面并没有加载新的items,然后报错:[Vue warn]: The computed property “items” is already defined in data. 这里有什么问题呢

    LuffyQian11个月前 (08-22)回复
  69. #25

    首先谢谢老师的视频,其次我有一个问题想问下,那个遍历排序的数据如果不按你那么操作,他的排序是错的。我想了解下这个原来的排序是不是根据ascll码进行排序的,因为以前有遇到过类似的问题,半知半解,求解答下,谢谢老师!

    小谢童鞋11个月前 (08-22)回复
    • 就是根据首字符的ascll码排序的,如果一样,就会比较第二个字符,一直到最后

      匿名6个月前 (02-02)回复
  70. #24

    视频边看边敲,学习效率很高,感谢胖叔

    11个月前 (08-20)回复
    • 能够帮助到你,我很高兴。让我们一起加油学习,成长为更好的自己。

      技术胖11个月前 (08-21)回复
  71. #23

    一起加油!

    微信_韩11个月前 (08-16)回复
  72. #22

    v-model 的五、多选绑定一个数组 的视频是不是有错的地方,label for=”的值写的不对,不是isTrue

    momo11个月前 (08-15)回复
  73. #21

    技术胖老师,我很喜欢你讲课的风格,你的出发点是让学的人明白而不是单纯地出视频,听着通熟易懂,也知道原理,知道为什么,能理解,而不是只知道代码怎么敲。美中不足的一点,就是视频不能选择播放速度,因为老师的语速实在是太慢了哈哈。希望老师在后期课程汇中能加快录制的语速。

    jeamn11个月前 (08-15)回复
    • 好的。我会尽量加快语速。谢谢你提的宝贵意见。

      技术胖11个月前 (08-15)回复
  74. #20

    v-on加的不能是空,出现NAN

    蠢春想喝水12个月前 (08-01)回复
  75. #19

    胖哥,谢谢您的讲解,但是我在v-for这一节里面有点问题想请教您:data和computed中定义的数组名称可以一致吗?如果可以的话vue怎么判断什么时候用data或者computed中的数组?v-for这一节的视频里面,您定义了computed中的items数组后,就不再显示data中的items了,可是同样的代码在我电脑上跑下来还是显示data的items数组,还请胖哥给予指点,谢谢

    Hedy12个月前 (07-26)回复
    • data是原始数据,比如原始数据是true,但你展现给用户的是正确,这时候你就可以用computed来进行处理。这样作的好处是不影响原始数据。

      技术胖12个月前 (07-26)回复
      • 谢谢胖哥!

        Hedy12个月前 (07-29)回复
    • data和computed应该命名要不一致,data和watch要一致。

      匿名7个月前 (12-10)回复
  76. #18

    感谢胖哥出的教程,受益良多

    caicai1年前 (2017-07-14)回复
  77. #17

    为什么排序不起作用

    吉安1年前 (2017-07-12)回复
  78. #16

    5星好评

    Jack Zhang1年前 (2017-06-22)回复
  79. #15

    v-for 那一节sortByKey这个函数里的 return ((xy)?1:0));是不是可以直接写成 return x-y

    Time1年前 (2017-06-19)回复
    • 可以的 就是sort()的用法

      zhengfei10个月前 (09-25)回复
  80. #14

    第三节和第五节,我写的sortItems和methods都不起作用是怎么一回事?求胖哥解答

    贾维斯1年前 (2017-06-19)回复
    • 不好使就按照视频再试一次。

      技术胖1年前 (2017-06-19)回复
  81. #13

    这些视频的代码在哪里可以看

    yuan1年前 (2017-06-12)回复
  82. #12

    我按照你一节视频安装的 总是不出现那个json文件 胖哥求讲解

    张明宣1年前 (2017-06-09)回复
    • npm init了没有

      匿名7个月前 (12-10)回复
  83. #11

    非常感谢胖哥辛苦录视频教我们学习,希望胖哥的博客越做越好

    fmain1年前 (2017-06-07)回复
    • 非常感谢你的留言,我会努力的。

      技术胖1年前 (2017-06-07)回复
  84. #10

    讲的十分详细,很适合新手入门练手,博主辛苦了,想问下有没有进阶的教程,或者其他博文分享一下,就是讲的能再稍微深入原理一些的那种,比如讲双向绑定,不是简单的写个例子帮个值演示一下就完了,而是讲讲vue源码里是怎么实现的,为什么一定要放在data里才能实现双向绑定。我在学习vue的时候发现这方面官方文档都是一句话带过,新手只知其然不知其所以然很容易踩坑。

    三儿1年前 (2017-05-17)回复
  85. #9

    初学者的福音,谢谢胖哥!

    大伟1年前 (2017-05-09)回复
    • 客气,可以入群一起学习啊。里边有很多vue高手。

      技术胖1年前 (2017-05-09)回复
      • 已经加了,以后会继续跟随胖哥学习。

        大伟1年前 (2017-05-10)回复
  86. #8

    希望能有项目实战的比如饿了吗的实战详细一点的app

    断愁1年前 (2017-05-09)回复
    • 做饿了么讲课也只能讲个大概,一点点写估计要录60多个小时。

      技术胖1年前 (2017-05-09)回复
  87. #7

    很细的教程,谢谢胖哥

    骆飞1年前 (2017-05-04)回复
    • 客气,出教程也让我对vue的知识更加扎实了,自己会使用和讲出来教别人使用的过程,让我成长了很多。

      技术胖1年前 (2017-05-04)回复
  88. #6

    顶一个

    Pp1年前 (2017-04-30)回复
  89. #5

    我的 live-server 不会自动更新。。。 怎么解决啊

    nullcss1年前 (2017-04-27)回复
  90. #4

    胖老师 谢谢你···

    小钟1年前 (2017-04-19)回复
  91. #3

    jspang, 赶紧讲vue+element吧,想和你多学习炫酷网页的更多功能呢,项目在用,谢谢
    element怎么实现可以有编辑列的el-table-colomn呀

    AndiZhao1年前 (2017-04-19)回复
  92. #2

    排序 实现有问题啊 jspang

    yuanli1年前 (2017-04-18)回复
    • 确实,我的排序也出现问题了,return里的东西不出效果

      rain1年前 (2017-05-04)回复
  93. #1

    要出 vue+elements的吗

    仙人掌1年前 (2017-03-30)回复
    • 慢慢会出,只能先出基础的,要不新学的会跟不上。

      技术胖1年前 (2017-03-30)回复