vue2.0学习笔记--extend，computed，自定义组件，watch 监听事件，mixin 混入

一，vue.extend ，propsData

<div id="app">
</div>

<script type="text/javascript">
    var app=Vue.extend({
        template:`<h1>{{message}} {{data}}--{{ex}}</h1>`,
        data:function(){
            return {
                message: "extend--",
                data:23
            }
        },
        props:['ex']
    });
    new app({propsData:{ex:"extend"}}).$mount("#app");
</script>

二，computed （不污染原始数据进行计算）

<div id="app">
    <h1>{{newAge}}</h1>
</div>

<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            age:23
        },
        computed:{
            newAge:function(){
                return this.age+"岁";
            }
        }
    });
</script>

三，自定义组件，调用methods方法

<div id="app">
    <h1>{{age}}</h1>
    <p><btn @click.native="add(2)"></btn></p>
</div>

<script type="text/javascript">
    var btn={
        template:`<button>ADD</button>`,
    };
    var app=new Vue({
        el:"#app",
        data:{
            age:23
        },
        components:{
            "btn":btn
        },
        methods:{
            add:function(num){
                this.age+=num;
            }
        }
    });
</script>

vue作用域外调用vue方法

<div id="app">
    <h1>{{age}}</h1>
</div>
<button onclick="app.add(2)">外部add</button>

<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            age:23
        },
        methods:{
            add:function(num){
                this.age+=num;
            }
        }
    });
</script>

四，watch 监听事件
1，构造器内使用

<div id="app">
    <h1>本次分数{{score}}</h1>
    <h1 style="color: red;">建议：{{suggest}}</h1>
    <button @click="add">add</button>
    <button @click="multi">multi</button>
</div>

<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            score:54,
            suggest:"该努力了"
        },
        methods:{
            add:function(){
                this.score+=8;
            },
            multi:function(){
                this.score-=9;
            },
        },
        watch:{
            score:function(newValue,oldValue){
                if(this.score>60){
                    this.suggest="不错，可以休息下";
                }else{
                    this.suggest="该努力了";
                }
            }
        }
    });
</script>

2，构造器外使用

<div id="app">
    <h1>本次分数{{score}}</h1>
    <h1 style="color: red;">建议：{{suggest}}</h1>
    <button @click="add">add</button>
    <button @click="multi">multi</button>
</div>

<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            score:54,
            suggest:"该努力了"
        },
        methods:{
            add:function(){
                this.score+=8;
            },
            multi:function(){
                this.score-=9;
            },
        },
    });
    app.$watch("score",function(newValue,oldValue){
        if(this.score>60){
            this.suggest="不错，可以休息下";
        }else{
            this.suggest="该努力了";
        }
    });
</script>

五，mixin 混入

<div id="app">
    <h1>{{score}}</h1>
    <button @click="add">add</button>
</div>

<script type="text/javascript">
    var partMix={
        updated:function(){
            console.log("局部混入"+this.score);
        }
    };
    Vue.mixin({
        updated:function(){
            console.log("全局混入"+app.score);
        }
    });
    var app=new Vue({
        el:"#app",
        data:{
            score:54,
        },
        methods:{
            add:function(){
                this.score+=8;
            },
        },
        updated:function(){
            console.log("自身周期函数"+this.score);
        },
        mixins:[partMix]
    });
</script>

六，delimiters

<div id="app">
    <h1>${score}</h1>
</div>

<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            score:54,
        },
        delimiters:['${','}']
    })
</script>