Документация Engee

Elements

function root(app::M)::String where {M<:ReactiveModel}

Генерирует допустимое имя объекта JavaScript, которое будет использоваться в качестве имени приложения Vue и соответствующего HTML-контейнера.

function elem(app::M)::String where {M<:ReactiveModel}

Генерирует идентификатор JS #, который указывает на элемент DOM, содержащий шаблон приложения Vue.

function root(app::M)::String where {M<:ReactiveModel}

Генерирует допустимое имя объекта JavaScript, которое будет использоваться в качестве имени приложения Vue и соответствующего HTML-контейнера.

function vue_integration(model::M; vue_app_name::String, endpoint::String, debounce::Int)::String where {M<:ReactiveModel}

Generates the JS/Vue.js code which handles the 2-way data sync between Julia and JavaScript/Vue.js. It is called internally by Stipple.init which allows for the configuration of all the parameters.

@if(expr)

Генерирует код Vue.js v-if, используя expr в качестве условия. https://vuejs.org/v2/api/#v-if

Пример

julia> span("Bad stuff's about to happen", class="warning", @if(:warning))
"<span class="warning" v-if='warning'>Bad stuff's about to happen</span>"
@elseif(expr)

Генерирует код Vue.js v-else-if, используя expr в качестве условия. https://vuejs.org/v2/api/#v-else-if

Пример

julia> span("An error has occurred", class="error", @elseif(:error))
"<span class="error" v-else-if='error'>An error has occurred</span>"
@else(expr)

Генерирует код Vue.js v-else, используя expr в качестве условия. https://vuejs.org/v2/api/#v-else

Пример

julia> span("Might want to keep an eye on this", class="notice", @else(:notice))
"<span class="notice" v-else='notice'>Might want to keep an eye on this</span>"

Создает директиву v-for для отображения списка элементов на основе массива. https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

@for поддерживает как выражения js в виде строк, так и выражения Julia с векторами или словарями.

Пример

JavaScript

julia> p(" {{todo}} ", class="warning", @for("todo in todos"))
\"\"\"

<p v-for='todo in todos'>
    {{todo}}
</p>
\"\"\"

Выражение Julia

julia> dict = Dict(:a => "b", :c => 4);
julia> ul(li("k: {{ k }}, v: {{ v }}, i: {{ i }}", @for((v, k, i) in dict)))
\"\"\"

<ul>
    <li v-for="(v, k, i) in {'a':'b','c':4}">
        k: {{ k }}, v: {{ v }}, i: {{ i }}
    </li>
</ul>
\"\"\"

Обратите внимание на обратный порядок значения, ключа и индекса по сравнению с деструктуризацией в Stipple. Также можно выполнять перебор по (v, k) или v; индекс всегда будет отсчитываться от нуля.

@text(expr)

Создает привязку Vue v-text или text-content.prop к свойству textContent элемента. https://vuejs.org/v2/api/#v-text

Пример

julia> span("", @text("abc | def"))
"<span :text-content.prop='abc | def'></span>"

julia> span("", @text("abc"))
"<span v-text='abc'></span>"
@bind(expr, [type])

Привязывает параметр модели к компоненту Vue, создавая свойство v-model и при необходимости определяя тип параметра. https://vuejs.org/v2/api/#v-model

Пример

julia> input("", placeholder="Type your name", @bind(:name))
"<input placeholder="Type your name"  v-model='name' />"

julia> input("", placeholder="Type your name", @bind(:name, :identity))
"<input placeholder="Type your name"  v-model.identity='name' />"
@data(expr)

Создает привязку данных Vue.js для элементов, которым она требуется.

Пример

julia> plot(@data(:piechart), options! = "plot_options")
"<template><apexchart :options="plot_options" :series="piechart"></apexchart></template>"
on(action, expr)

Определяет подпрограмму js, которая вызывается заданным action компонента Vue, например :click, :input.

Пример

julia> input("", @bind(:input), @on("keyup.enter", "process = true"))
"<input  v-model='input' v-on:keyup.enter='process = true' />"

Если expr является символом, то должно существовать переопределение Stipple.notify, то есть функция обработчика событий для соответствующего события с именем expr.

Пример

julia> Stipple.notify(model, ::Val{:my_click}) = println("clicked")

или если необходима информация о событии

Stipple.notify(model, ::Val{:my_click}, event_info) = println(event_info)

Обратите внимание, что в обработчике model относится к принимающей модели, а event — это словарь информации о событии. Обработчик связан с элементом пользовательского интерфейса.

btn("Event test", @on("click", :my_click))

Иногда требуется предварительная обработка событий, например для добавления или пропуска информации.

@on(:uploaded, :uploaded, "for (f in event.files) { event.files[f].fname = event.files[f].name }")
@showif(expr, [type])

v-show всегда отображается и остается в DOM; v-show служит только для переключения свойства CSS display элемента. https://vuejs.org/v2/guide/conditional.html#v-show

При выборе @showif или @iif учитывайте следующие особенности.

v-if предполагает более высокие затраты на переключение, в то время как v-show предполагает более высокие затраты на первоначальное отображение.

Пример

julia> h1("Hello!", @showif(:ok))
"<h1 v-show="ok">Hello!</h1>"
function stylesheet(href::String; args...) :: String

Генерирует соответствующий HTML-тег link для ссылки на таблицу стилей CSS в href.

Пример

julia> stylesheet("https://fonts.googleapis.com/css?family=Material+Icons")
"<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />"