vue构造器选项

1.什么是构造器选项

构造器选项就是在Vue构造器里的配置功能的前缀（Vue已经给我们定义好了）

2.propsData Option 全局扩展的数据传递

   <div id="app">
       <wzq></wzq>
    </div>
    <script>
        var wzq = Vue.extend({
            template:`
            <p>{{message}}---{{test}}</p>
            `,
            data:function(){
                return {
                    message:'new Hello'
                }
            },
            props:['test']
        })
        new wzq({propsData:{test:'wzq'}}).$mount('wzq');

    </script>    

在自定义标签的基础上通过propsData进行数据传递，然后通过props进行接收。将接收到的数据通过插值的方式写入模板

3.computed Option 计算选项

  <div id="app">
       <ol>
           <li v-for='item in reverseNews'>
               {{item.title}} {{item.date}}
           </li>
       </ol>
    </div>
    <script>
        var newsList=[
    {title:'习近平:推动改革补短板强弱项激活力抓落实',date:'2019/7/23'},
    {title:'美国正造就一个可能无法战胜的敌人',date:'2019/7/24'},
    {title:'多地发布最低工资“新标准”,六省市月超两千元',date:'2019/7/25'},
    {title:'北京等多地出台新政,“夏日经济”成为消费新亮点',date:'2019/7/25'},
];
   var app = new Vue({
       el:'#app',
       data:{
           newsList:newsList
       },
       computed:{
        reverseNews:function(){
        return this.newsList.reverse();
            }
        }
   })

    </script>  

通过reverse()函数将数组倒叙排序。可以做到在不污染源数据的情况下对数组进行重组。

4.Methods Option 方法选项

 <div id="app">
       {{message}}
       <span @click="add">增加</span>
    </div>
    <script>
      
   var app = new Vue({
       el:'#app',
       data:{
           message:1
       },
       methods:{
            add:function(){
                this.message++
            }
       }
   })

    </script>   

这个methods最基础的用法，通过绑定事件，对dom元素进行操作。

 <div id="app">
       {{message}}
       <button @click="add(2)">增加</button>
    </div>
    <script>
      
   var app = new Vue({
       el:'#app',
       data:{
           message:1
       },
       methods:{
            add:function(a){
                if(a!=''){this.message+=a}else{
                    this.message++
                }
                
            }
       }
   })

    </script>  

通过在方法中传入参数，然后在方法中进行对应的业务处理。
组件中调用原始构造器中的方法：@click.native
外部调用构造器中的方法 app.add()（直接通过全称调用构造器中的方法）

5.Watch 监控数据变化

构造器中匿名函数中俩个值（新值，就值）通过值的变化进行具体的业务处理
构造器外监控数据 app.$watch(‘监控的值’，function(新值，旧值){})

6.Mixins 混入选项

值是一个数组，功能外部定义，尽量减少污染构造器。混入的优先级高于原生的。
全局混入优先级高于构造器中的混入
Vue.mixin({
实际功能
})

7.Entends 扩展选项

**1.Delimiters**
值为数组 重新定义插值形式，Vue默认的插值是双大括号{{}}，当与后端赋值发生冲突时使用。

改变默认的插值形式。

原有的直接按字符串输出。