Vue构造器里的选项

作者: PZcoder | 来源:发表于2020-04-12 18:42 被阅读0次

Vue构造器里的选项
Vue.extend扩展实例构造器
Vue2学习笔记：vue实例
Vue 概览
Vue.extend构造器的延伸（10）
选项
Vue 实例
render函数的一些小知识
Vue - Vue.extend() 和 extends
日常

1.propsData选项

<body>
    <header></header>

    <script type="text/javascript">

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

        //此处是标签 类名#header id则是.header
        new header_a({propsData:{a:111}}).$mount('header');
    </script>
</body>

2.computed选项

<body>
    <div id="app">
        <p>{{newPrice}}</p>
        <ul>
            <li v-for="news in reverNews">{{news.title}}-{{news.date}}</li>
        </ul>
    </div>

    <script type="text/javascript">

        var newsLists = [
            {title:'战“疫”中 习近平始终牵挂困难群众',date:'2017/3/24'},
            {title:'声音·记“疫”  致敬这场战疫的中坚力量',date:'2017/3/25'},
            {title:'清明追思 家国永念丨那些应被铭记的战“疫”瞬间',date:'2017/3/26'},
            {title:'前行是最好的纪念',date:'2017/3/27'},
        ];
        var app = new Vue({
            el:'#app',
            data:{
                price:100,
                newsList:newsLists,
            },
            computed:{
                newPrice:function(){
                    return this.price = '￥' + this.price + '元';
                },
                reverNews:function(){
                    return this.newsList.reverse();//倒排序
                }
            },
        })
    </script>
</body>

3.methods选项

<body>
    <div id="app">
        <p>{{count}}</p>
        <button @click="add(3,$event)">add</button>

        <!-- 构造器中调用methods方法 -->
        <p><btn @click.native="add(5)"></btn></p>
    </div>

    <!-- 外部调用methods方法 -->
    <button onclick="app.add(10)">外部ADD</button>

    <script type="text/javascript">
        var btn = {
            template:`<button>组件ADD</button>`
        }

        var app = new Vue({
            el:'#app',
            data:{
                count:1,
            },

            components:{
                "btn":btn,
            },

            methods:{
                add:function(num,event){
                    if(num != ''){
                        this.count += num;
                    }else{
                        this.count ++;
                    }

                    console.log(event);//event包括点击操作的详细信息列表
                }
            }
        })
    </script>
</body>

4.watch选项

<body>
    <div id="app">
        <p>今日温度：{{temperature}} 度</p>
        <p>穿衣建议：{{cloth}}</p>
        <p><button @click="add()">升温</button><button @click="less()">降温</button></p>
    </div>

    <script type="text/javascript">
        var clothsArr = [
            "T恤短袖","夹克长裙","羽绒服"
        ];

        var app = new Vue({
            el:'#app',
            data:{
                temperature:14,
                cloth:'夹克长裙',
            },
            methods:{
                add:function(){
                    this.temperature += 5;
                },
                less:function(){
                    this.temperature -= 5;
                }
            },
            //watch写在构造器内部
            //watch:{
                // temperature:function(newVal,oldVal){
                //     if(newVal >= 26){
                //         this.cloth = clothsArr[0];
                //     }else if(newVal < 26 && newVal >0){
                //         this.cloth = clothsArr[1];
                //     }else{
                //         this.cloth = clothsArr[2];
                //     }
                // }
            //}
        })
        //watch写在构造器外部
        app.$watch('temperature',function(newVal,oldVal){
                    if(newVal >= 26){
                        this.cloth = clothsArr[0];
                    }else if(newVal < 26 && newVal >0){
                        this.cloth = clothsArr[1];
                    }else{
                        this.cloth = clothsArr[2];
                    }
                });
    </script>
</body>

5.mixins混入

<body>
    <h1>mixins option<h1>
    <hr>
    <div id="app">
        <p>{{num}}</p>
        <p><button @click="add()">增加1</button></p>
    </div>

    <script type="text/javascript">
        var addConsole = {
            updated:function(){
                //生命周期
                console.log('数据发生变化，变成了'+this.num);
            }
        };

        Vue.mixin({
            updated:function(){
                console.log('我是全局的混入');//最先执行1
            }
        });

        var app = new Vue({
            el:'#app',
            data:{
                num:1,
            },
            methods:{
                add:function(){
                    this.num ++;
                }
            },
            updated:function(){
                console.log('我是原生的updated');//后执行3
            },
            //混入的先执行2
            mixins:[addConsole]
        })
    </script>
</body>

6.extends扩展

<body>
    <div id="app">
        <p>${num}</p>
        <p><button @click="add()">增加1</button></p>
    </div>

    <script type="text/javascript">

        var extendObj = {
            updated:function(){
                console.log('我是扩展的updated方法');
            },
            methods:{//方法名一样，只执行原生的方法。
                add:function(){
                    console.log('我是扩展出来的的方法add');
                    this.num ++;
                }
            }
        }

        var app = new Vue({
            el:'#app',
            data:{
                num:1,
            },
            methods:{
                add:function(){
                    console.log('我是原生的方法add');
                    this.num ++;
                }
            },

            updated:function(){
                console.log('我是原生的updated');
            },

            extends:extendObj,//只能有1个扩展

            delimiters:['${','}']//差值形式{{}}改成 ${} 
        })
    </script>
</body>