vue 的一些属性方法

propsData Option  全局扩展的数据传递

 html:  <header></header>

js:

输出：  hello I am Header -- 1

computed Option  计算选项

htmL:        <li v-for="item in reverseNews">{{item.date}}--{{item.title}}</li>

js:

 

 

Methods Option  方法选项

一、methods中参数的传递

 <p><button @click="add(2)">add</button></p>

二、methods中的$event参数

传递：<button @click=”add(2,$event)”>add</button> 。     交互性要求很高的时候使用

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

声明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>

 

Watch 选项 监控数据

数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子

有时候watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。

 

//atch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。
app.$watch('wendu',function(newVal,oldVal){
     if(newVal>=26){
      this.chuanyi=suggestion[0]
     }else if(newVal<26&&newVal>0){
      this.chuanyi=suggestion[1]
      }else{
     this.chuanyi=suggestion[2]
    }
})

Mixins 混入选项操作

Mixins一般有两种用途：

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

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

二、mixins的调用顺序

，都是混入的先执行，然后构造器里的再执行，

三、全局API混入方式  

我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。  

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

Extends Option  扩展选项