你将收获

让想学vue的前端爱好者,看一门课就可以轻松上手项目,没有收费项。

适用人群

前端爱好者

课程介绍

课程从Vue2.x版本的入门,一直到实战课程共58集。包括内部指令、全局API、选项、实例和内置组件、Vue-cli、Vue-router、vuex。后有一门Vue实战,带你作一个快餐店的收银系统。

课程目录

学员评价

0.0
  • 0%
  • 0%
  • 0%
  • 0%
  • 0%

暂无评价

同学笔记

  • weixin_45721211 2020-02-26 21:56:45

    来源:Extends Option 扩展选项 查看详情

    extends扩展选项

    通过外部增加对象的形式,对构造器进行扩展。跟mixins混入很相似。

    {{number}}
        <p><button @click="add">add</button></p>
    var extendsObj= {
            updated: function () {
                console.log("我是扩展出来的update");
            },
            methods: {
                add: function () {
                    console.log("我是扩展出来的方法");
                    this.number++;
                }
            }
        }
        var app=new Vue({
            el:'#app',
            data:{
                number:1
            },
            methods:{
                add:function () {
                    console.log("我是构造器里的方法");
                    this.number++;
                }
            },
            updated:function(){
                console.log("原生的update方法");
            },
            extends:extendsObj
        })

    在控制台显示的顺序是,构造器方法先打印,然后是扩展出来的打印,最后是原生的updated方法,对于扩展的方法没有打印是因为,扩展中的方法和构造器中的方法名字相同,所以不会打印扩展器中的方法。

    新手一枚,若有不足,请指正!

  • weixin_45721211 2020-02-26 21:09:45

    来源:Mixins 混入选项操作 查看详情

    mixins混入选项

    Mixins一般有两种用途:

    1. 在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。
    2. 很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。

    基本用法

    {{number}}
        <p><button @click="add">add</button></p>
    var addCon={
            updated:function () {
                console.log("数据更新完成,更新为"+this.number);
            }
        };
    var app=new Vue({
            el:'#app',
            data:{
                number:1
            },
            methods:{
                add:function () {
                    this.number++;
                }
            },
            mixins:[addCon]
        })

    我们现在有个数字点击递增的程序,每次点击增加数字,在控制台打印出提示:“数据发生变化”.

    mixins调用顺序

    1、在构造器中用原生的updated方法

    updated:function(){
              console.log("原生的update方法");
            }

    2、在全局API混入方式

    Vue.mixin({
            updated:function () {
                console.log("全局的update方法");
            }
        })

    运行完代码可以在控制台看到全局API是首先执行,然后是构造器中的mixins选项,最后是构造器中原生updated方法。

    新手一枚,若有不足,请指教!

  • weixin_45721211 2020-02-26 20:30:25

    来源:Watch 选项 监控数据 查看详情

    watch选项

    构造器中的watch选项是用来监听数据。

    我们写一个例子,温度大于26度时,我们建议穿短袖短裤,温度小于26度大于0度时,我们建议穿夹克长裙,温度小于0度时我们建议穿羽绒棉衣。

    <p>今日温度:{{temperature}}℃</p>
        <p>穿衣建议:{{suggest}}</p>
        <p>
            <button @click="add">升高温度</button>
            <button @click="reduce">降低温度</button>
        </p>
    var arrayS=['短袖短裤','夹克长裙','羽绒棉服'];
        var app=new Vue({
            el:'#app',
            data:{
                temperature:4,
                suggest:'夹克长裙'
            },
            methods:{
                add:function () {
                    this.temperature+=4;
                },
                reduce:function () {
                    this.temperature-=4;
                }
            },
            watch:{
                temperature:function (newVal,oldVal) {
                    if(newVal>=26){
                        this.suggest=arrayS[0];
                    }else if(newVal<26&&newVal>0){
                        this.suggest=arrayS[1];
                    }else{
                        this.suggest=arrayS[2];
                    }
                }
            }
        })

    还有可以将watch选项用实例方法写在构造器外部

    app.$watch('temperature',function(newVal,oldVal){
        if(newVal>=26){
            this.suggest=suggest[0];
        }else if(newVal<26 && newVal >0)
        {
            this.suggest=suggest[1];
        }else{
            this.suggest=suggest[2];
        }
    
    })

    新人一枚,若有不足,请指正!

没有更多了