UdnlxPortfolio - VueJS - Основы и важные моменты

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

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

Работа со списками в VueJS

Примеры работы со списками в Фреймворке

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">
				<ul>
					<li>{{ people[0] }}</li>
					<li>{{ people[1] }}</li>
					<li>{{ people[2] }}</li>
				</ul>

				<hr>
				<ul>
					<li v-for="person of people">{{ person }}</li>
				</ul>

				<hr>
				<ul>
					<li v-for="(person, ind) of people">{{ person }} <b>{{ ind }}</b></li>
					<li v-for="(person, index) of people">{{ person }} <b>{{ index+1 }}</b></li>
				</ul>

				<hr>
				<ul>
					<li v-for="(person, index) of peopleTwo"><b>{{ index }}</b> {{ person.name }} <b>{{ person.age }}</b></li>
				</ul>

				<hr>
				<ul>
					<li v-for="num of 4"> {{ num }} </li>
				</ul>

				<hr>
				<ul>
					<li v-for="(value, key) of person"> {{ value }} <b>{{ key }}</b> </li>
				</ul>
			</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: {
	  	people: [
	  		'Vlad',
	  		'Max',
	  		'Dasha'
	  	],
	  	peopleTwo: [
	  		{name:'Vladislav', age: 25},
	  		{name:'Maxim', age: 18},
	  		{name:'Daria', age: 15}
	  	],
	  	person: {
	  		name: 'Alexander',
	  		age: 43,
	  		job: 'Frontend'
	  	}

	  }
	})
</script>





</body>
</html>

Оптимизация приложения с computed

В чем смысл Computed в нашем приложении? Computed позволяет работать с функцией только тогда когда идет обращения к переменной этой функции. В примере внизу показано, что функция "computerResult" будет работать только тогда когда будет происходит изменения переменной "counter".

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>Counter: {{ counter }} //  {{ counter2 }}</h2>
				<!-- <h3>{{ condition }}</h3> -->
				<h3>{{ computedResult }}</h3>

				<button @click="add">Add</button>
				<button @click="sub">Sub</button>

				<button @click="counter2++">Sub</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
	  	//condition: 'Counter меньше 3'
	  },
	  methods: {
	  	add: function () {
	  		this.counter++
	  		//this.condition = this.counter > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	},
	  	sub: function () {
	  		this.counter--
	  		//this.condition = this.counter > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	},
	  	result: function () {
	  		console.log ('result запустился')
	  		return this.counter > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	}
	  },
	  computed: {
	  	computedResult: function () {
	  		console.log ('computerResult запустился')
	  		return this.counter2 > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	}
	  }
	})
</script>





</body>
</html>

Отслеживание изменений с watch

В VueJS есть возможность наблюдать за изменением с помощью watch. Для примера будем использовать watch в приложении которое мы рассматривали выше.

Пример использования Watch

<script>
	new Vue({
	  el: '#app',
	  data: {
	  	counter: 0,
	  	counter2: 0
	  	//condition: 'Counter меньше 3'
	  },
	  methods: {
	  	add: function () {
	  		this.counter++
	  		//this.condition = this.counter > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	},
	  	sub: function () {
	  		this.counter--
	  		//this.condition = this.counter > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	},
	  	result: function () {
	  		console.log ('result запустился')
	  		return this.counter > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	}
	  },
	  computed: {
	  	computedResult: function () {
	  		console.log ('computerResult запустился')
	  		return this.counter2 > 3 ? 'Counter больше 3' : 'Counter меньше 3'
	  	},
	  },
	  watch: {
	  	counter: function () {
	  		console.log ('Значение: ', this.counter)
	  	}
	  }
	})
</script>

Связывание разных приложений. Инстанс vue

В VueJS можно между приложениями обмениваться данными. Это очень хорошо показано в примере ниже, мы просто первое приложение заключаем в переменную, а во втором приложении можем оперировать над приложением 1 используя для вызова эту переменную указывая вместо "this.title" - "vue1.title".

Пример

<!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 }}</h2>
				<button @click="replaceTitle">Replace Titile</button>
			</div>

			<hr>

			<div id="app2">
				<h2>{{ title }}</h2>
				<button @click="replaceTitle">Replace Titile 2</button>
			</div>
		</div>
	</div>





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

<script>
	var vue1 = new Vue({
	  el: '#app',
	  data: {
	  	title: 'First Title'
	  },
	  methods: {
	  	replaceTitle: function () {
	  		this.title = 'Second Title'
	  	}
	  }
	})

	new Vue({
		el: '#app2',
		data: {
			title: 'First Title 2'
		},
		methods: {
			replaceTitle: function () {
				this.title = 'Second Title 2'
				vue1.title = 'Second Title 2'
			}
		}
	})
</script>





</body>
</html>

Доступ к DOM элементам

VueJS позволяет получать и работать с любым DOM элементом из приложения. Для этого к этому элементу мы должны присвоить имя, с помощью тега "ref". И далее обращать к нему командой "this.$refs.namerefs".

Пример

<!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 ref="heading">{{ title }}</h2>
				<button @click="replaceTitle">Replace Titile</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: {
	  	title: 'First Title'
	  },
	  methods: {
	  	replaceTitle: function () {
	  		this.title = 'Second Title'
	  		console.log (this.$refs)
	  		console.log (this.$refs.heading)
	  		this.$refs.heading.style.color = 'red'
	  	}
	  }
	})
</script>





</body>
</html>

Свойство template

При помощи свойства "template" мы можем внутри параметров VueJS оперировать небольшими шаблонами, как? Показано ниже.

Пример использования template

<!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"></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: {
	  	title: 'First Title'
	  },
	  template: '<div><h1>{{ title }}</h1></div>'
	})
</script>





</body>
</html>

Жизненный цикл

В примере показаны все существующие жизненные циклы приложения.

Жизненные циклы приложения VueJS

<!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">
				<h1 ref="heading">{{ title }}</h1>
				<button @click="replaceTitle">Replace Title</button>
				<button @click="doDestroy">Destroy</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: {
	  	title: 'First Title'
	  },
	  methods: {
	  	replaceTitle: function() {
	  		this.title = 'Second Title'
	  	},
	  	doDestroy: function() {
	  		this.$destroy()
	  	}
	  },
	  beforeCreate: function() {
	  	console.log ('BeforeCreate')
	  },
	  created: function() {
	  	console.log ('Created')
	  },
	  beforeMount: function() {
	  	console.log ('BeforeMount')
	  },
	  mounted: function() {
	  	console.log ('Mounted')
	  },
	  beforeUpdate: function() {
	  	console.log ('BeforeUpdate')
	  },
	  updated: function() {
	  	console.log ('Updated')
	  },
	  beforeDestroy: function() {
	  	console.log ('BeforeDestroy')
	  },
	  destroyed: function() {
		console.log ('Destroyed')
	  }
	})
</script>





</body>
</html>