Vue.js. Початок роботи.

Фронтенд розробка JavaScript. -> Vue.js. Початок роботи.

Vue.js. Початок роботи.

Vue не підтримує IE8 і нижче

Старт проекту на чистому vue.

Створюємо index.html

<!DOCTYPE html>
<html>
    <head><title>Vue start</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
          </div>
        <script>
           var app = new Vue({
            el: '#app',
            data: {
              message: 'Hello Vue!'
            }
          })
        </script>
    </body>
</html>

Зв’язування атрибута тега зі змінною.

    <div id="app">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds
            to see my dynamically bound title!
          </span>
      </div>
    <script>
       var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>

Двостороннє зв’язування

<input v-model="message">

Умови

<span v-if="seen">Now you see me</span>

Цикли

<li v-for="todo in todos">
  {{ todo.text }}
</li>

Управління подіями

<button v-on:click="reverseMessage">Reverse Message</button>
...
var app5 = new Vue({
  ...
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

або

@click="triggerReadMore($event)"

Старт проекту за допомогою CLI.

Встановлення.

npm install -g @vue/cli

Старт проекту.

vue create hello-world

Старт проекту на Nuxt.

npm init nuxt-app <project-name>