Популярное
Маршрутизатор d link 2640u
Главная › Программирование › vue.js

Основы Vue.js — шпаргалка

Привет, мир не стоит на месте и технологии развиваются, так происходит и c JS. Все помнят когда вышел Jquery какой бум он произвел в среде JS разработке, но технологии не стоят на месте и вот на смену пришел vue.js. С помощью данного фреймворка можно сделать достойный проект в котором будет ООП если вы его даже не знаете. В этой статье речь пойдет основах VUE и с течением моих знаний будет пополняться данная статья.

Contents

Установка и настройка

Скачать фреймворк можно на оф. сайта.  Я использую для подключения CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Подключаем VUE.JS-->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>

Для работы Vue нужно также указать блок, который вуе будет обрабатывать, а также свойство data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">

    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app"//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
            }
        })
    </script>
</body>
</html>

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

 Методы

Тут будем указывать наши методы (те же самые функции).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p>{{name}}</p>
        <p>{{sayHello}}</p>
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                name:'Антон',
            },
            methods:{//methods зарезервировано
                sayHello(){
                    return `Привет, ${this.name}`;
                },
            }
        })
    </script>
</body>
</html>

Добавляем ссылку

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p>{{name}}</p>
        <p>{{sayHello}}</p>
        <a :href="link">Яндекс</a>
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                name:'Антон',
                link: 'https://ya.ru'
            },
            methods:{
                sayHello(){
                    return `Привет, ${this.name}`;
                },
            }
        })
    </script>
</body>
</html>

Указываем двоеточие перед href, тем самым сообщаем, что link теперь свойство data, а не строка.

Для того чтобы взять любое значение из data для любого атрибута в верстке, нужно перед атрибутом поставить двоеточие.

Работа с кнопкой

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p>{{name}}</p>
        <p>{{sayHello}}</p>
        <a :href="link">Яндекс</a>
        <button v-on:click="counter++">Increase</button>
        <p>{{counter}}</p>
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                name:'Антон',
                link: 'https://ya.ru',
                counter: 0
            },
            methods:{
                sayHello(){
                    return `Привет, ${this.name}`;
                },
            }
        })
    </script>
</body>
</html>

v-on — регистрация события. Вместо v-on можно использовать символ @.

В примере используется событие click. Есть также событие с названием submit, если использовать его, то страничка будет перезагружать после нажатия на кнопку, чтобы это избежать нужно добавить submit.prevent.  prevent – отменяет действие по дефолту, т.е. перезагрузку страници.

Функции

Также можно передавать функции из блока методов.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p>{{name}}</p>
        <p>{{sayHello}}</p>
        <a :href="link">Яндекс</a>
        <button @click=Increase(3)>Increase</button>
        <p>{{counter}}</p>
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                name:'Антон',
                link: 'https://ya.ru',
                counter: 0
            },
            methods:{
                sayHello(){
                    return `Привет, ${this.name}`;
                },
                Increase(step){
                    this.counter+=step;
                }
            }
        })
    </script>
</body>
</html>

Event

Также можно передать событие с помощью $event.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p>{{name}}</p>
        <p>{{sayHello}}</p>
        <a :href="link">Яндекс</a>
        <button @click=Increase(3, $event)>Increase</button>
        <p>{{counter}}</p>
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                name:'Антон',
                link: 'https://ya.ru',
                counter: 0
            },
            methods:{
                sayHello(){
                    return `Привет, ${this.name}`;
                },
                Increase(step,e){
                    this.counter+=step;
                    console.log(e);
                }
            }
        })
    </script>
</body>
</html>

Тернарные операторы

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p>{{name}}</p>
        <p>{{sayHello}}</p>
        <a :href="link">Яндекс</a>
        <button @click=Increase(3, $event)>Increase</button>
        <p>{{counter}}</p>
        <p>{{ counter > 10 ? "больше 10" : "Меньше 10" }}</p> // Тернарный оператор
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                name:'Антон',
                link: 'https://ya.ru',
                counter: 0
            },
            methods:{
                sayHello(){
                    return `Привет, ${this.name}`;
                },
                Increase(step,e){
                    this.counter+=step;
                    console.log(e);
                }
            }
        })
    </script>
</body>
</html>

If … else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        
        <!-- IF ELSE -->
        <p v-if="show">Показать</p>
        <p v-else="show">Не показывать</p>
        <button @click='show = !show'>GO</button>
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                show: false
            }
        })
    </script>
</body>
</html>

Mausemove

Mausemove — движение курсора мышки.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p @mausemove="getCorordinates()">Lorem, ipsum dolor. {{ x }} / {{ y }}
            <span @mausemove.stop> не пересчитывать координаты на этом элементе</span>
        </p>

    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                x: 0,
                y: 0
            }
            methods:{
                getCorordinates(){ //получать текущие координаты мышки
                    this.x = event.clientX;
                    this.y = event.clientX;
                }
            }
        })
    </script>
