Топ вопросов, как что-то сделать на Vue.js (Быстрые ответы)

Быстрые ссылки, чтобы не искать

• Как на Vue.js вставить значение атрибута?
• Как добавлять и изменять классы на vue.js
• Как получить значение checkbox на vue.js
• Как добавить заготовленный html на vue.js
• Как использовать циклы на vue.js
• Как использовать условия на vue.js
• Как отключить кнопку (disabled) на vue.js
• События на vue.js

Как на Vue.js вставить значение атрибута?

<div id="app">
  <img :src="imgLink" alt="Image">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    imgLink: 'http://site.com/image.png'
  }
})
</script>

Так же можно использовать такой метод для любого тэга. К примеру :title=»imgLink», :alt, :href.

Как добавлять и изменять классы на vue.js

<div id="app">
  <p :class="['green', activeClass, {'hide': hideClass}]">Hello world</p>
  <button @click="changeClass()">Change class</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    hideClass: false
  },
  methods:{
    changeClass(){
      this.hideClass = !this.hideClass;
    }
  }
})
</script>

В данном примере, по нажатию на кнопку «Change class«, будет вызываться метод changeClass, где мы меняем значение переменной hideClass на true/false. И в зависимости от значения, будет удалятся/добавляться класс hide.

Как получить значение checkbox на vue.js

<div id="app">
  <input type="checkbox" name="checkbox" @change="getStatus($event)">
</div>

<script>
var app = new Vue({
  el: '#app',
  methods:{
    getStatus(e){
      alert(e.target.checked);
    }
  }
})
</script>

Или так

<div id="app">
  <input type="checkbox" name="checkbox" v-model="checkbox" @change="getStatus()">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    checkbox: true
  },
  methods:{
    getStatus(){
      console.log(this.checkbox);
    }
  }
})
</script>

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

Как добавить заготовленный html на vue.js

<div id="app">
  <div v-html="vueHtml"></div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    vueHtml: '<p>Hello world</p>'
  },
})
</script>

Бывает и такие моменты, когда надо добавить заготовленный html

Как использовать циклы на vue.js

<div id="app">
  <ul>
    <li v-for="task in tasks">
      <p>{{task.id}} - {{task.text}}</p>
    </li>
  </ul>
</div>

<script>
var app = new Vue({
  el: '#app',
    data: {
    tasks:[
      {
        id: 1,
        text: 'Hello world',      
      },
      {
        id: 2,
        text: 'Hello world',  
      },
      {
        id: 3,
        text: 'Hello world',  
      }
    ]
  },
})
</script>

Если вам нужно отображать индекс текущего элемента, то можно использовать следующий вариант:

<li v-for="(task, index) in tasks">
      <p>{{task.id}} - {{task.text}} - {{index}}</p>
</li>

Как использовать условия на vue.js

<div id="app">
  <div v-if="showData">First div</div>
  <div v-else>Second div</div>
  <div v-show="showData">Other div</div>
  
  <button @click="changeState()">Change state</button>
</div>

<script>
var app = new Vue({
  el: '#app',
    data: {
    showData: false
  },
  methods:{
    changeState(){
      this.showData = !this.showData;
    }
  }
})
</script>

При использовании v-if , v-else html полностью удаляется в отличии от v-show где устанавливается класс display: none;

v-show не работает вместе с v-else!

Как отключить кнопку (disabled) на vue.js

<div id="app">
  <button :disabled="disableButton">Change state</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    disableButton: true
  },
})
</script>

События на vue.js

@mouseover="" // При наведении курсора
@click="" // при нажатии кнопки мыши
@change="" // при изменении поля
@keyup="" // при введении текста в поле, можно еще так @keyup.enter
@submit="" // при отправки формы
@scroll="" // при прокрутке страницы

Пожалуй это самые популярные вопросы касающиеся vue.js , если у вас остались вопросы, задавайте в комментариях, буду пополнять список топ вопросов!