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

【第四季】Vue2.0视频教程-实例和内置组件(共4集)

概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会,让Vue和其他框架一起使用。

第1节:实例入门-实例属性

一、Vue和Jquery.js一起使用

1、下载并引入jquery框架

下载可以去官网进行下载,我这里使用的版本是3.1.1,下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery,只要可以顺利引入就可以了。

试着作一个案例,在DOM被挂载后修改里边的内容。

现在页面显示是:我是jQuery,而不是hello Vue了。

二、实例调用自定义方法

在Vue的构造器里我们写一个add方法,然后我们用实例的方法调用它。

构造器里的add方法:

实例调用:

PS:我们有可能把app.add()的括号忘记或省略,这时候我们得到的就是方法的字符串,但是并没有执行,所以必须要加上括号。

作业:利用console.log把app打印出来,看看里边到底包含了哪些属性和方法。因为里边的属性很多,这里只是简单的介绍。


1 2 3 4
未经允许不得转载:技术胖-胜洪宇关注web前端技术 » 【第四季】Vue2.0视频教程-实例和内置组件(共4集)
分享到: 更多 (0)

评论 33

  1. #21

    使用$on添加了一个方法后,能不能在作用域内部直接使用这个方法?怎么使用呢?

    匿名2个月前 (03-25)回复
  2. #20

    使用$on添加了一个方法后,能不能在作用域内部直接使用这个方法?

    匿名2个月前 (03-11)回复
  3. #19

    胖哥哥,$(‘#app’).html(‘我是jQuery!’); 提示ReferenceError: $ is not defined是为什么啊 。

    匿名2个月前 (03-11)回复
  4. #18

    胖哥是打赏了以后这里的vue所有视频我都可以下载了吗?还是其他的视频也可以下载

    匿名3个月前 (02-08)回复
    • 是的,打赏后技术胖所有免费视频都可以下载观看。

      技术胖3个月前 (02-09)回复
  5. #17

    胖哥,在构造器外部添加事件时,我把function(){}写成箭头函数 app.$on(‘reduce’,()=>{console.log(‘执行了reduce’); this.num–})
    这样只有打印了“执行了reduce”, 但是num的值没有发生变化,这是为什么呢

    匿名3个月前 (02-05)回复
    • num– ?

      匿名3个月前 (02-08)回复
    • emit一下

      匿名2个月前 (03-22)回复
  6. #16

    胖哥,感觉所有的内置组件在.vue文件里不知道怎么写了,看见您的课程都是在.html文件里写代码

    匿名3个月前 (02-05)回复
    • 你需要继续往下看,看到vue-cli的教程就是全部用vue文件写程序了.

      技术胖3个月前 (02-06)回复
  7. #15

    喜欢你,没道理

    匿名4个月前 (01-19)回复
  8. #14

    为什么同时注册全局组件和局部组件,只显示全局组件

    匿名4个月前 (01-12)回复
  9. #13

    胖哥,请问不使用webpack如何使用.vue文件?

    匿名5个月前 (01-04)回复
  10. #12

    $destroy卸载之后 ,怎么不能用$forceUpdate来恢复呢?一个解绑,一个刷新,应该是可以恢复的呀

    匿名5个月前 (12-28)回复
    • 这个你可以看一下Vue官方的生命周期表。
      destroy触发的钩子函数在update钩子函数之后,所以无法影响之前的update。

      匿名5个月前 (12-29)回复
  11. #11

    从第一季看到这里,问个问题,vue中template和component区别

    匿名5个月前 (12-20)回复
    • 感觉component包含template,template只是一段html代码,组件可以添加数据,方法等等

      匿名5个月前 (12-29)回复
  12. #10

    不错,跟着胖哥混,有肉吃。

    匿名5个月前 (12-19)回复
  13. #9

    胖哥可不可以讲解一下vue上传文件的问题,网上的东西很碎。跪求跪求

    匿名5个月前 (12-07)回复
    • 可以,请关注博客,以后会出更多的视频教程。

      技术胖5个月前 (12-08)回复
  14. #8

    胖哥,vue里面的 v-extend,vue.extend和component区别是什么啊?我看一些博客中的解释,正如楼上有人说的,组件extend是直接在components里面注册的,我有些迷茫,能不能解释一下。

    游园惊梦7个月前 (10-26)回复
  15. #7

    为啥要引入jQuery? 给我一个完美的解释?

    技术宅7个月前 (10-22)回复
    • 没必要引入,只是有些项目中有些人想引入。录课时很多小伙伴问我的问题,就在视频中进行讲解。

      技术胖7个月前 (10-22)回复
  16. #6

    这里的$符号,如果引入了JQ,会起冲突吗?如果起冲突,那要怎么解决呀!

    三刀流海贼王7个月前 (10-12)回复
    • 会起冲突,但是jquery的$我们可以二次定制,比如定制成jqeury,这样就不会冲突了。

      技术胖7个月前 (10-22)回复
  17. #5

    感觉这个slot好乱,一个值传来传去,不知道在干嘛,bla bla bla

    jinlong8个月前 (10-04)回复
    • 同感, 这个slot设计的有点绕

      匿名4个月前 (01-06)回复
  18. #4

    胖哥,请问是vue2.0的吗?为什么我越看越不对劲啊,我用vue-cli写项目,没有$mount挂载这些东西 啊,还有组件extend不是直接在components里面注册就好了的吗?求指教胖哥

    old-jiang11个月前 (06-28)回复
    • 1. $mount 这个东西看生命周期,值没有写el的情况下才会用到。 2. Vue.extend的对象,直接放在components下是可以成功注册的。

      匿名5个月前 (12-11)回复
  19. #3

    支持。教程很好,结合官方文档学习的效率高多了。

    放个1年前 (2017-05-16)回复
  20. #2

    胖哥,第1节那个,为什么我用mounted,不用实现输出 我的是jQuery!
    用created才可以。

    ch5631年前 (2017-04-18)回复
    • 检查自己的代码

      李成8个月前 (09-16)回复
  21. #1

    教学质量很高,都能理解和接受!感谢胖的共享!支持!

    peach1年前 (2017-04-16)回复