</body>
</html>

Если в теге указать собитие @mausemove.stop, то пересчет координат не будет учитываться, т.е. мы это событие выключаем в этом теге.

V-model

Этот метод связывает значение с объектом data. Т.е. допустим есть объект data со свойством name: “Anton” и есть инпут, мы указали в атрибутах v-model=”name” теперь в инпуте при рендеренге будет отображаться Anton. Если ввести что-то другое в инпуте, то и свойство name в объекте data поменяет свое значение с “Anton” на то что вы ввели.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p>{{ name }}</p>
       <input type="text" v-model="name">
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",//el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                name: "Anton"
            }
        })
    </script>
</body>
</html>

В выше приведеном примере изменения будут меняться в режиме онлайн, а можно сделать, так, чтобы изменения вступали всилу после того, как пропадет фокус с инпута. Для этого укажите v-modal.lazy=”name”.

V-html

Вставляет в нутрь тега свойство объекта data. В качестве свойства может выступать что угодно, буть то целый готовый блок див или просто число.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <p v-html="htmlLink"></p>
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app", //el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                htmlLink: "<a href='https://ya.ru'>Яндекс</a>"
            }
        })
    </script>
</body>
</html>

V-for

Цикл for поможет обойти маасив и вывести найденое в верстке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body>
    <!-- Тут указываем блок, с которым работает VUE -->
    <div id="app">
        <div v-for="item of product">
            <ul>
                <li>{{ item.title }}</li>
                <li>{{ item.price }} руб.</li>
                <li>{{ item.quantity }} шт.</li>
            </ul>
        </div>  
    </div>
    <!-- Подключаем VUE.JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app", //el зарезервировано
            data:{//data зарезервировано
                // тут уже любые свойства
                product: [
                {
                        title: "Хлеб",
                        price: 35,
                        quantity: 1
                    },
                    {
                        title: "Масло",
                        price: 135,
                        quantity: 2
                    },
                    {
                        title: "Икра",
                        price: 3500,
                        quantity: 1
                    },
                ]
            }
        })
    </script>
</body>
</html>

Mounted

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

Компоненты

Выше в примерах, все делалось в одном файле, что крайне удобно при разработке больших приложений. Теперь же мы будем делить код приложения на блоки. Создадим тестовое приложения. Погнали.

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- выводим компонент -->
        <mycomp></mycomp> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="comp.js"></script>
    <script src="main.js"></script>
</body>
</html>

main.js

const app = new Vue({
    el: '#app'
})

comp.js

//используем класс Vue и статический компонент, укажем два основных параметра
//название компонента и второе объект, в котором есть свойство template 
Vue.component('mycomp', {
    template: '<p>Привет из компонента</p>'
})

На выходе получим параграф с текстом “Привет из компонента”.

В компоненте помимо свойства template, еще есть свойство data, указывается в виде метода. Из этого свойства можно обращаться к любому созданному вами свойству объекта data.

Vue.component('mycomp', {
    data() {
        return {
            name: 'Антон',
            age: 34  
        }        
    },
    template: `
                <div>
                    <p>Привет, {{ name }}. Твой возраст {{ age }}.</p>
                </div>
            `
})

Также можно выводить в основном компоненте другие компоненты, вложенные.

//используем класс Vue и статический компонент, укажем два основных параметра
//название компонента и второе объект, в котором есть свойство template 
Vue.component('mycomp', {
    data() {
        return {
            name: 'Антон',
            age: 34  
        }        
    },
    template: `
                <div>
                    <p>Привет, {{ name }}. Твой возраст {{ age }}.</p>
                    <inner-comp></inner-comp>
                </div>
            `
})

Vue.component('inner-comp', {
    data() {
        return {
            counter: 0
        }
    },
    template: `
                <div>
                    <button @click='increase'>Push</button>
                    <span>{{ counter }}</span>
                </div>
            `,
    methods: {
        increase() {
            this.counter++;
        }
    }
})

Т.е. был создан еще один компонент inner-comp, и вызывается он через основной компонент.

Вложенность может быть любая, ограничений нет.

Вы можете вызывать вложенные компоненты через основной компонент или через вложенные, или через вложенные-вложенные, ограничений нет.

В template допускается один корневой тег, т.е. делаем один див и туда пихаем всю остальную верстку. Несколько главных дивов быть не может.

Переброс данных из шаблона index.html в компонент comp.js

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- выводим компонент -->
        <mycomp>123</mycomp> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="comp.js"></script>
    <script src="main.js"></script>
</body>
</html>

Для того чтобы вывести 123 нужно в comp.js указать в tempate тег slot.

