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

propsData不是和属性有关，他用在全局扩展时进行数据传递。propsData用于值的传递，例如下面的a

<body>
    <h4>propsData Option</h4>
    <hr>
    <header></header>

    <script type="text/javascript">
        var header_a = Vue.extend({
            template:`<p>{{message}}-{{a}}</p>`,
            data:function(){
                return{
                    message:'hello,I am header'
                }
            },
            props:['a']
            //propsData用于传值  下面的是传递形式
        });
        new header_a({propsData:{a:1}}).$mount('header');
    </script>
</body>

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

第2节：computed Option计算选项

computed的作用就是对原数据进行改造输出，改造输出包括：格式编辑，大小写转换，顺序重新排列，添加符号等。

先做个读出价格的例子：我们读书的原始数据是price:100 但是我们输出给用户的样子是（￥100元）

<body>
    <h1>computed option</h1>
    <hr>
    <div id="app">
        <p>{{newPrice}}</p>
        <ul>
            <li v-for="item in reversNews">{{item.title}}--{{item.date}}</li>
        </ul>
    </div>

    <script type="text/javascript">
    //定义一个新闻列表，然后按照日期进行排序
        var newsList=[
            {title:'sjkdhfhdkfjha沙发还是分开后',date:'2019/09/27'},
            {title:'8w8r7whdf',date:'2019/09/28'},
            {title:'32shdfhskjg',date:'2019/09/29'},
            {title:'9980981jdshb',date:'2019/09/30'}
        ]

        var app=new Vue({
            el:'#app',
            data:{
                price:100,
                newsList:newsList
            },
            computed:{
                newPrice:function(){
                    return this.price='¥' + this.price+'元';
                },
                reversNews:function(){
                //倒序排列
                    return this.newsList.reverse();
                }
            }
        })
    </script>
</body>

总结：computed 属性是非常有用，在输出数据前可以轻松的改变数据。所以说这节课的代码必须要多敲几遍，加深印象。

第3节：Methods Option方法选项

之前已经学习了部分的构造器里面的methods选项，下面我们系统的总结一下这个选项使用方法和正常的javascript传递参数的方法一样，分为两部：

在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}. 调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.

$event: 传递的$ event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。

传递：

<button @click=”add(2,$event)”>add</button>

。我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性 native 给组件绑定构造器里的原生事件。在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

现在我们把我们的add按钮封装成组件：

声明btn对象：

var btn={
    template:`<button>组件Add</button>`     
}

在构造器里声明：

components:{ "btn":btn } 用.native修饰器来调用构造器里的add方法

<p><btn @click.native="add(3)"></btn></p>

四、作用域外部调用构造器里的方法这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

<button onclick="app.add(4)" >外部调用构造器里的方法</button>

总结代码如下：

<body>
    <h1>computed option</h1>
    <hr>
    <div id="app">
        {{ a }}
        <p><button @click="add(2,$event)">add</button></p>
        <!-- //自己的btn组件
        //需要加native  表示调用构造器中的原始方法 -->
        <p><btn @click.native="add(2,$event)"></btn></p>
    </div>
    <!-- 在构造器外部的话  需要用onclick -->
    <button onclick="app.add(3)">构造器外部add</button>

    <script type="text/javascript">
        var btn={
            template:`<button>组件add</button>`
        }
        var app=new Vue({
            el:'#app',
            data:{
                a:1
            },
            components:{
                "btn":btn
            },
            methods: {
                add:function(num,event){
                    if(num!=''){
                        this.a+=num
                    }else{
                         //点击按钮 每次加1
                        this.a++
                    }
                   console.log(event);

                }
            },
        })
    </script>
</body>

第4节：Watch选项监控数据

数据变化的监控我们经常实用，比如天气预报： 1.温度>26 建议穿T恤 0<温度<26建议穿夹克温度<0 建议穿棉衣总结代码如下：

