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

【第三季】Vue2.0视频教程-选项(共6集)

前言:Vue2.0视频教程已经出了两季,这些都是基础,为的就是能让新手快速进入。这一季讲的是基础中的选项,选项就是在Vue构造器里的配置功能的前缀(Vue已经给我们定义好了),Vue有很多选项,我们将在这一级教程中一一介绍。

第1节:propsData Option  全局扩展的数据传递

propsData 不是和属性有关,他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识,作一个<header></header>的扩展标签出来。实际我们并比推荐用全局扩展的方式作自定义标签,我们学了组件,完全可以使用组件来做,这里只是为了演示propsData的用法。

代码如下:

扩展标签已经做好了,这时我们要在挂载时传递一个数字过去,我们就用到了propsData。

我们用propsData三步解决传值:

1、在全局扩展里加入props进行接收。propsData:{a:1}

2、传递时用propsData进行传递。props:[‘a’]

3、用插值的形式写入模板。{{ a }}

完整代码:

总结:propsData在实际开发中我们使用的并不多,我们在后边会学到Vuex的应用,他的作用就是在单页应用中保持状态和数据的。


1 2 3 4 5 6
未经允许不得转载:技术胖-胜洪宇关注web前端技术 » 【第三季】Vue2.0视频教程-选项(共6集)
分享到: 更多 (0)