//используем класс Vue и статический компонент, укажем два основных параметра
//название компонента и второе объект, в котором есть свойство template 
Vue.component('mycomp', {
    data() {
        return {
            name: 'Антон',
            age: 34  
        }        
    },
    template: `
                <div>
                    <p>Привет, {{ name }}. Твой возраст {{ age }}.</p>
                    <slot></slot>
                </div>
            `
})

Передаем данные из main.js в index.html -> comp.js с помощью атрибутов

Добавим атрибуты в index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- выводим компонент -->
        <mycomp :name="name" :age ="age" x="1" title="test"></mycomp>
        <mycomp :name="name2" :age ="age2"></mycomp>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="comp.js"></script>
    <script src="main.js"></script>
</body>
</html>

Если перед атрибутом стоит :, то это значит брать данные из main.js.

Vue.component('mycomp', {
    props:[name, name2, age, age2,x,title],
    data() {
        return {
            name: 'Антон1',
            age: 341  
        }        
    },
    template: `
                <div>
                    <p>Привет, {{ name }}. Твой возраст {{ age }}.</p>
                    <slot></slot>
                </div>
            `
})

В данном примере уже есть локальные переменные с name и age, но данные будут тянуться из main.js. Для того чтобы данные брались из локальных переменных, необходимо обращаться к ним через $data:

Vue.component('mycomp', {
    props:[name, name2, age, age2,x,title],
    data() {
        return {
            name: 'Антон',
            age: 34  
        }        
    },
    template: `
                <div>
                    <p>Привет, {{ $data.name }}. Твой возраст {{ $data.age }}.</p>
                    <slot></slot>
                </div>
            `
})

Передаём атрибуты из основного компонента во вложенный, с помощью props.

Index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- выводим компонент -->
        <mycomp></mycomp> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="comp.js"></script>
    <script src="main.js"></script>
</body>
</html>

main.js

const app = new Vue({
    el: '#app',
    data:{
        name: 'Антон',
        name2: 'Слава',
        age: 34,
        age2: 23,
    }
})

comp.js

Vue.component('mycomp', {
    template: `
                <div>
                    <iner-comp :x=10></iner-comp>
                </div>
            `
})
Vue.component('iner-comp', {
    props:['x'],
    template: `
                <div>
                    <p>{{ x }}.</p>                   
                </div>
            `
})

Все тоже самое но намного проще с помощью $parent и $root.

$parent — обращение к родительскому компоненту из дочернего. Если компонент всего один, то с помощью $parent обращаемся к свойствам main.js.

$root — обращение к свойствам main.js.

Vue.component('mycomp', {
    template: `
                <div>
                    <p>Привет, {{ $parent.name }}. Ваш возраст {{ $parent.age2 }}</p>
                </div>
            `
})

Обращаемся из вложеноого компонента к main.

Vue.component('mycomp', {
    template: `
                <div>
                    <p>Привет, {{ $parent.name }}. Ваш возраст {{ $parent.age }}</p>
                    <iner-comp></iner-comp>
                </div>
            `
})
Vue.component('iner-comp', {
    template: `
                <div>
                    <p>Привет, {{ $parent.$parent.name2 }}. Ваш возраст {{ $parent.$parent.age2 }}</p>                   
                </div>
            `
})

или так

Vue.component('mycomp', {
    template: `
                <div>
                    <p>Привет, {{ $root.name }}. Ваш возраст {{ $root.age }}</p>
                    <iner-comp></iner-comp>
                </div>
            `
})
Vue.component('iner-comp', {
    template: `
                <div>
                    <p>Привет, {{ $root.name2 }}. Ваш возраст {{ $root.age2 }}</p>                   
                </div>
            `
})

Если указать во вложенном компоненте $parent.name, то обратимся к локальной переменой name главного компонента, если она есть.

$refs

Можно обращатся к методом из другого компанента через ref атрибут. Допустим у нас есть index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <alert></alert>
        <cart ref="cart" ></cart>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
    <script src="alert.js"></script>
    <script src="cart.js"></script>
    <script src="main.js"></script>
</body>
</html>

Указываем в нем наши компонент, обратите внимание на компанент cart, у него появился тег ref. Создаем сам компонент cart:

Vue.component('cart', {
    data() {
        return {
            counter: 0
        }
    },
    template:
        ` 
        <div> 
            <span>{{ counter }}</span> 
        </div> 
        `,
    methods: {
        increase() {
            this.counter++;
        }
    }
})

Создаем компонент alert:

Vue.component('alert', {
    template: `
                <div>
                    <button @click="$root.$refs.cart.increase()"> GO </button>
                </div>
           `
})

Ну и main:

const app = new Vue({
    el: '#app'
})

Мы обратились из компанента alert к компаненту cart посреством $root.$refs.cart.increase().

Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Оценок: 2
Загрузка...
Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

27SYSDAY.RU
© 2018–2024 –

Перепечатка материалов разрешена только с указанием первоисточника

Политика конфиденциальности
Сделано в 2010
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.