V cloak vue что это

Устранение мерцания с помощью директивы ‘v-cloak’ во Vue.js

v-cloak — это специализированная директива во Vue.js, которая позволяет устранить мерцание нескомпилированного содержимого.

Во время загрузки приложения Vue.js, может произойти мерцание или мгновенное отображение «сырого» шаблона на короткое время. Это происходит потому, что JavaScript и CSS обычно загружаются после разметки HTML. Это означает, что на короткое время браузер отображает исходную разметку HTML, до того, как Vue.js инициализируется и компилирует шаблон.

Директива v-cloak решает эту проблему. Она задерживает появление разметки до тех пор, пока Vue.js не закончит компиляцию шаблона.

Вот пример кода с использованием v-cloak :

В данном примере > – это место, куда будет вставлено содержимое, когда Vue.js закончит компилировать шаблон. До завершения этого процесса разметка будет скрыта благодаря директиве v-cloak .

Но необходимо учесть, что v-cloak продолжает действовать до тех пор, пока CSS для v-cloak не будет установлен в display: none . Именно поэтому часто v-cloak используется совместно с CSS, который скрывает элементы с атрибутом v-cloak :

[v-cloak]

Таким образом, директива v-cloak предотвращает мерцание нескомпилированного содержимого во Vue.js, обеспечивая пользователю лучший опыт просмотра при загрузке приложения.

Как скрыть шаблон Vue. js пока он не отрендерится. Директива [v-cloak]

Бывают ситуации, когда вы загружаете страницу с каким-то компонентом Vue, и при этом страница при загрузке «прыгает»: сначала показывает синтаксис шаблона Vue, а потом рендерит сам шаблон. Вот пример:

Починить это легко — добавляем к родительскому элементу директиву v-cloak , прописываем стили и всё. Со стилями можно поэкспериментировать.

  [v-cloak] 

Подробнее об этой фиче читайте в документации.

Крутящаяся анимация для v-cloak

Показываем анимированный спинер, пока компонент не отрендерился:

[v-cloak] < display: block; padding: 50px 0; @keyframes spinner < to < transform: rotate(360deg); >> &:before < content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #333; animation: spinner .6s linear infinite; text-indent: 100%; white-space: nowrap; overflow: hidden; >& > div < display: none; >>

Built-in Directives ​

• Expects: string
• Details Contents of v-html are inserted as plain HTML — Vue template syntax will not be processed. If you find yourself trying to compose templates using v-html , try to rethink the solution by using components instead.

Security Note Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

div v-html="html">div>

v-show ​

Toggle the element’s visibility based on the truthy-ness of the expression value.

• Expects: any
• Details v-show works by setting the display CSS property via inline styles, and will try to respect the initial display value when the element is visible. It also triggers transitions when its condition changes.
• See alsoConditional Rendering — v-show

v-if ​

Conditionally render an element or a template fragment based on the truthy-ness of the expression value.

• Expects: any
• Details When a v-if element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won’t be rendered at all. Can be used on to denote a conditional block containing only text or multiple elements. This directive triggers transitions when its condition changes. When used together, v-if has a higher priority than v-for . We don’t recommend using these two directives together on one element — see the list rendering guide for details.
• See alsoConditional Rendering — v-if

v-else ​

Denote the «else block» for v-if or a v-if / v-else-if chain.

