Vue.js как правильно написать hello world?

Question

[beduin01]

Начал изучать vue.js для начала скопипастил пример отсюда:
https://jsfiddle.net/yyx990803/okv0rgrk/

Однако ничего не работает:
img.ctrlv.in/img/15/12/26/567ea09a7598c.png

Что я делаю не так?

В консоли пишет: [Vue warn]: Cannot find element: #app

Answer 1

[Ivanq]

Точно подключилось? В консоли ошибок нет? Кстати, на jsfiddle скрипт выполняется после загрузки (в событии onload), а у вас вне. Попробуйте написать что-то вроде

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });
}

Comments

[Дмитрий Гавриленко]

Да кстати.

[beduin01]

Ошибка в консоли исчезла, однако в браузере по-прежнему выводится: {{ message }}

[Ivanq]

beduin01: Даже не знаю. Давайте тогда попробуем

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });
}

[Ivanq]

beduin01: Но с этим вариантом нужно держать ухо востро.

[Дмитрий Гавриленко]

Ivanq: В смысле?)))

[beduin01]

expirebox.com/download/4c866ed334097ab579a6ebf89bf...

[Ivanq]

Дмитрий Гавриленко: Ну... В таком случае, если уже задается обработчик через window.onload, он затрется, а вместо него появится наш.

[beduin01]

Ivanq: не могли бы у себя проверить rghost.ru/7xFdTZvhS

[beduin01]

да, помогло)

Answer 2

[Дмитрий Гавриленко]

Проверьте консоль. Там много полезной инфы порой можно найти.

напиши как указал в комментариях Ivanq , т.е.

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });
};

У меня сработало.

Comments

[beduin01]

В консоли пишет: [Vue warn]: Cannot find element: #app

[Дмитрий Гавриленко]

beduin01: Ivanq написал про событие загрузки. Cannot find element: #app потому что скрипт выполнился до того как загрузилась разметка, а конкретно div с id = app

[beduin01]

Ivanq: img.ctrlv.in/img/15/12/26/567ea4d1840b2.png

[Дмитрий Гавриленко]

beduin01: а если попробовать указать https://cdn.jsdelivr.net/vue/latest/vue.js

[beduin01]

Дмитрий Гавриленко: тоже самое, вот, если не сложно посмотрите, может я туплю в чем то очевидном rghost.ru/7xFdTZvhS

[Дмитрий Гавриленко]

beduin01: Google не дает скачать (

[beduin01]

Дмитрий Гавриленко: почему??

[beduin01]

expirebox.com/download/4c866ed334097ab579a6ebf89bf...