UdnlxPortfolio - VueJS - Подключение и простейшие примеры

Установка VueJS

VueJS - это прогрессивный фреймворк для создания пользовательских интерфейсов.

Для подключения нам нужно в раздел скриптов HTML разметки добавить <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>.

Остальной код приложения на Vue удобнее писать в фале main.js или app.js.

Пример простейшего приложения на Vue с использованием декларативной отрисовкой и с пользовательским вводом.

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Изучение VueJS</title>
	<meta name="Description" content="">
	<meta name="keywords" content="">

	<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>





	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<input type="text" v-on:input="changeName">
				<h1>Hello {{ name }}</h1>
			</div>
		</div>
	</div>





<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>





</body>
</html>

new Vue({
  el: '#app',
  data: {
    name: 'Vue!'
  },
  methods: {
    changeName: function (event) {
      this.name = event.target.value
    }
  }
})

Теория. Основы vue

Интерполяция в VueJS

Основный типовые функции и возможности VueJS.

HTML

<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<input type="text" v-on:input="changeName">
				<h1>String: {{ name }}</h1>
				<h1>Summ (10+60): {{ 10+60 }}</h1>
				<h1>Number: {{ number }}</h1>
				<h1>Method: {{ sayHallo() }}</h1>
				<h1>If statement: {{ isOK ? 'I am OK' : 'I am not OK' }}</h1>
				<h1>Function: {{ string.split('').reverse().join('') }}</h1>
			</div>
		</div>
	</div>

new Vue({
  el: '#app',
  data: {
    name: 'Vue!',
    number: 100,
    isOK: true,
    string: 'My name is Alexander'
  },
  methods: {
    changeName: function (event) {
      this.name = event.target.value
    },
    sayHallo: function () {
      return 'I am function'
    }
  }
})

В браузере будет:

String: Vue!
Summ (10+60): 70
Number: 100
Method: I am function
If statement: I am OK
Function: rednaxelA si eman yM

Динамические атрибуты, директивы

Директива v-bind

	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<h2>
					<a v-bind:href="url">{{ url }}</a>
				</h2>
			</div>
		</div>
	</div>





<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>

<script>
	new Vue({
	  el: '#app',
	  data: {
	    url: 'https://yandex.ru'
	  },
	})
</script>

Директива v-html

	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<h2 v-html='link'></h2>
			</div>
		</div>
	</div>





<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>

<script>
	new Vue({
	  el: '#app',
	  data: {
	    link: '<a href="https://yandex.ru">Yandex</a>'
	  },
	})
</script>

Директива v-on

	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<h2>Счетчик = {{ counter }}</h2>
				<button v-on:click="riseCounter">Увеличить</button>

				<hr>

				<h2 v-on:mouseover="onHover">Счетчик = {{ counter2 }}</h2>
				<button v-on:click="counter2++">Увеличить</button>
			</div>
		</div>
	</div>





<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>

<script>
	new Vue({
	  el: '#app',
	  data: {
	    counter: 0,
	    counter2: 0
	  },
	  methods: {
	  	riseCounter: function () {
	  		this.counter++
	  	},
	  	onHover: function (event) {
	  		event.target.style.color = 'red'
	  	}
	  }
	})
</script>

Все события будь то v-on:click или v-on:mouseover совпадают с названиями событий в JavaScript, так что их можно спокойно использовать.

Передача параметров в метод

Для увеличения счетчика не на 1, а на 5 к примеру, можно добиться изменив строку на

<script>
	new Vue({
	  el: '#app',
	  data: {
	    counter: 0
	  },
	  methods: {
	  	riseCounter: function () {
	  		this.counter+=5
	  	},
	  }
	})
</script>

Хороший пример передачи параметров в метод.

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Изучение VueJS</title>
	<meta name="Description" content="">
	<meta name="keywords" content="">

	<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>





	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<h2>{{ title }} = {{ counter }}</h2>
				<button v-on:click="riseCounter(5, 'Увеличен на 5', $event)">Увеличить на 5</button>
				<button v-on:click="riseCounter(10, 'Увеличен на 10', $event)">Увеличить на 10</button>
			</div>
		</div>
	</div>





<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>

<script>
	new Vue({
	  el: '#app',
	  data: {
	    counter: 0,
	    title: 'Счетчик'
	  },
	  methods: {
	  	riseCounter: function (num, str, event) {
	  		this.counter += num
	  		this.title = str

	  		if (num === 5) {
	  			event.target.style.color = 'blue'
	  		}

	  		if (num === 10) {
	  			event.target.style.color = 'red'
	  		}
	  	},
	  }
	})
</script>





</body>
</html>

Модификаторы событий и модификаторы событий клавиатуры

Ниже приведен код с примерами модификаторов событий.

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Изучение VueJS</title>
	<meta name="Description" content="">
	<meta name="keywords" content="">

	<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>





	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<h2>
					<!-- два варианта -->
					<a href="https:\\google.com" target="_blank" v-on:click="clickOnGoogle">Google</a>
					<a href="https:\\google.com" target="_blank" v-on:click.prevent="clickOnGoogle">Google</a>
				</h2>

				<h2 v-on:mousemove="handleMouseMove">
					X: {{ x }} \ Y: {{ y }}
					<span v-on:mousemove.stop="">НЕ ИЗМЕНЯТЬ</span>
				</h2>

				<hr>

				<!-- два варианта -->
				<input type="text" v-on:keyup="alertValue">
				<input type="text" v-on:keyup.enter="alertValue">
			</div>
		</div>
	</div>





<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>

<script>
	new Vue({
	  el: '#app',
	  data: {
	  	x: 0,
	  	y: 0
	  },
	  methods: {
	  	handleMouseMove: function (event) {
	  		this.x = event.clientX
	  		this.y = event.clientY
	  	},
	  	alertValue: function (event) {
	  		if (event.keyCode == 13) {
	  			alert(event.target.value)
	  		}
	  	},
	  	clickOnGoogle: function (event) {
	  		event.preventDefault()
	  	}
	  }
	})
</script>





</body>
</html>

Продолжение во второй части шпаргалки.