Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Hello Vue</title>
- <meta charset="utf-8">
- <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
- <!-- подключение фреймворка vue.js -->
- <script type="text/javascript" src="https://unpkg.com/vue"></script>
- <style type="text/css">
- *{
- margin:0;
- padding:0;
- }
- body{
- font:15px/1.3 'Open Sans', sans-serif;
- color: #5e5b64;
- text-align:center;
- }
- a, a:visited {
- outline:none;
- color:#389dc1;
- }
- a:hover{
- text-decoration:none;
- }
- section, footer, header, aside, nav{
- display: block;
- }
- /*-------------------------
- Меню
- --------------------------*/
- nav{
- display:inline-block;
- margin:60px auto 45px;
- background-color:#5597b4;
- box-shadow:0 1px 1px #ccc;
- border-radius:2px;
- }
- nav a{
- display:inline-block;
- padding: 18px 30px;
- color:#fff !important;
- font-weight:bold;
- font-size:16px;
- text-decoration:none !important;
- line-height:1;
- text-transform: uppercase;
- background-color:transparent;
- -webkit-transition:background-color 0.25s;
- -moz-transition:background-color 0.25s;
- transition:background-color 0.25s;
- }
- nav a:first-child{
- border-radius:2px 0 0 2px;
- }
- nav a:last-child{
- border-radius:0 2px 2px 0;
- }
- nav.home .home,
- nav.projects .projects,
- nav.services .services,
- nav.contact .contact{
- background-color:#e35885;
- }
- p{
- font-size:22px;
- font-weight:bold;
- color:#7d9098;
- }
- p b{
- color:#ffffff;
- display:inline-block;
- padding:5px 10px;
- background-color:#c4d7e0;
- border-radius:2px;
- text-transform:uppercase;
- font-size:18px;
- }
- </style>
- </head>
- <body>
- <!-- элемент div c идентификатором app -->
- <!-- v-for -->
- <div id="app">
- <!-- Меню получает значение "active" в качестве класса. -->
- <!-- Чтобы предотвратить "прыжки" страницы при изменении ссылки, используем модификатор "prevent" (сокращение для preventDefault). -->
- <nav v-bind:class="active" v-on:click.prevent>
- <!-- Когда происходит нажатие на ссылку, вызываем метод makeActive, определенный как js-сущность Vue. -->
- <a href="#" class="home" v-on:click="makeActive('home')">Главная</a>
- <a href="#" class="projects" v-on:click="makeActive('projects')">Проекты</a>
- <a href="#" class="services" v-on:click="makeActive('services')">Услуги</a>
- <a href="#" class="contact" v-on:click="makeActive('contact')">Контакты</a>
- </nav>
- <!-- Шаблонное значение будет заменено на значение переменной "active". Все изменения будут автоматически отражены на странице. -->
- <p>Выбран класс <b>{{active}}</b></p>
- </div>
- </body>
- <script type="text/javascript">
- // создаем объект Vue (экземпляр Vue)
- // Создаем новую сущность Vue.js
- var demo = new Vue({
- // DOM элемент, к которому прикреплена сущность
- el: '#app',
- // Начало модели.
- // Определяем свойства и присваиваем им необходимые значения.
- data: {
- active: 'home'
- },
- // Функции, которые будем использовать.
- methods: {
- makeActive: function(item){
- // Когда модель будет изменена, представление обновится.
- this.active = item;
- }
- }
- });
- </script>
- </html>
Add Comment
Please, Sign In to add comment