• Does not expect expression
• Details
  • Restriction: previous sibling element must have v-if or v-else-if .
  • Can be used on to denote a conditional block containing only text or multiple elements.

  div v-if="Math.random() > 0.5">  Now you see me div> div v-else>  Now you don't div>

  v-else-if ​

  Denote the «else if block» for v-if . Can be chained.

  • Expects: any
  • Details
    • Restriction: previous sibling element must have v-if or v-else-if .
    • Can be used on to denote a conditional block containing only text or multiple elements.

    div v-if="type === 'A'">  A div> div v-else-if="type === 'B'">  B div> div v-else-if="type === 'C'">  C div> div v-else>  Not A/B/C div>

    v-for ​

    Render the element or template block multiple times based on the source data.

    • Expects: Array | Object | number | string | Iterable
    • Details The directive’s value must use the special syntax alias in expression to provide an alias for the current element being iterated on:

    div v-for="item in items">  > div>

    Alternatively, you can also specify an alias for the index (or the key if used on an Object):

    div v-for="(item, index) in items">div> div v-for="(value, key) in object">div> div v-for="(value, name, index) in object">div>

    The default behavior of v-for will try to patch the elements in-place without moving them. To force it to reorder elements, you should provide an ordering hint with the key special attribute:

    div v-for="item in items" :key="item.id">  > div>

    v-on ​

    Attach an event listener to the element.

    • Shorthand: @
    • Expects: Function | Inline Statement | Object (without argument)
    • Argument: event (optional if using Object syntax)
    • Modifiers
      • .stop — call event.stopPropagation() .
      • .prevent — call event.preventDefault() .
      • .capture — add event listener in capture mode.
      • .self — only trigger handler if event was dispatched from this element.
      • . — only trigger handler on certain keys.
      • .once — trigger handler at most once.
      • .left — only trigger handler for left button mouse events.
      • .right — only trigger handler for right button mouse events.
      • .middle — only trigger handler for middle button mouse events.
      • .passive — attaches a DOM event with < passive: true >.

       button v-on:click="doThis">button> button v-on:[event]="doThis">button> button v-on:click="doThat('hello', $event)">button> button @click="doThis">button> button @[event]="doThis">button> button @click.stop="doThis">button> button @click.prevent="doThis">button> form @submit.prevent>form> button @click.stop.prevent="doThis">button> input @keyup.enter="onEnter" /> button v-on:click.once="doThis">button> button v-on=" ">button>

      Listening to custom events on a child component (the handler is called when «my-event» is emitted on the child):

      MyComponent @my-event="handleThis" /> MyComponent @my-event="handleThis(123, $event)" />

      v-bind ​

      Dynamically bind one or more attributes, or a component prop to an expression.

      • Shorthand:
        • : or . (when using .prop modifier)
        • Omitting value (when attribute and bound value has the same name) 3.4+
        • .camel — transform the kebab-case attribute name into camelCase.
        • .prop — force a binding to be set as a DOM property. 3.2+
        • .attr — force a binding to be set as a DOM attribute. 3.2+

         img v-bind:src="imageSrc" /> button v-bind:[key]="value">button> img :src="imageSrc" /> img :src /> button :[key]="value">button> img :src="'/path/to/images/' + fileName" /> div :class=" ">div> div :class="[classA, classB]">div> div :class="[classA, < classB: isB, classC: isC >]">div> div :style="< fontSize: size + 'px' >">div> div :style="[styleObjectA, styleObjectB]">div> div v-bind="< id: someProp, 'other-attr': otherProp >">div> MyComponent :prop="someThing" /> MyComponent v-bind="$props" /> svg>a :xlink:special="foo">a>svg>

        The .prop modifier also has a dedicated shorthand, . :

        div :someProperty.prop="someObject">div> div .someProperty="someObject">div>

        The .camel modifier allows camelizing a v-bind attribute name when using in-DOM templates, e.g. the SVG viewBox attribute:

        svg :view-box.camel="viewBox">svg>

        • Class and Style Bindings
        • Components — Prop Passing Details

        v-model ​

        Create a two-way binding on a form input element or a component.

        • Expects: varies based on value of form inputs element or output of components
        • Limited to:
          • components
          • .lazy — listen to change events instead of input
          • .number — cast valid input string to numbers
          • .trim — trim input
          • Form Input Bindings
          • Component Events — Usage with v-model

          v-slot ​

          Denote named slots or scoped slots that expect to receive props.

          • Shorthand: #
          • Expects: JavaScript expression that is valid in a function argument position, including support for destructuring. Optional — only needed if expecting props to be passed to the slot.
          • Argument: slot name (optional, defaults to default )
          • Limited to:
            • components (for a lone default slot with props)

             BaseLayout>  template v-slot:header>  Header content  template>  template v-slot:default>  Default slot content  template>  template v-slot:footer>  Footer content  template> BaseLayout> InfiniteScroll>  template v-slot:item="slotProps">  div class="item">  >  div>  template> InfiniteScroll> Mouse v-slot=" ">  Mouse position: >, > Mouse>

            v-pre ​

            Skip compilation for this element and all its children.

            • Does not expect expression
            • Details Inside the element with v-pre , all Vue template syntax will be preserved and rendered as-is. The most common use case of this is displaying raw mustache tags.
            • Example

            span v-pre>< this will not be compiled >>span>

            v-once ​

            Render the element and component once only, and skip future updates.

            • Does not expect expression
            • Details On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.

             span v-once>This will never change: >span> div v-once>  h1>commenth1>  p>>p> div> MyComponent v-once :comment="msg">MyComponent> ul>  li v-for="i in list" v-once>>li> ul>

            • Data Binding Syntax — interpolations
            • v-memo

            v-memo ​

            • Expects: any[]
            • Details Memoize a sub-tree of the template. Can be used on both elements and components. The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. For example:

            div v-memo="[valueA, valueB]">  .  div>

            When the component re-renders, if both valueA and valueB remain the same, all updates for this

            and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused. It is important to specify the memoization array correctly, otherwise we may skip updates that should indeed be applied. v-memo with an empty dependency array ( v-memo=»[]» ) would be functionally equivalent to v-once . Usage with v-for v-memo is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large v-for lists (where length > 1000 ):

            div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">  p>ID: > - selected:  === selected >>p>  p>. more child nodesp> div>

            When the component’s selected state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The v-memo usage here is essentially saying «only update this item if it went from non-selected to selected, or the other way around». This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don’t need to include item.id in the memo dependency array here since Vue automatically infers it from the item’s :key .

            WARNING When using v-memo with v-for , make sure they are used on the same element. v-memo does not work inside v-for .

            v-cloak ​

            Used to hide un-compiled template until it is ready.

            • Does not expect expression
            • DetailsThis directive is only needed in no-build-step setups. When using in-DOM templates, there can be a «flash of un-compiled templates»: the user may see raw mustache tags until the mounted component replaces them with rendered content. v-cloak will remain on the element until the associated component instance is mounted. Combined with CSS rules such as [v-cloak] < display: none >, it can be used to hide the raw templates until the component is ready.
            • Example

            [v-cloak]   display: none; >

            div v-cloak>  > div>

            # Директивы

            (opens new window) . Учтите, что содержимое будет вставляться как обычный HTML и не будет компилироваться или обрабатываться как шаблоны Vue. Если понимаете, что пытаетесь организовать составление шаблона с помощью v-html , то попробуйте переосмыслить реализацию с использованием компонентов.

            ВНИМАНИЕ Динамическая отрисовка произвольного HTML-кода на сайте — опасная практика, которая приводит к XSS-уязвимостям

            (opens new window) . Передавайте в v-html содержимое, которому можно доверять, и НИКОГДА не передавайте содержимое, которое предоставляется пользователем.

            Локальные стили ( scoped ) в однофайловых компонентах также не будут применяться к содержимому v-html , потому что этот HTML никак не обрабатывается компилятором шаблонов Vue. При необходимости стилизовать содержимое в v-html вместо локального CSS можно использовать CSS-модули

            div v-html="'
            Hello World
            '">div> 

            # v-show

            • Ожидает: any
            • Использование: Отображает элемент по условию, выполняя переключение у элемента CSS-свойства display в зависимости от истинности указанного выражения. Директива запускает анимации перехода при изменении состояния.
            • См. также:Условная отрисовка — v-show

            # v-if

            • Ожидает: any
            • Использование: Отрисовывает элемент по условию, в зависимости от истинности указанного выражения. При переключении элемент и все содержащиеся в нём директивы / компоненты будут уничтожены и созданы заново. Для будет отрисовываться его содержимое. Директива запускает анимации перехода при изменении состояния. Будет иметь больший приоритет, при совместном использовании с v-for на элементе, но не рекомендуется использовать эти две директивы одновременно — подробнее в разделе отрисовки списков.
            • См. также:Условная отрисовка — v-if

            # v-else

            • Не ожидает выражения
            • Ограничение: предыдущий элемент должен иметь директиву v-if или v-else-if .
            • Использование: Обозначает «блок else» для v-if или цепочки v-if / v-else-if .

            div v-if="Math.random() > 0.5"> Сейчас меня видно div> div v-else> А сейчас — нет div> 

            1
            2
            3
            4
            5
            6

            # v-else-if

            • Ожидает: any
            • Ограничение: предыдущий элемент должен иметь директиву v-if или v-else-if .
            • Использование: Обозначает «блок else if» для v-if . Можно использовать для создания цепочек условий.

            div v-if="type === 'A'"> A div> div v-else-if="type === 'B'"> B div> div v-else-if="type === 'C'"> C div> div v-else> Не A/B/C div> 

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12

            # v-for

            • Ожидает: Array | Object | number | string | Iterable
            • Использование: Многократно отрисовывает элемент или блок шаблона на основании исходных данных. Значение директивы должно использовать специальный синтаксис alias in expression , чтобы объявить переменную для текущего элемента итерации:

            div v-for="item in items"> > div> 

            Также можно объявить переменную для индекса (или ключа, при работе с объектом):

            div v-for="(item, index) in items">div> div v-for="(value, name) in object">div> div v-for="(value, name, index) in object">div> 

            По умолчанию v-for будет обновлять элементы «на месте», не перемещая их. Если необходимо переупорядочивать элементы при изменениях, то потребуется указывать специальный атрибут key :

            div v-for="item in items" :key="item.id"> > div> 

            Кроме того, v-for может работать со значениями, реализующими протокол Iterable

            # v-on

            • Сокращённая запись: @
            • Ожидает: Function | Инлайн-выражение | Object
            • Аргумент: event
            • Модификаторы:
              • .stop — вызывает event.stopPropagation() .
              • .prevent — вызывает event.preventDefault() .
              • .capture — отслеживает событие в режиме capture.
              • .self — вызывает обработчик только если событие произошло именно на этом элементе.
              • . — вызывает обработчик только при нажатии определённой клавиши.
              • .once — вызывает обработчик события только один раз.
              • .left — вызывает обработчик только по нажатию левой кнопки мыши.
              • .right — вызывает обработчик только по нажатию правой кнопки мыши.
              • .middle — вызывает обработчик только по нажатию средней кнопки мыши.
              • .passive — добавляет обработчик события DOM с опцией < passive: true >.

               button v-on:click="doThis">button> button v-on:[event]="doThis">button> button v-on:click="doThat('hello', $event)">button> button @click="doThis">button> button @[event]="doThis">button> button @click.stop="doThis">button> button @click.prevent="doThis">button> form @submit.prevent>form> button @click.stop.prevent="doThis">button> input @keyup.enter="onEnter" /> button v-on:click.once="doThis">button> button v-on="< mousedown: doThis, mouseup: doThat >">button> 

              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              21
              22
              23
              24
              25
              26
              27
              28
              29
              30
              31
              32
              33
              34
              35

              Отслеживание пользовательских событий на компоненте (обработчик вызывается, когда в дочернем компоненте будет сгенерировано событие my-event ):

              my-component @my-event="handleThis">my-component> my-component @my-event="handleThis(123, $event)">my-component> 

              • Обработка событий
              • Компоненты — Прослушивание событий из дочерних компонентов в родительских компонентах

              # v-bind

              • Сокращённая запись: : или . (при использовании модификатора .prop )
              • Ожидает: any (если указан аргумент) | Object (без аргумента)
              • Аргумент: attrOrProp (опционально)
              • Модификаторы:
                • .camel — преобразование имён атрибутов из kebab-case в camelCase.
                • .prop — форсирует установку привязки как свойством DOM. 3.2+
                • .attr — форсирует установку привязки атрибутом DOM. 3.2+

                 img v-bind:src="imageSrc" /> button v-bind:[key]="value">button> img :src="imageSrc" /> button :[key]="value">button> img :src="'/path/to/images/' + fileName" /> div :class="< red: isRed >">div> div :class="[classA, classB]">div> div :class="[classA, < classB: isB, classC: isC >]">div> div :style="< fontSize: size + 'px' >">div> div :style="[styleObjectA, styleObjectB]">div> div v-bind="< id: someProp, 'other-attr': otherProp >">div>  my-component :prop="someThing">my-component> child-component v-bind="$props">child-component> svg>a :xlink:special="foo">a>svg> 

                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                16
                17
                18
                19
                20
                21
                22
                23
                24
                25
                26
                27
                28
                29
                30
                31
                32
                33
                34
                35

                При установке привязки к элементу, по умолчанию Vue проверяет оператором in , был ли определён ключ в элементе как свойство. Если свойство определено, то Vue будет устанавливать значение как свойство DOM, а не как атрибут. В большинстве случаев это и ожидается, но можно изменить поведение, явно указывая модификаторы .prop или .attr . Иногда это необходимо, особенно при работе с пользовательскими элементами. Модификатор .prop также имеет сокращённую запись . :

                div :someProperty.prop="someObject">div> div .someProperty="someObject">div> 

                Модификатор .camel позволяет приводить имя атрибута v-bind в camelCase при использовании DOM-шаблонов, например для атрибута viewBox в SVG:

                svg :view-box.camel="viewBox">svg> 

                • Работа с классами и стилями
                • Компоненты — Передача данных в дочерние компоненты через входные параметры

                # v-model

                • Ожидает: варьируется в зависимости от элемента формы или работы компонента
                • Использование ограничено:
                  • компоненты
                  • .lazy — отслеживание события change вместо input
                  • .number — приведение корректной строки со значением к числу
                  • .trim — удаление пробелов в начале и в конце строки
                  • Работа с формами
                  • Компоненты — Пользовательские события: Аргументы v-model

                  # v-slot

                  • Сокращённая запись: #
                  • Ожидает: JavaScript выражение, допустимое в позиции аргумента функции (можно использовать деструктуризацию в поддерживаемых окружениях). Опционально — требуется только в случае ожидания входных параметров, передаваемых в слот.
                  • Аргумент: имя слота (опционально, по умолчанию default )
                  • Использование ограничено:
                    • компонентами (для единственного слота по умолчанию с входными параметрами)

                     base-layout> template v-slot:header> Содержимое для заголовка template> template v-slot:default> Содержимое для слота по умолчанию template> template v-slot:footer> Содержимое для подвала template> base-layout> infinite-scroll> template v-slot:item="slotProps"> div class="item"> > div> template> infinite-scroll> mouse-position v-slot="< x, y >"> Mouse position: >, > mouse-position> 

                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                    13
                    14
                    15
                    16
                    17
                    18
                    19
                    20
                    21
                    22
                    23
                    24
                    25
                    26
                    27
                    28

                    # v-pre

                    • Не ожидает выражения
                    • Использование: Пропускает компиляцию для элемента и всех его потомков. Можно использовать для отображения необработанных тегов фигурных скобок. Пропуск большого количества элементов без директив на них также может ускорить компиляцию.
                    • Пример:

                    span v-pre>>span> 

                    # v-cloak

                    • Не ожидает выражения
                    • Использование: Директива остаётся на элементе, пока связанный с ним экземпляр компонента не завершит компиляцию. В сочетании с CSS-правилом [v-cloak] < display: none >позволяет скрывать нескомпилированные шаблоны до тех пор, пока не будет готов экземпляр компонента.
                    • Пример:

                    [v-cloak]  display: none; > 

                    div v-cloak> > div> 

                    # v-once

                    • Не ожидает выражения
                    • Подробности:Отрисовывает один раз элемент или компонент. При последующих обновлениях данных и перерисовках элемент/компонент и все его потомки будут считаться статичными и пропускаться. Может использоваться для оптимизации производительности обновлений.

                     span v-once>Это значение никогда не изменится: >span> div v-once> h1>Комментарийh1> p>>p> div> my-component v-once :comment="msg">my-component> ul> li v-for="i in list" v-once>>li> ul> 

                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                    13
                    14
                    15
                    16

                    • Синтаксис шаблонов — Интерполяции
                    • v-memo

                    # v-memo 3.2+

                    • Ожидает: Array
                    • Подробности: Мемоизация части поддерева шаблона. Может использоваться как для элементов, так и для компонентов. Директива ожидает массив фиксированной длины зависимых значений, которые станут использоваться для сравнения при мемоизации. Если каждое значение массива осталось таким же, как при последней отрисовке, то обновление всего поддерева будет пропущено. Например:

                    div v-memo="[valueA, valueB]"> . div> 

                    При повторной отрисовке компонента, если valueA и valueB остались неизменными, то будут пропущены все обновления этого

                    и его дочерних элементов. Фактически, будет пропущено даже создание VNode виртуального DOM, поскольку можно переиспользовать мемоизировую копию поддерева. Важно правильно определить массив для мемоизации, иначе можно пропустить обновления, которые действительно должны быть выполнены. v-memo с пустым массивом зависимостей ( v-memo=»[]» ) будет функционально эквивалентен v-once . Использование вместе с v-for v-memo нужна исключительно для микрооптимизации сценариев, где критически важна производительность, и должна использоваться крайне редко. Наиболее частый случай, где она может оказаться полезной — отрисовка больших списков с помощью v-for (когда length > 1000 ):

                    div v-for="item in list" :key="item.id" v-memo="[item.id === selected]"> p>ID: > - выбран: >p> p>. больше дочерних элементовp> div> 

                    При изменении состояния selected в компоненте, будет создаваться большое число VNode, даже если большинство элементов остаётся таким же. Использование v-memo здесь уточняет, что «обновляем этот элемент только в том случае, если он перешёл из состояния не выбран в состояние выбран». Это позволит всем незатронутым элементам переиспользовать свою предыдущую VNode и полностью пропустить операцию сравнения. Обратите внимание, что item.id не нужно добавлять в массив зависимостей мемоизации, поскольку Vue автоматически определяет его из :key элемента.

                    ПРЕДУПРЕЖДЕНИЕ При использовании v-memo вместе с v-for , убедитесь, что они указываются на одном и том же элементе. v-memo ВНУТРИ v-for НЕ БУДЕТ РАБОТАТЬ.

                    # v-is удалено

                    Удалено в версии 3.1.0. Вместо неё используйте атрибут is с префиксом vue: .

                    (opens new window)
                    Последнее обновление страницы: больше 1 года назад

                    Похожие публикации:

                    1. Как включить подсветку клавиатуры на ноутбуке lenovo
                    2. Как преобразовать txt в csv
                    3. Как сделать так чтобы текст обтекал картинку
                    4. Какая разница между e1 и sip