Vue学习笔记——构造器里的选项【转自jspang】

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

[code]var  header_a = Vue.extend({
    template:`<p>{{message}}-{{a}}</p>`,
    data:function(){
        return {
            message:'Hello,I am Header'
        }
    },
    props:['a']
});

new header_a({propsData:{a:1}}).$mount('header');

 

第2节：computed Option  计算选项

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

1、格式化输出结果：

[code]<div id="app">
     {{newPrice}}
</div>
computed:{
    newPrice:function(){
        return this.price='￥' + this.price + '元';
    }
}

2、用计算属性反转数组

[code]var newsList=[
    {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
    {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
    {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
    {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
];

[code]<ul>
    <li v-for="item in reverseNews">{{item.title}}--{{item.date}}</li>
</ul>

computed:{
    reverseNews:function(){
        return this.newsList.reverse();
    }
}

computed 属性是非常有用，在输出数据前可以轻松的改变数据。

 

第3节：Methods Option  方法选项

1、methods中参数的传递

使用方法和正常的javascript传递参数的方法一样，分为两部：

• 在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.

• 调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.

2、methods中的$event参数

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

传递：<button @click=”add(2,$event)”>add</button> 。

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

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

[code]// 声明btn对象：
var btn={
    template:`<button>组件Add</button>`    
}

// 在构造器里声明：
components:{
    "btn":btn
}

// 用.native修饰器来调用构造器里的add方法
<p><btn @click.native="add(3)"></btn></p>

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

这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

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

 

第4节：Watch 选项 监控数据

[code]var suggestion=['T恤短袖','夹克长裙','棉衣羽绒服'];

// 方法一：
watch:{
temperature:function(newVal,oldVal){
        if(newVal>=26){
            this.suggestion=suggestion[0];
        }else if(newVal<26 && newVal >=0){
          this.suggestion=suggestion[1];
        }else{
            this.suggestion=suggestion[2];
        }
    }
}

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

 

第5节：Mixins 混入选项操作

Mixins一般有两种用途：

• 在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

• 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

1、Mixins的基本用法

     希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.    

[code]//额外临时加入时，用于显示日志
     var addLog={
            updated:function(){
               console.log("数据放生变化,变化成"+this.num+".");
            }
        }

// 加入选项mixins
     mixins:[addLog]//混入

2、mixins的调用顺序

     混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。     

[code]// 加入updated的钩子函数
     updated:function(){
           console.log("构造器里的updated方法。")
     }

数据发生变化时，控制台输出的是：

• mixins数据放生变化,变化成2.

• 构造器里的updated方法。

PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。

 

3、全局API混入方式

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

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

 

第6节：Extends Option  扩展选项

通过外部增加对象的形式，对构造器进行扩展。它和我们上节课讲的混入非常的类似。

[code]var bbb={
created:function(){
console.log("我是被扩展出来的");
},
methods:{
add:function(){
console.log('我是被扩展出来的方法！');
}
}
};
// 加入选项extends
extends:bbb

 

第7节：delimiters 选项

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

// 现在我们的插值形式就变成了${}。

delimiters:['${','}']

delimiters选项中存放的是一个数组，数组中存放两个元素，中间用逗号隔开。

 

阅读更多