Vue.js 2 - Простые примеры - Часть 3

index.html

<!-- Первый пример -->
<h2>Первый пример</h2>
<ul id="repeat-object1">
  <li v-for="value in user" v-cloak>
    {{ value }}
  </li>
</ul>
<hr />

<!-- Второй пример -->
<h2>Второй пример</h2>
<ul id="repeat-object2">
  <li v-for="(value, key) in user" v-cloak>
   {{ key }} : {{ value }}
  </li>
</ul>
<hr />

<!-- Третий пример -->
<h2>Третий пример</h2>
<ul id="repeat-object3">
  <li v-for="(value, key, index) in user" v-cloak>
   {{ index }}. {{ key }} : {{ value }}
  </li>
</ul>
<hr />

<!-- Четвертый пример - TODO -->
<h2>Четверты пример - TODO</h2>
<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Добавить todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      :key="index"
      :title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
<hr />

<!-- Пятый пример -->
<h2>Пятый пример</h2>
<div id="example-1">
  <button v-on:click="counter += 1">+1</button>
  <p>Кнопка выше была нажата {{counter}} раз</p>
</div>
<hr />

<!-- Шестой пример -->
<h2>Шестой пример</h2>
<div id="example-2">
  <!-- `greet` — это название метода, определённого ниже -->
  <button v-on:click="greet">Поприветствовать</button>
</div>
<hr />

<!-- Седьмой пример -->
<h2>Седьмой пример</h2>
<div id="example-3">
  <button v-on:click="say('hi')">Скажи hi</button>
  <button v-on:click="say('what')">Скажи what</button>
  <button v-on:click="warn('Форма пока не может быть отправлена.', $event)">Отправить</button>
</div>
<hr />

<!-- Восьмой пример -->
<h2>Восьмой пример</h2>
<div id="range">
  <span v-for="n in 10" v-cloak>{{ n }} </span>
</div>
<hr />

script.babel

// Первый пример
new Vue({
  el: '#repeat-object1',
  data: {
    user: {
      firstName: 'Иван',
      lastName: 'Петров',
      age: 30
    }
  }
});

//Второй пример
new Vue({
  el: '#repeat-object2',
  data: {
    user: {
      firstName: 'Иван',
      lastName: 'Петров',
      age: 30
    }
  }
});

//Третий пример
new Vue({
  el: '#repeat-object3',
  data: {
    user: {
      firstName: 'Иван',
      lastName: 'Петров',
      age: 30
    }
  }
});

//Четвертый пример - TODO
Vue.component('todo-item', {
  template: '\
    <li v-cloak >\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
});

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Вымыть посуду',
      'Вынести мусор',
      'Подстричь газон'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
});

//Пятый пример
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
});

//Шестой пример
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js',
  },
  // определяйте методы в объекте `methods`
  methods: {
    greet: function (event) {
      // `this` внутри методов указывает на экземпляр Vue
      alert('Привет, ' + this.name + '!')
      // `event` — нативное событие DOM
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
});

// Седьмой пример
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    },
    warn: function (message, event) {
      // теперь у нас есть доступ к нативному событию
        if (event){
          event.preventDefault();
          alert(message);
        } 
       }   
    }
});

// Восьмой пример
new Vue({ el: '#range' })

scripts

<script src="https://unpkg.com/vue"></script>

style.css

* {
  font-family: sans-serif;
}

[v-cloak] {
  display: none;
}

vue-js-2-3.markdown

Vue.js 2 - Простые примеры - Часть 3

A Pen by Dmitriy Zatulovskiy on CodePen.

License.