Введение в Vuejs

Вы использовали Vuejs или все еще запутались?

Сегодня я здесь, чтобы просто рассказать о Vuejs и его использовании.
Давайте начнем учиться с написания кода, а не с чтения длинных абзацев.

Для этого я использую код.
Во-первых, я начал с написания тега div с помощью приложения id.

<div id="app"></div>

Теперь давайте напишем код Vuejs

Vue предлагает нам новый экземпляр Vue, он принимает объект в качестве аргумента.

let app = new Vue({
  el:'#app'
})

Приведенный выше код делает то, что если мы пишем какой-либо код внутри элемента div, он контролируется vue.

первое свойство - el, оно означает, на какой элемент в нашем HTML-коде Vue нужно настроить таргетинг.

Свойство данных: оно управляет состоянием внутри Vue.

Свойство методов: это место, где мы можем определять функции.

Теперь давайте напишем свойства данных и методы

var app = new Vue({
  el:'#app',
  data:{
    name:'Welcome to Vuejs',
    show:true,
    persons:['Gowtham','Aaron','Tonny']
  },
  methods:{
     changeme(){
       this.show = !this.show
    }
  }
})

свойство data и methods - это объекты.

В свойстве data я определил некоторые статические данные, а в свойстве method я объявил функцию changeme.

Теперь давайте используем эти свойства внутри элемента div.

<div id="app">
  <h1 v-if="show">{{name}}</h1>

<ul v-for="person in persons" v-if="show">
    <li>{{person}}</li>
  </ul>
  <button @click="changeme">
    {{show ? 'Hide' : 'Show'}}
  </button>
</div>

Я определил элемент h1 с помощью директивы v-if. Вы видели, что я использовал свойство show, которое мы уже определили внутри свойства данных в нашем экземпляре Vue.

Что делает v-if, так это то, что он отображается в dom только тогда, когда данное условие истинно.

Во-вторых, я использовал неупорядоченный список с директивой v-for.

v-for помогает перебирать массив для этого. Я использовал массив person, который мы уже определили в свойстве data в нашем экземпляре Vue.

Я использовал двойные фигурные скобки, потому что Vue использует шаблонный синтаксис для привязки данных.

последнее, что является элементом кнопки. Я зарегистрировал обработчик щелчка
, для этого я использовал директиву @click, которая является сокращением от v-on: click
, вы можете использовать любой из них.

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

Вы можете использовать Vue в небольших или больших приложениях или можете создавать полноценные одностраничные приложения с помощью Vue.

Надеюсь, вам это понравится. Чтобы узнать больше о Vuejs, посетите Документы.

Ресурсы
Документы Vue
Директивы Vue
Обработка событий в vuejs

Введение в Vuejs