Первые шаги в Vue.js

83
20 июня 2021, 19:50

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

app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Document</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app"></div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Что за магическая конструкция render: h => h(App)? Правильно ли я понимаю, что если мы записываем в таком виде, то нам не нужно указывать компонент в app.blade.php? На следующем этапе я планируется подключить Vne Router. Не сыграет ли такой подход мне во вред?

app.js

import Vue from 'vue'
import App from './components/App.vue'
new Vue({
    el: '#app',
    render: h => h(App)
})

Опять не понятно. Если указать <ProductList><ProductList/>, то будет ошибка, а вот так <ProductList/> - работает. Если не трудно, то помогите пожалуйста разобраться. Одно дело сделать так чтобы это работало, другое понимать как это работает. Спасибо.

App.vue

<template>
    <div id="app">
        <ProductList/>
        <ShoppingCart/>
    </div>
</template>
<script>
    import ProductList from './ProductList.vue'
    import ShoppingCart from './ShoppingCart.vue'
    export default {
        components: {
            ProductList,
            ShoppingCart
        }
    }
</script>
Answer 1

1) Правильно, вы сообщаете vuejs, что компонент App является корневым. Он должен будет содержать в себе <router-view> для работы с vue-route. Далее при загрузке страницы приложение заинжектится по селектору #app.

2) Это не может никак влиять на ошибку. Правила именования не нарушены. Короткий вариант <ProductList/> используется если компонент не нуждается во входных параметрах. UPD: у вас ошибка действительно. Закрывающий слэш должен быть перед началом селектора.

<ProductList></ProductList>

Можно самостоятельно задавать нужный вам селектор

<script>
    import ProductList from './ProductList.vue'
    import ShoppingCart from './ShoppingCart.vue'
    export default {
        components: {
            'product-list':ProductList,
            'shopping-cart': ShoppingCart
        }
    }
</script>
Answer 2

Можно и не именовать компоненты

<script> 
    import ProductList from './ProductList.vue' 
    import ShoppingCart from './ShoppingCart.vue' 
 
    export default { 
        components: { 
            ProductList, 
            ShoppingCart 
        } 
    } 
</script>
<template> 
<div> 
 
<product-list></product-list> 
<shopping-cart></shopping-cart> 
 
</div> 
</template>

READ ALSO
Нужен эквивалент кода ванильного JS на jQuery
javascript

Нужен эквивалент кода ванильного JS на jQuery

Пишу кастомный селекторНужен именно не дефолтный

 87
Подсчет нулей в введенном аргументе
javascript

Подсчет нулей в введенном аргументе

Хочу подсчитать количество нулей которые повстречаются, если посчитать от единицы до введенного числаНапример если ввести число 20, то ответ...

 91
как работать с экспортом?
javascript

как работать с экспортом?

у меня есть файл userjs мне нужно использовать его параметры

 119
Как получить доступ к стилям из JavaScript?
javascript

Как получить доступ к стилям из JavaScript?

Сейчас у меня есть стиль в stylecss:

 132