Is it okay to use VUE JS only for working with forms, giving reactivity, etc.?

M

Maxim Zolotoy2019-02-15 10:11:31

Vue.js

Maxim Zolotoy, 2019-02-15 10:11:31

I want to use Laravel and for the frontend, in order not to do reactivity on jikveri, I want to use view. Is it normal? That is, not completely front-end from components to view, but only working with some forms, menus, etc.
Since boss for seo.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Askhat Bikmetov, 2019-02-15
@spacenear

Vue is notable at least for the ease with which it integrates into existing projects. The feature set of this library is, in my opinion, the best implementation of MVVM. Let's say you have a jQuery calculator slider on your site, you've added a chat plugin with an online consultant, and you need to send data to the chat. By adding a view model as a Vue app, you can easily manipulate the data and the view model:

<body>
  <div id="app">
    <p> {{ calculationResult | rub }}</p>
    <!-- Плагин range slider инициализируется через директиву
           В кавычка объект из binding.value из сигнатуры хука -->
    <div v-range-slider="{ min: 0, max: 10 }"></div>
    <!-- Подписка на события осуществляется прямо в html -->
    <button @click="sendToChat">Отправить в чат</button>
    <button @click="toggleChat">Открыть чат</button>
    <button @click="toggleChat">Закрыть чат</button>
    <!-- Чат изолирован от остальной разметки в отдельный компонент -->
    <chat-app v-show="isChatOpen" :result="calculationResult" />
  </div>
</body>

Vue.component('chat-app', {
  // Шаблон это HTML + суперспособности vue, например ref
  template: '<div ref="chat"></div>',
  // Аргумненты компонента, позволяет делать
  // - аннотации типов
  // - валидация
  // - дефолтные значения
  props: {
    result: { type: Number }
  },
  mounted() {
    // Здесь нет смысла использовать директиву, инициализируем чат когда компонент окажется в ДОМе
    // Вместо селекта элемента по например id, мы напрямую получаем из ранее созданной рефки
    this.chatInstance = new SomeChatPlugin(this.$refs.chat)
  },
  watch: {
    // При изменении пропа result, в текстовое поле чата будет добавлен текст
    result(newValue) {
      this.chatInstance.fillText(newValue)
    }
  }
})

new Vue({
  el: '#app',
  filters: {
    // Фильтры это особый способ вызова функции
    // rub(value) === value | rub
    rub(v) {
      const value = Math.round(v)
      switch(value) {
        case 1: return `${value} рубль`
        case 2:
        case 3:
        case 4: return `${value} рубля`
        default: return `${value} рублей`
      }
    }
  },
  directives: {
    rangeSlider: {
      // Директивы имеют свой жизненный цикл
      // Хук inserted это ближайшее к $(document).ready() событие
      /**
        * @param {HTMLElement} el
        * @param {Object} binding https://ru.vuejs.org/v2/guide/custom-directive.html#Аргументы-хуков
        * @param {Vue} context vue instance
        */
      inserted(el, binding, context) {
        $(el).someFancyRangeSlide(binding.value)
          .on('move', newValue => context.updateValue(newValue))
          // События выпускаемые jquery будут обработаны vue
      }
    }
  },
  data() {
    return {
      value: 0,
      calculationResult: 0,
      isChatOpen: false,
    }
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue
    },
    thoggleChat() {
      this.isChatOpen = !this.isChatOpen
    },
    sendToChat() {
      this.calculationResult = this.value
    }
  }
})

The example is synthetic and simplified. However, it vividly illustrates how and why to integrate Vue into any MVC application, or even into a static site. In other matters, all this is not badly covered by jQuery, but it's up to you.

W

WebDev, 2019-02-15
@kirill-93

It is possible and necessary. This is one of the advantages of this framework.