Блог программиста

Цель: пассивный доход 100 тыс. руб. в мес.

Задачи:

  1. Разработка языка Cj
  2. ...
  3. ...


Также в блоге: изучаем и разрабатываем что-то новое, делимся опытом.

Подписывайтесь:
Cj - язык программирования

Новый язык программирования, для разработки сайтов и приложений, подробнее...


Спецификация:

  1. Комментарии
  2. Типы данных, переменные, функции
  3. ...

Vue JS начинающим

Если хотите изучить какой-нибудь Javascript-фреймфорк, то нужно начать с Vue JS - самое то для начинающих!

Давайте напишем самый простенький примерчик? Создаём файл index.html и размещаем в нём следующий код:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
});
</script>

На экране вывелось "Hello Vue.js!". Работает!

Конечно, располагать весь код в одном html-файле - это не айс. Давайте перепишем этот код. Разобьём его на два файла:

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue JS начинающим</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script src="main.js"></script>
</body>
</html>

main.js:

var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
});

Как работает этот код?

Вначале мы создали div с именем "app" и разместили в нём свойство "message". Затем мы указали, что элементу "app" cо свойством "message" присвоим значение "Hello Vue.js!".

Далее, с помощью кода "var app = new Vue(...)", делаем реактивную связку. Проверить это можно зайдя в консоль браузера и задать свойству app.message новое значение. Изменения будут видны сразу же.

Связывание атрибутов элементов

Давайте разместим в файле index.html следующий код:

<div>
	<span title="Это title">
		Наведите курсор мыши
	</span>
</div>

Если мы наводим курсор мыши на текст спана, через секунду на экране появляется подсказка.

Можно применить связывание атрибутов:

<div id="app2">
  <span v-bind:title="message">
    Наведите курсор мыши
  </span>
</div>

var app2 = new Vue({
  el: '#app2',
  data: {
    message: 'Случайное число: ' + Math.random();
  }
});

Не забывайте, что див лежит в файле index.html, а скрипт в main.js.

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

Как работает этот код?

Мы создали новый див "app2", в нём указали элемент "span" и сделали связку v-bind (v- значит Vue.js, а bind - связать) аттрибута title и свойства app2.message. Проверьте меняется ли это свойство в консоле значение.

Давайте ещё поэкспериментируем. Поменяйте ваш предыдущий див на этот:

<div id="app2">
	<span v-bind:title="message">Наведите курсор мыши</span>
	<p>{{ message }}</p>
	<input v-bind:value="message">
	<input v-model="message">
</div>

Меняя свойство app2.message через консоль, мы видим, что все данные связаны.

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

Vue.js условия

Добавим следующий код:

<div id="app3">
  <span v-if="flag">Сейчас app3.flag = true</span>
</div>

var app3 = new Vue({
  el: '#app3',
  data: {
    flag: true
  }
});

Директива v-if будет отображать элемент, если свойство app3.flag будет равно true. Попробуте проверить, изменив в консоле app3.flag=false.

Vue.js цикл v-for

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

<div id="app4">
	<ol>
		<li v-for="i in list">
		{{ i.text }}
		</li>
	</ol>
</div>

var app4 = new Vue({
    el: '#app4',
    data: {
        list: [
            { text: 'first' },
            { text: 'second' },
            { text: 'third' }
        ]
    }
});

Директива v-for напоминает оператор for в Javascript.

Если введём в консоли app4.list.push({ text: 'fourth' }), то к списку добавится значение "fourth".

Обработка событий

В Vue.JS достаточно удобно реализована обработка событий. Для этого применяется директива v-on:

<div id="app5">
	<p>{{ message }}</p>
	<button v-on:click="message='click'">Click</button>
</div>

var app5 = new Vue({
    el: '#app5',
    data: {
        message: 'some text'
    }
});

Таким образом, при нажатии на кнопку мы присвоим свойству app5.message значение click.

А можно ли обработать событие, вызвав какую-нибудь функцию? Да, конечно:

<div id="app6">
	<p>{{ message }}</p>
	<button @click="handlerClick">Click</button>
</div>

var app6 = new Vue({
    el: '#app6',
    data: {
        message: 'some text'
    },
    methods: {
        handlerClick: function () {
            this.message = 'handlerClick';
        }
    }
});

Работает. Заметьте, что я использовал @click вместо v-on:click. Такой, более краткий синтаксис, также работает.

Думаю, на этом урок Vue.JS начинающим можно закончить. Мы, конечно же, продолжим изучать Vue.JS!


Отправить комментарий
Контакты
vk.com/sitev_ru
Skype: sitev.ru
E-mail: mike@sitev.ru
github.com/sitev

Рейтинг@Mail.ru

Besucherzahler
счетчик посещений