<body>
    <h1>watch</h1>
    <hr>
    <div id="app">
        <p>今日温度：{{ wendu }}℃</p>
        <p>穿衣建议：{{ chuanyi }}</p>
        <p><button @click="shenggao">升高温度</button><button @click="jiangdi">降低温度</button></p>
    </div>

    <script type="text/javascript">

    var chuanyi_list=['T恤短袖','夹克长裙','棉衣'];
        var app=new Vue({
            el:'#app',
            data:{
                wendu:11,
                chuanyi:'夹克'
            },
            methods: {
                shenggao:function(){
                    this.wendu+=5;
                },
                jiangdi:function(){
                    this.wendu-=5;
                }
            },
            // 这是写在构造器里面
            watch:{
                // 监控wendu的值的新旧变化
                wendu:function(newValue,oldValue){
                    if(newValue>25){
                        this.chuanyi=chuanyi_list[0];
                        // this.chuanyi="T恤短袖";
                    }else if(newValue<26 && newValue>0){
                        this.chuanyi=chuanyi_list[1];
                    }else{
                        this.chuanyi=chuanyi_list[2];
                    }

                }
            }
        })
        // app.$watch('wendu',function(newValue,oldValue)){
        //     if(newValue>25){
        //                 this.chuanyi=changyi_list[0];
        //                 // this.chuanyi="T恤短袖";
        //             }else if(newValue<26 && newValue>0){
        //                 this.chuanyi=changyi_list[1];
        //             }else{
        //                 this.chuanyi=changyi_list[2];
        //             }
        // }
    </script>
</body>

第5节：mixins混入选项操作

Mixins一般有两种用途：

在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。 #一、Mixins的基本用法我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”. mixins的调用顺序从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。

在上边的代码的构造器里我们也加入了updated的钩子函数：

updated:function(){
      console.log("构造器里的updated方法。")
},

这时控制台输出的顺序是：

mixins数据放生变化,变化成2. 构造器里的updated方法。 PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。

三、全局API混入方式我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

Vue.mixin({
    updated:function(){
        console.log('我是全局被混入的');
    }
})

PS：全局混入的执行顺序要前于混入和构造器里的方法。

总结代码如下：

<body>
    <h1>mixins混入</h1>
    <hr>
    <div id="app">
        <p>num:{{num}}</p>
        <p><button @click="add">add</button></p>
    </div>

    <script type="text/javascript">
        var addConsole={
            // 生命周期
            updated:function(){
                console.log("混入先执行，数据发生变化,变成了"+this.num);
            }
        };

        // 全局API混入
        Vue.mixin({
            updated:function(){
                console.log("我是全局的混入");
            }
        })

        var app=new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods: {
              add:function(){
                this.num++;
              }  
            },
            updated:function() {
                console.log("我是原生的update，vue是混入的先执行  原生的后执行");
            },
            mixins:[addConsole]// 混入
        })
    </script>
</body>

第6节：Extends Option扩展选项

当你项目已经写完了，但是又要加需求，你又不想污染你得构造器的时候可以使用扩展选项

PS：delimiters 选项： delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。

delimiters:[' ${','}'] 现在我们的插值形式就变成了$ {}。

总结代码如下：

<body>
    <h1>mixins混入</h1>
    <hr>
    <div id="app">
        <!-- <p>num:{{num}}</p> -->
        {{ num }}
        ${ num }
        <!-- 这是delimiters所产生的 -->
        <p><button @click="add">add</button></p>
    </div>

    <script type="text/javascript">

        var extendsObj={
            updated:function(){
                console.log('我是扩展的updated');
            },
            methods: {
                add:function(){
                    console.log('我是扩展的方法');
                    this.num++;
                }
            },
        };

        var app=new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods: {
              add:function(){
                  console.log("我是原生的方法");
                this.num++;
              }  
            },
            updated:function() {
                console.log("我是原生的update，vue是混入的先执行  原生的后执行");
            },
            // 扩展
            // 混入和扩展很像，混入放数组  扩展放对象
            extends:extendsObj,
            delimiters:['${','}']

        })

    </script>
</body>

未完待续。。。

Vue2.0学习总结—Vue中的选项

Vue2.0学习总结—Vue中的选项

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

第2节：computed Option计算选项

第3节：Methods Option方法选项

四、作用域外部调用构造器里的方法这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

第4节：Watch选项监控数据

第5节：mixins混入选项操作

三、全局API混入方式我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

第6节：Extends Option扩展选项

Vue2.0学习总结—Vue中的选项

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

第2节：computed Option计算选项

第3节：Methods Option方法选项

四、作用域外部调用构造器里的方法 这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

第4节：Watch选项 监控数据

第5节：mixins混入选项操作

三、全局API混入方式 我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

第6节：Extends Option扩展选项

四、作用域外部调用构造器里的方法这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

第4节：Watch选项监控数据

三、全局API混入方式我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：