(第三季)Vue2.0-选项

propsData Option 全局扩展的数据传递

扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。
我们用propsData三步解决传值：
1、在全局扩展里加入props进行接收。propsData:{a:1}
2、传递时用propsData进行传递。props:[‘a’]
3、用插值的形式写入模板。{{ a }}

computed Option 计算选项

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

    

        金额:{{newPrice}}
        

            

                标题:{{newList.title}} 时间:{{newList.date}}
            
        
    
    
    

Methods Option 方法选项

methods中参数的传递

 

        {{a}}
        增加
    

    

methods中的$event参数

    

        {{a}}
        增加
    

    

我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。

event.png

native 给组件绑定构造器里的原生事件。

在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

     

        {{a}}
        
    
        外部调用内部构造器里面的方法
    

作用域外部调用构造器里的方法

 

        {{a}}
    
        外部调用内部构造器里面的方法
    

Watch 选项 监控数据

看一个监控变化的案例

       
今日温度:{{wendu}}°C
 
       
穿衣建议:{{chuanyi}}
       增加温度
       增加温度
    

    

用实例属性写watch监控

    

       
今日温度:{{wendu}}°C
 
       
穿衣建议:{{chuanyi}}
       增加温度
       增加温度
    

    

mixins的调用顺序

从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，混入的全局混入先执行

Extends Option 扩展选项

当原生的方法与扩展的方法重名时只执行原生的方法混入同样如此

    

        {{num}}
        
增加
    
    

delimiters 选项

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

    

        ${num}