Vue2.0入门学习笔记（三）：选项操作

源码地址：https://gitee.com/xieweikun/vue-demo

PropsData选项

使用propsData，动态为扩展实例架构extend的属性赋值

<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']
    });
    new header_a({propsData: {a: 12}}).$mount('header');
</script>

Computed选项

使用computed，为即将展示的数据进行格式化。

<div id="app">
    <p>{{newPrice}}</p>
    <ul>
        <li v-for="reversNew in reversNews">{{reversNew.title}}-{{reversNew.date}}</li>
    </ul>
</div>
<script type="text/javascript">
    var newList = [
        {title: 'aaaaaaa', date: '2020/6/4'},
        {title: 'ffffff', date: '2020/6/7'},
        {title: 'ccccccc', date: '2020/6/7'},
        {title: 'hhhhhhh', date: '2020/6/8'}
    ];
    var app = new Vue({
        el: '#app',
        data: {
            price: 100,
            newsList: newList
        },
        computed: {
            newPrice: function () {
                return this.price = "￥" + this.price + '元';
            },
            reversNews: function () {
                return this.newsList.reverse();
            }
        }
    })
</script>

Methods选项

使用methods定义方法，包括三种调用方式，一般调用、自定义组件调用、外部调用。

<div id="app">
    <p>{{count}}</p>
    <!-- 一般方法定义 -->
    <p><button @click="add(2,$event)">ADD</button></p>
    <!-- 自定义组件调用构造器中的add方法，使用native -->
    <p><btn @click.native="add(2,$event)"></btn></p>
</div>
<!-- 外部button调用构造器中的add方法 -->
<button onclick="app.add(3)">外部ADD</button>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        components: {
            'btn': {
                template: `<button>组件ADD</button>`
            }
        },
        methods: {
            add: function (num, event) {
                if (num != '') {
                    console.log(event);
                    return this.count += num;
                } else {
                    return this.count++;
                }
            }
        }
    })
</script>

Watch选项

使用watch，用于监控数据。包括两种使用方式，实例构造内部使用监控、实例构造外部使用监控。

<div id="app"></div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        watch:{ // 实例构造内部使用监控
            wendu:function (newVal,oldVal) {
                if(newVal>=26){
                    this.chuanyi=chuanyiArray[0];
                }else if(newVal<26&&newVal>0){
                    this.chuanyi=chuanyiArray[1];
                }else {
                    this.chuanyi=chuanyiArray[2];
                }
            }
        }
    })
    // 实例构造外部使用监控
    app.$watch('wendu', function (newVal, oldVal) {
        if (newVal >= 26) {
            this.chuanyi = chuanyiArray[0];
        } else if (newVal < 26 && newVal > 0) {
            this.chuanyi = chuanyiArray[1];
        } else {
            this.chuanyi = chuanyiArray[2];
        }
    })
</script>

Mixin选项

使用minxin可以不破坏原实例构造的情况下进行扩展。

<div id="app"></div>
<script type="text/javascript">
    var addConsole={
        updated:function () {
            console.log("数据发生变化，变成了"+this.num);
        }
    };
    var app =  new Vue({
        el:'#app',
        updated:function () {
            // 混入的先执行，原生的后执行
            console.log("我是原生的update");
        },
        mixins:[addConsole]
    })
    Vue.mixin({
        updated:function () {
            console.log("我是全局的mixin");
        }
    });
</script>

Extends选项与Delimiters选项

使用extends，用于扩展实例构造器。

使用delimiters，用于自定义取值方式，例如将{{}}改变为${}

<div id="app"></div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                console.log("我是原生的方法");
                this.num++;
            }
        },
        updated: function () {
            // 混入的先执行，原生的后执行
            console.log("我是原生的update");
        },
        extends: {
            updated: function () {
                console.log("我是扩展的updated");
            },
            methods: {
                add: function () {
                    console.log("我是扩展的methods");
                    this.num++;
                }
            }
        },
        delimiters: ['${', '}']
    })
</script>