Это 2 часть простейших примеров и основ VueJS. Здесь первая.
Документация на русском VueJS2
В 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>
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" от "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>
Продолжение в третьей части шпаргалки.