TaffarelXavier/gerador-content.md

## gerador-content.md

      
    Raw
  

              gerador-content.md
            
          
    <!doctype html>
<html lang="pt-br">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>html5boilerplate Bootstrap com Vue</title>
</head>

<body>
    <div class="container-fluid">
        <div id="example" v-if="false">
            <p>Original message: "{{ message }}"</p>
            <!-- <p>Computed reversed message: "{{ reversedMessage }}"</p> -->
            <p>Reversed message: "{{ reverseMessage() }}"</p>
            {{ now }}
        </div>
        <div id="watch-example">
            <p>
                Ask a yes/no question:
                <input v-model="question">
            </p>
            <p>{{ answer }}</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script>
        var app = new Vue({
            el: '#example',
            data: { message: 'Olá Vue!' },
            mounted: function () {
                console.log('Teste');
            },
            computed: {
                // a computed getter
                reversedMessage: function () {
                    // `this` points to the vm instance
                    return this.message.split('').reverse().join('')
                },
                now: function () {
                    return Date.now()
                }
            },
            methods: {
                reverseMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })

        var watchExampleVM = new Vue({
            el: '#watch-example',
            data: {
                question: '',
                answer: 'I cannot give you an answer until you ask a question!'
            },
            watch: {
                // whenever question changes, this function will run
                question: function (newQuestion, oldQuestion) {
                    this.answer = 'Waiting for you to stop typing...'
                    this.debouncedGetAnswer()
                }
            },
            created: function () {
                const array1 = [1, 2, 3, 4, 5];
                const array2 = [3, 4, 5, 6, 7];
                const differenceArray = _.difference(array1, array2);
                console.log(differenceArray);

                this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
            },
            methods: {
                getAnswer: function () {
                    if (this.question.indexOf('?') === -1) {
                        this.answer = 'Questions usually contain a question mark. ;-)'
                        return
                    }
                    this.answer = 'Thinking...'
                    var vm = this
                    axios.get('https://yesno.wtf/api')
                        .then(function (response) {
                            vm.answer = _.capitalize(response.data.answer)
                        })
                        .catch(function (error) {
                            vm.answer = 'Error! Could not reach the API. ' + error
                        })
                }
            }
        })
    </script>
</body>

</html>
No results found