VueJS - Основы и простейшие примеры

Это 2 часть простейших примеров и основ VueJS. Здесь первая.

Официальный сайт VueJS2

Документация на русском VueJS2

 

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

Ярлыки для директив

В VueJS можно сокращать директивы "v-bind" и "v-on" заменяя их на просто ":" и "@" соответственно.

Пример:

<div id="app">

				<h2>
					<a v-bind:href="url">Yandex</a>
					<a :href="url">Yandex</a>
				</h2>

				<h2>
					Counter: {{ counter }}
				</h2>

				<button v-on:click="counter++">Rise</button>
				<button @click="counter++">Rise</button>

			</div>

 

Модель для работы с формами

Если нам нужно что бы при наборе в input сразу же отображалось на сайте, то используем такой код, 1 вариант - это полное описание, 2 вариант - сокращение с помощью директивы v-model и  3 вариант - v-model.lazy - это отображение только после того как будет убран фокус с input.

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" @input="inputValue = $event.target.value" :value="inputValue">
				<input type="text" v-model="inputValue">
				<input type="text" v-model.lazy="inputValue">

				<h2>{{ inputValue }}</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: {
	  	inputValue: 'Inicial value'
	  },
	  methods: {

	  }
	})
</script>





</body>
</html>

 

Работа с CSS классами

1 вариант в котором мы написали код непосредственно в теле 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">

	<style>
		.circle {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 2px solid black;
			display: inline-block;
			margin: 40px;}
		.red {
			background-color: red;}
		.blue {
			background-color: blue;}
		.green {
			background-color: green;}
	</style>
</head>
<body>





	<div class="container-001">
		<div class="container-001-content">
			<div id="app">

				<div 
				class="circle" 
				@click="isActive = !isActive"
				:class="{'red': isActive, 'green': !isActive}"
				>
				</div>

				<div class="circle" :class="color"></div>

				<input type="text" v-model="color">

			</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: {
	  	isActive: false,
	  	color: ''
	  },
	  methods: {

	  }
	})
</script>





</body>
</html>

2 вариант где мы все тоже самое сделали через методы

<!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">

	<style>
		.circle {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 2px solid black;
			display: inline-block;
			margin: 40px;}
		.red {
			background-color: red;}
		.blue {
			background-color: blue;}
		.green {
			background-color: green;}
	</style>
</head>
<body>





	<div class="container-001">
		<div class="container-001-content">
			<div id="app">

				<div 
				class="circle" 
				@click="isActive1 = !isActive1"
				:class="getCssClasses1"
				>
				</div>

				<div 
				class="circle" 
				@click="isActive2 = !isActive2"
				:class="getCssClasses2()"
				>
				</div>

				<div class="circle" :class="color"></div>

				<input type="text" v-model="color">

			</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: {
	  	isActive1: false,
	  	isActive2: false,
	  	color: ''
	  },
	  computed: {
	  	getCssClasses1: function() {
	  		return {
	  			'red': this.isActive1,
	  			'green': this.isActive1
	  		}
	  	}
	  },
	  methods: {
	  	getCssClasses2: function() {
	  		return {
	  			'red': this.isActive2,
	  			'green': this.isActive2
	  		}
	  	}
	  }
	})
</script>





</body>
</html>

Причем, очень важно, если мы используем метод "computed", то при вызове ":class="getCssClasses"" скобки не ставятся, если же мы используем методы "methods", то при вызове ":class="getCssClasses()"" скобки ставятся.

 

Динамические стили

В этом примере мы используя ввод с input меняем цвет, ширину и высоту элементов. В первом варианте "<div class="circle" :style="{'background': color, 'height': height + 'px'}"></div>" мы используем "data". Во втором варианте "<div class="circle" :style="circleClasses"></div>" мы используем "computed", функцию. В третьем варианте "<div class="circle" :style="[circleClasses, {'width': height + 'px'}]"></div>" мы используем массив, смесь "computed" и "data".

Код

<!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">

	<style>
		.circle {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 2px solid black;
			display: inline-block;
			margin: 40px;}
		.red {
			background-color: red;}
		.blue {
			background-color: blue;}
		.green {
			background-color: green;}
	</style>
</head>
<body>





	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<div class="circle" :style="{'background': color, 'height': height + 'px'}"></div>
				<div class="circle" :style="circleClasses"></div>
				<div class="circle" :style="[circleClasses, {'width': height + 'px'}]"></div>
				<hr>
				<input type="text" v-model="color">
				<input type="text" v-model="height">
			</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: {
	  	color: 'blue',
	  	height: 100
	  },
	  computed: {
	  	circleClasses: function () {
	  		return {
	  			'background': this.color, 
	  			'height': this.height + 'px'
	  		}
	  	}

	  },
	})
</script>





</body>
</html>

 

Управление отображением элементов

В примере ниже показано как можно управлять отображением элементов в VueJS. Используя "v-if" или "v-if v-else":

v-if и v-else

<div id="">
				<h2 v-if="isVisible">I am visible!</h2>
				<h2 v-if="!isVisible">No, I am not</h2>

				<h2 v-if="isVisible">I am visible!</h2>
				<h2 v-else="!isVisible">No, I am not</h2>

				<button @click="isVisible = !isVisible">Toggle</button>
			</div>

или используя много условность:

v-else-if

<div id="app">
				<h2 v-if="type === 'a'">A</h2>
				<h2 v-else-if="type === 'b'">B</h2>
				<h2 v-else-if="type === 'c'">C</h2>
				<h2 v-else="!isVisible">not match</h2>
				<hr>
				<input type="text" v-model="type">
			</div>

весь код

<!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="">
				<h2 v-if="isVisible">I am visible!</h2>
				<h2 v-if="!isVisible">No, I am not</h2>

				<h2 v-if="isVisible">I am visible!</h2>
				<h2 v-else="!isVisible">No, I am not</h2>

				<button @click="isVisible = !isVisible">Toggle</button>
			</div>
		</div>
	</div>





	<div class="container-001">
		<div class="container-001-content">
			<div id="app">
				<h2 v-if="type === 'a'">A</h2>
				<h2 v-else-if="type === 'b'">B</h2>
				<h2 v-else-if="type === 'c'">C</h2>
				<h2 v-else="!isVisible">not match</h2>
				<hr>
				<input type="text" v-model="type">
			</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: {
	  	isVisible: true,
	  	type: 'a'
	  }
	})
</script>





</body>
</html>

 

Директива v-show vs v-if 

Отличие директивы "v-show" от "v-if" в том что директива "v-if" удаляет из кода невидимый элемент, в то время как директива "v-show" просто скрывает невидимы элемент ставя ему "display:none"

Пример использования директивы "v-show"

<!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 v-if="isVisible">I am visible!</h2>
				<h2 v-else>No, I am not</h2>

				<h2 v-show="isVisible">I am visible!</h2>
				<h2 v-show="!isVisible">No, I am not</h2>

				<button @click="isVisible = !isVisible">Toggle</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: {
	  	isVisible: true
	  }
	})
</script>





</body>
</html>

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

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены