Vue.js ScreenshotMaker Część 2: Używanie Jade i zmiennych

By Piotr Sikora

javascript

Spis treści

Każdy projekt potrzebuje ewolucji. Po komentarzu Petera van Meijgaard (https://github.com/petervmeijgaard) w poprzednim poście (http://fedojo.com/vue-js-first-look-and-test/) wprowadziłem kilka zmian.

Zmiany w zmiennych

Wcześniej:

makeScreenshot: function(e) {
                    this.$set('form', false);
                    this.$set('inprogresss', true);

                    Vue.http.get('http://localhost:8888/screenshot?url='+this.url).then((response) => {
                        var res = JSON.parse(response.body);
                        this.$set('success', true);
                        this.$set('inprogresss', false);
                    }, (response) => {
                        this.$set('error', true);
                        this.$set('inprogresss', false);
                    });
}

Obecnie:

methods: {
                makeScreenshot: function(e) {
                    this.form = false;
                    this.inprogress = true;

                    Vue.http.get('http://localhost:8888/screenshot?url='+this.url).then((response) => {
                        var res = JSON.parse(response.body);
                        this.success = true;
                        this.inprogress = false;
                    }, (response) => {
                        this.error = true;
                        this.inprogress = false;
                    });
                }
            }

Więc zmiany są widoczne w każdym wywołaniu zmiennych zdefiniowanych w funkcji data:

data(){
                return {
                    form: true,
                    error: false,
                    success: false,
                    inprogress: false,
                    url: ''
                }
},

Nie wymaga użycia:

this.$set('success', true);

Można to zrobić przez:

this.success = true;

Użycie JADE zamiast surowego HTML

Uwielbiam preprocesory i chciałem użyć szablonów JADE. W Vue.js możliwe jest zdefiniowanie szablonu w pliku .vue jako JADE. Aby to zrobić, musisz dodać JADE do swoich node_modules:

<pre class="line-numbers"><code class="language-javascript">sudo npm i jade --save
</code></pre>

Teraz możesz umieścić swój kod JADE w sekcji template:

<template>
    p To jest screenshotmaker!
    div(v-if="form")
        input(v-model="url", placeholder="URL")
        button(v-on:click="makeScreenshot") Zrób zrzut ekranu
    div(v-if="error")
        p Błąd
    div(v-if="success")
        p Zrzut ekranu wykonany!
    div(v-if="inprogress")
        p W trakcie
</template>

<script lang="babel">
    import Vue from 'vue';

    export default{
        data(){
            return {
                form: true,
                error: false,
                success: false,
                inprogress: false,
                url: ''
            }
        },
        methods: {
            makeScreenshot: function (e) {
                this.form = false;
                this.inprogress = true;

                Vue.http.get('http://localhost:8888/screenshot?url=' + this.url).then((response) => {
                    var res = JSON.parse(response.body);
                    this.success = true;
                    this.inprogress = false;
                }, (response) => {
                    this.error = true;
                    this.inprogress = false;
                });
            }
        }
    }