评论 76

  1. #44

    先看过整本书再来看的视频,vue的内容上确实少了不少和书里说的比起来,但视频里却把重要都给划了一遍,很不错!比较一针见血!

    匿名2个月前 (05-29)回复
  2. #43

    看了你的教程,真的是从放弃到继续,thanks!

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

    第一个例子中不能把新的值赋给this.price

    匿名4个月前 (04-01)回复
  4. #41

    看好多资料,一脸闷逼,看胖哥的讲解一针见血

    匿名5个月前 (02-27)回复
  5. #40

    watch 监听那个为什么要穿两个参数,oldVal明显没用到呀? 之前以为是固定格式,试验了一下,只传一个参数也是可以的

    匿名5个月前 (02-23)回复
    • 可选参数嘛

      匿名5个月前 (02-27)回复
    • 某个需求请给我变化的差值

      匿名5个月前 (03-01)回复
  6. #39

    关于执行顺序的问题,为什是方法是构造器的先执行

    匿名5个月前 (02-11)回复
  7. #38

    胖哥牛逼

    匿名6个月前 (01-29)回复
  8. #37

    用reverse()不是会污染了原来的newsList吗

    匿名6个月前 (01-29)回复
    • 就是排序变了,数据还是没有改变的

      匿名5个月前 (02-26)回复
  9. #36

    感谢胖哥!

    匿名6个月前 (01-26)回复
  10. #35

    胖哥威武,有个疑问,穿衣指数的例子用watch可以实现;但感觉用计算属性也可以实现,似乎功能重复了一样,怎么区分啥时候用watch,啥时候用computed呢?

    匿名6个月前 (01-22)回复
  11. #34

    胖哥威武

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

    都说vue简单,我看文档看的云里雾里,感谢胖哥解救了我!!!!

    匿名6个月前 (01-13)回复
    • 能帮助到你的学习,真的很高兴。让我们一起加油学习。

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

    胖哥 add(不传值 else加一次之后报错)

    v-on:click=”add()”
    add:function (num) {
    if(num!=”){this.a+=num}
    else{this.a++}
    }

    匿名7个月前 (12-28)回复
    • 虽然num为空,但add方法调用的时候不能无参数。v-on:click=”add(”)”。这样写

      匿名6个月前 (01-22)回复
      • 可以设置默认参数的兄弟,这样写太不友好了。

        技术胖6个月前 (01-23)回复
    • 解决了么

      匿名6个月前 (01-23)回复
    • num!=null吧

      匿名6个月前 (01-29)回复
  14. #31

    PS:当混入方法和构造器的方法重名时,混入的方法无法展现,也就是不起作用。 这句话怎么理解呀,我试了试可以起作用呀???

    匿名7个月前 (12-27)回复
    • 这位兄弟真相了,是可以执行的,我也测了

      匿名7个月前 (12-28)回复
    • 官方文档有写,如果重名,是执行构造器里面重名方法,而混入的不执行

      匿名7个月前 (12-28)回复
    • 不知道你的源码是怎么样的,我实测了一下,混入的同名方法的确是不起作用的…

      匿名7个月前 (01-05)回复
  15. #30

    胖哥,我有个问题,为什么把Vue.mixin({
    updated: function() {
    console.log(“我是全局的混入的updated方法!”);
    }
    })
    这个写在var app 后面不执行呢

    匿名7个月前 (12-25)回复
    • 同问,我也是这样的

      匿名6个月前 (01-15)回复
  16. #29

    想知道一下,computed和methods有什么区别?谢谢老师

    匿名7个月前 (12-19)回复
    • 一个是计算属性,一个是方法,使用起来完全不一样,请详细学习两节课,体会不同。在教程中都有讲的。

      技术胖7个月前 (12-22)回复
    • 个人见解,computed的作用是对输入结果的修饰,methods的作用是改变输出结果

      匿名5个月前 (02-23)回复
  17. #28

    computed:{
    newPrices:function() {
    return ‘$’+this.price+’yuan’
    }
    },老师,这里应该直接返回格式化后的结果,不要去修改元数据会好一些吧

    匿名7个月前 (12-15)回复
    • 是的,不推荐污染原有的数据

      匿名7个月前 (12-28)回复
  18. #27

    页面的视频不能全屏播放,只能默认的窗口,这样字体太小了,看不清楚,希望能调整下,现在都是去腾讯视频搜索

    匿名7个月前 (12-14)回复
    • 这个是腾讯限制,我很难调整。不过我会再想些办法。

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

    混入讲的不是很全面,看了api才懂其真正的原理

    匿名7个月前 (12-13)回复
    • 好的,谢谢你的指出,我以后会更加努力。

      技术胖7个月前 (12-14)回复
  20. #25

    怎么没有第二季的啊

    匿名7个月前 (12-07)回复
    • 有第二季的,在首页里查找一下。

      技术胖7个月前 (12-11)回复
  21. #24

    第二季咋找不到呢

    匿名8个月前 (12-06)回复
  22. #23

    胖哥,怎样才能保持原数据newsList不变呢

    匿名8个月前 (12-01)回复
    • 不用reverse,自己写循环

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

    胖哥, extends.methods 中的方法并不是不会执行, 而是有个覆盖优先级的问题
    – 事件函数覆盖优先级: Constructor > mixins[n] > mixins[n-1] > … > mixins[0] > extends
    – 钩子函数执行顺序: extends > mixins > Constructor

    不知道我总结的对不对, 请指教.

    匿名8个月前 (11-30)回复
    • 嗯,总结的不错。很敬佩你的学习精神。

      技术胖8个月前 (11-30)回复
  24. #21

    看官方文档 就是不知如何下手。
    看视频 通俗易懂!感谢感谢。

    Crism9个月前 (10-16)回复
    • 你能在这里学到东西真的非常高兴。希望你常来博客,看看我们最新的教程。

      技术胖9个月前 (10-22)回复
  25. #20

    关于混入,里面只能写生命周期函数吗?

    七宏10个月前 (10-06)回复
  26. #19

    使用computed计算属性的时候如果操作的原始数据是引用类型的话,其实操作之后原始数据也被改变了吧,比如上面的例子中this.newsList也改变了,只是定义的全局的newsList对象没有变而已。胖 我理解的对吗

    青灯暮雨10个月前 (10-04)回复
    • 全局的newList也改变了,数组的reverse方法本来就会修改数组本身

      匿名8个月前 (12-01)回复
  27. #18

    和angularjs太相像了

    天煞人化10个月前 (09-28)回复
  28. #17

    胖哥在上海吗 我要请你吃饭

    ANewMessage10个月前 (09-20)回复
    • 我不在上海,你可以加QQ群,到上海了我找你。

      技术胖10个月前 (09-20)回复
  29. #16

    两天撸完前两季 在胖大神带领下 感觉前途一片光明呀

    男二号11个月前 (09-06)回复
    • 继续努力加油。祝你早日成神。

      技术胖11个月前 (09-07)回复
  30. #15

    {{count}}

    var btn={
    template:’组件add’,
    methods:{
    add:function(){
    alert(12);
    this.count++;
    }
    }
    }
    我不用.native修饰符,那它就应该调用组件里的方法 啊,但为什么没有调用啊?求解迷惑

    魏欣11个月前 (09-04)回复
  31. #14

    看了胖哥的视频学到了很多东西,谢谢胖哥

    洪涛11个月前 (08-22)回复
  32. #13

    胖哥666

    小罗11个月前 (08-21)回复
  33. #12

    胖哥你的不对呀,
    return ‘¥’+this.price+ ‘元’就行了

    return this.price = ‘¥’+this.price+ ‘元’就修改了原始数据了

    Pink丶缤11个月前 (08-16)回复
    • 对啊,胖哥说不会污染源数据,但我在控制台打印发现源数据已经改变了

      匿名5个月前 (03-01)回复
  34. #11

    胖哥我月薪3000

    Holin11个月前 (08-10)回复
  35. #10

    if(num!=”){this.a+=num}
    else{this.a++}
    以上的代码 在 @click=’add()’传入空值的时候,逻辑走else部分,画面点击按钮后出现NaN
    解决:if(num!=” && num!=null) 自己加了

    Miamin12个月前 (08-03)回复
  36. #9

    胖哥,像特殊字符这种,比如人民币的符号有 ¥这种输出的,在return this.price = ‘¥’ + this.price;这样输出是没有用的,有什么办法吗?因为有的符号打真的是打不出来怎么办,只有靠这种html特殊字符的方式输出。。。

    lomin12个月前 (08-03)回复
  37. #8

    支持胖哥!!

    Npg12个月前 (07-26)回复
  38. #7

    还是修改到原始数据了啊,data里面的price,我{{price}}了下和compputed选项里面的一样。直接选择return(‘¥’+this.price+’元。’)。是不是可以认为这是vue提供的思路,逻辑还得靠自己。

    1年前 (2017-07-22)回复
  39. #6

    为什么总是评论失败?

    webwuyou1年前 (2017-07-07)回复
  40. #5

    胖哥我要请你吃饭!!!!

    boys1年前 (2017-06-23)回复
    • 好的,有时间我们喝点小酒。

      技术胖1年前 (2017-06-23)回复
  41. #4

    胖哥,你是我心中的刘德华

    小菜一碟1年前 (2017-06-22)回复
    • 其实你也是我心中的周星驰。

      技术胖1年前 (2017-06-22)回复
  42. #3

    胖哥,你的代码我能去哪里下载呢?

    王耀辉1年前 (2017-05-05)回复
    • github上是可以下载的,GitHub源码地址:https://github.com/shenghy/VueDemo
      基础教程的都在这里,至于vue-cli盒vue-router的不提供源码下载。

      技术胖1年前 (2017-05-05)回复
  43. #2

    var btn = {
    template :
    Add
    ,
    };
    將事件指令直接寫在組件的模板裏,爲什麽不會生效?我的分析:在外部申明的組件對象 ,無法綁定到方法,構造器選項裏直接聲明組件是可以的!

    想求教下胖哥你的理解?

    Junting1年前 (2017-04-27)回复
    • var btn = {
      template :
      <button class="ui blue button" @click.native="add(5)">Add</button>
      ,
      };

      Junting1年前 (2017-04-27)回复
      • 可以啊的

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

    胖哥,视频看完了,急需后面的教学啊

    lee1年前 (2017-04-07)回复
    • 好的,最近新项目开始,所以比较忙,但是我从今天开始更新啊。

      技术胖1年前 (2017-04-09)回复