post.jpg

Vue.js . Подключение, основные директивы

Vue - это прогрессивный фреймворк  для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, таких как React и Angular, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими  библиотеками и существующими проектами.

Vue.js не использует виртуальный DOM, а работает напрямую с ним в качестве шаблона, сохраняя ссылки на существующие узлы для связывания.

Данные и DOM во Vue реактивно связаны. Главное правило - вызывать экземпляр Vue, если DOM уже загружен, иначе он не будет работать.


<body>
  <div id="app"></div>
</body>
<script type="text/javascript">
  var app = new Vue({})
</script>
 
Подключение

Вообще-то фреймворк Vue.js вполне самодостаточен и для своей работы не требует подключения сторонних библиотек (Bootstrap, JQuery), но все-таки некоторые возможности в нем не заложены. Основное, что не включает поставка "из коробки", - это маршрутизация или Ajax-функции ( JQuery.ajax() , JQuery.get() ). Поэтому, как правило, предполагается, что приложение Vue строится с использованием внешних модулей.

Подключать фреймворк в проект нужно во входном файле  ( index.html, index.php ), в самом низу, перед закрытием тега html.

CDN:


<!-- версия для разработки, включает отображение полезных предупреждений в консоли -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- production-версия, оптимизированная для размера и скорости-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Рекомендуется указывать ссылку на конкретную версию , чтобы потом можно было производить обновление вручную:


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

Можно также скачать файл фреймворка и подключить его в проект, указав локальный путь до скриптов.

При создании крупных приложний рекомендуется использовать NPM , тогда установится последняя стабильная версия:

$ npm install vue
 
Основные директивы Vue.js

Декларативная отрисовка:

            <!-- HTML -->
<div id="app">
  {{ message }}
</div>
            // JS  //
var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет, Vue!'
  }
})

Похоже на простую отрисовку шаблона, однако "под капотом" Vue выполнил немало работы. Данные и DOM теперь реактивно связаны.

 В дополнение к интерполяции текста, можно также связывать атрибуты элементов:

               <!-- HTML -->
<div id="app-2">
  <span v-bind:title="message">
    Наведи курсор на меня пару секунд,
    чтобы увидеть динамически связанное значение title!
  </span>
</div>
            // JS //
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Вы загрузили эту страницу в: ' + new Date().toLocaleString()
  }
})

Здесь атрибут v-bind называется директивой. Директивы применяют к отображаемому DOM особое реактивное поведение, управляемое Vue. В данном примере директива говорит “сохраняй значение title этого элемента актуальным при изменении свойства message у экземпляра Vue”.

Условия и циклы.

Управлять присутствием элемента в DOM довольно просто:

            <!-- HTML -->
<div id="app-3">
  <span v-if="seen">Сейчас меня видно</span>
</div>
         // JS  //
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Если в консоли изменить значение app3.seen = false , то сообщение должно исчезнуть. 

 Директива v-for может быть использована для отображения списков, используя данные из массива:

               <!-- HTML -->
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
              // JS //
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Изучить JavaScript' },
      { text: 'Изучить Vue' },
      { text: 'Создать что-нибудь классное' }
    ]
  }
})

Если в консоли ввести app4.todos.push({ 'text': 'Новый элемент' }), то к списку добавится новый элемент.

Работа с пользовательским вводом.

Чтобы пользователи могли взаимодействовать с приложением, можно использовать директиву v-on для наблюдения за событиями, указав метод-обработчик:

             <!-- HTML -->
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Перевернуть сообщение</button>
</div>
            // JS //
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Привет, Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Обратите внимание, что в методе мы просто обновляем состояние нашего приложения, не трогая DOM — всю работу с DOM производит Vue, а код, который вы пишете, занимается только логикой приложения. 

Vue также содержит директиву v-model, позволяющую легко связывать элементы форм и состояние приложения:

           <!-- HTML -->
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
          // JS //
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Привет, Vue!'
  }
})

Компонент Vue-spinner :)

 

Поделиться
Vue - это прогрессивный фреймворк  для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, таких как React и Angular, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими  библиотеками и существующими проектами.

" data-limit="3" data-counter>

КОММЕНТАРИИ (0)