The OpenNET Project / Index page

[ новости /+++ | форум | теги | ]

Выход фреймворка для построения пользовательских интерфейсов Vue.js 2.1

23.11.2016 15:44

Вышла новая версия Vue.js, JavaScript-фреймворка для построения пользовательских интерфейсов. Vue.js использует декларативное описание интерфейса и MVC-подобный паттерн, аналогично фреймворкам React и Angular. Фреймворк примечателен низким порогом вхождения (достаточно знать HTML, CSS и JavaScript), компактным ядром (17 Кб+Runtime), расширяемостью для проектов любого масштаба, обеспечением высокой производительности без необходимости внесения в приложения дополнительных оптимизаций, гибкой системой применения эффектов. Код проекта распространяется под лицензией MIT.

Основные новшества:

  • Scoped Slots: До версии 2.1 родительский шаблон мог внедрять свой HTML-контент во встраиваемый компонент (посредством тега "slot" в шаблоне встраиваемого компонента), но при этом у родителя не было доступа к текущим данным встраиваемого компонента для непосредственной подстановки их во внедряемый контент. Таким образом, внедряемый контент мог динамически отрисовываться, опираясь лишь на данные родителя. Теперь же дочерний/встраиваемый компонент может напрямую передавать свои данные/состояние родителю при внедрении контента последним, чтобы родитель мог их декларативно подставить во внедряемый им динамический шаблон;
  • Добавлена директива v-else-if (в дополнение к имеющимся v-if и v-else);
  • Фильтры теперь могут использоваться также и внутри выражений в директиве v-bind (помимо использования их при стандартной подстановке текста в шаблон). Например, <img v-bind:src="imgSrc | formatURL">


  1. Главная ссылка к новости (https://gist.github.com/yyx990...)
Автор новости: Аноним
Лицензия: CC BY 3.0
Короткая ссылка: https://opennet.ru/45546-vue.js
Ключевые слова: vue.js, javascript
При перепечатке указание ссылки на opennet.ru обязательно


Обсуждение (49) Ajax | 1 уровень | Линейный | +/- | Раскрыть всё | RSS
  • 1.1, Жека Мутный (?), 17:44, 23/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +3 +/
    За Vue будущее. Скриньте.
     
     
  • 2.16, th3m3 (ok), 19:27, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    Почему? Чем он лучше react?
     
     
  • 3.17, Аноним (-), 19:39, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +10 +/
    > Почему? Чем он лучше react?

    Будущее в JavaScript не за тем, что лучше, а за тем, что новее. Вспомним jQuery, ExtJS, Angular, потом ваш React, теперь вот Vue. Через год ещё что-нибудь появится, что отправит Vue в историю.

     
  • 2.19, абвгдейка (ok), 19:48, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    будущее в перемешке верстки и логики? Очередной г-нолисипед. Скринь :)
     
     
  • 3.33, Аноним (-), 14:52, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    А в HTML по другому вообще особо не получается. Как в этом крапе сделать реюзабельный "виджет"? Чтобы и логика и верстка и все вместе - реюзабельный компонент, который подключить вот тут, а вон там - три инстанса с разными параметрами?
     
     
  • 4.44, абвгдейка (ok), 22:52, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    всё получается, просто поработать надо. Зато потом поддерживается на раз-два. А с этим мусором потом трястись, как с девушкой:)
     
  • 2.30, Очередной аноним (?), 10:33, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > Фреймворк примечателен низким порогом вхождения

    Это из-за этого? В смысле, Вы только его и осилили или что все-все-все подрастающие веб-девелоперы обязательно начнут с него и потом не слезут?

     
     
  • 3.34, Аноним (-), 14:53, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • –1 +/
    > Это из-за этого? В смысле, Вы только его и осилили или что
    > все-все-все подрастающие веб-девелоперы обязательно начнут с него и потом не слезут?

    Можно было просто написать: "специально для вебмакак".


     

  • 1.2, Аноним (-), 17:47, 23/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    >Фреймворк примечателен низким порогом вхождения (достаточно знать HTML, CSS и JavaScript)
    >достаточно знать HTML, CSS и JavaScript

    Т.е. для React и Angular знания HTML, CSS и JavaScript недостаточны?

     
     
  • 2.3, Михаил (??), 17:54, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    Для Angular надо ещё знать технику Dependency Injection
     
     
  • 3.41, KonstantinB (ok), 18:14, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Сложная вещь, да, два года изучать минимум!
     
  • 2.4, Аноним (-), 17:54, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Для Vue достаточно, скажем так, базовых знаний web-стека, а у Ангуляра/Реакта требования покруче будут, например большинство примеров по Реакту используют JS-2015.
     
  • 2.22, piteri (ok), 20:20, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    Да, естественно, для того чтобы писать на ангуляре придется изучить птичий язык ангуляра и научиться угадывать места ошибок по внешним проявлениям, для реакта - хорошо изучить логику его работы чтобы не втыкаться в постоянные тормоза.
     

  • 1.5, Андрей (??), 18:24, 23/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    А есть туториалы, как разрабатывать GUI на подобных js-фреймворках и встраивать их в код на C/C++/Go для привыкших писать на C/GTK, C++/Qt, Go/-?
     
     
  • 2.14, Аноним (-), 19:20, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    Есть же QML/Qt-Quick, зачем вам с собой целый браузер встраивать?
     
     
  • 3.18, Андрей (??), 19:39, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Браузер встраиваться не будет, а будет коннектиться или с localhost, или удалённо к консольному приложению, которое отдаёт этот html/css/js по HTTP, если я правильно понимаю. Учитывая, что OpenGL в браузере летает, думаю, обычный GUI тоже мог бы не тормозить, если с умом спроектирован. Вот только есть ли такие? (Из коммерческих недавно мне sciter попался на глаза, якобы с умом, но не пробовал.)
     
     
  • 4.20, Аноним (-), 19:56, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Так тогда это обычное web-приложение будет (SPA - single page application). Не вижу никаких проблем - берете любой знакомый язык (всякие изначально web-ориентированые, типа Go/NodeJS будут предпочтительнее) и фигачите на нём RESTful API через которое будет происходить общение с Javascript web-мордой.
     
     
  • 5.26, Андрей (??), 01:11, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Тем, кто занимается web'ом, всё ясно. Вопрос как раз в том, есть ли туториалы про SPA не для новичков в программировании, а для тех, кому привычна не web-разработка. С RESTful API первый же вопрос: пока структуры простые (текст), всё ясно, в JSON замечательно читаются. А как только там появляются указатели, что тогда? А с js web-морда как в отличие от дизайна в Glade или QtDesigner/QtCreator, или создание виджетов вручную: новое окно, новая панель, упаковать панель в окно, новый горизонтальный бокс, упаковать бокс в панель, новый лэйбл, упаковать лэйбл в бокс и т.д., потом колбэки? А как с TreeView? С 1000 записями он даже в Gtk подтормаживает.
     
     
  • 6.32, Аноним (-), 13:04, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    В любом случае, обязательно потребуются базовые знания JavaScript HTML CSS без ... большой текст свёрнут, показать
     
     
  • 7.45, Андрей (??), 23:50, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Меня интересует hello world на примере простого векторного редактора Т е есть ... большой текст свёрнут, показать
     
  • 4.39, Rodegast (ok), 16:44, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Ты уверен что тебе веб-интерфейс нужен? Делай нормальный и не мучайся.
     
     
  • 5.46, Андрей (??), 23:53, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Нормальные я делаю. Вот думал, что раз для Go так ничего традиционного и не выходит, то можно было бы попробовать что-то на web. Но только если это не раздутый фреймворк.
     
     
  • 6.51, Rodegast (ok), 10:55, 25/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Так этому Go без году неделя. Подожди ещё выйдет (если конечно язык стоящий). А без раздутых Js фреймворков на web ничего толкового всё равно не сделать. С фреймворками сделать в принципе можно, но нормальный GUI порвёт эту web-морду как Тузик.
     

  • 1.6, h31 (ok), 18:25, 23/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • –1 +/
    Народ, подскажите.
    Мне нужно забрать AJAX-ом JSON с нужными данными и запихнуть их в HTML/DOM в указанные места. Никакой обработки, просто взять и подставить по шаблону. Как это проще всего сделать? Желательно без погружения в глубины JavaScript-а и сложных фреймворков для него. В идеале хочется просто указать - брать по такому-то URL, из такого поля и подставить вот сюда.
     
     
  • 2.8, Илья (??), 18:37, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    jquery
     
     
  • 3.11, h31 (ok), 19:09, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • –2 +/
    В первую очередь как раз про него вспомнил. Может есть что-нибудь более современное, более декоративное?
     
     
  • 4.23, Василий Топоров (?), 20:55, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Вам нужна простенькая обвязка над xmlHttpRequest и нативные методы js для вставки контента в DOM. Тащить для этого Jquery с кучей лишнего не нужно. Если нужно "совеременное и декоративное", то просто пишите в ES-6 стиле (https://learn.javascript.ru/es-modern).
     
     
  • 5.36, Аноним (-), 15:14, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    > Если нужно "совеременное и декоративное", то просто пишите в ES-6
    > стиле (https://learn.javascript.ru/es-modern).

    А потом зайдите на caniuse.com и узнайте что каждый десятый юзер будет за это грызть мозг.

     
  • 2.12, Аноним (-), 19:11, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Можно и с помощью Vue - там удобство по сравнению с JQuery в том, что HTML-шаблон будет красивый, в простейшем случае: <td> {{my_variable}} </td>
     
  • 2.21, Мимокрокодил (?), 20:06, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    ванильный js будет в самый раз, библиотеки для этого не нужны
     
  • 2.29, Антон (??), 09:12, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +1 +/
    простой пример с jQuery без обработки ошибок:

    $.getJSON( "http://api.site.com/example.json", function(data) {
      $(".container").text(data.key);         /* <div class="container">Value</data> */
    });

    ---------------
    example.json:

    {
    "key":"Value"
    }

     
  • 2.35, Аноним (-), 15:10, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > шаблону. Как это проще всего сделать? Желательно без погружения в глубины
    > JavaScript-а и сложных фреймворков для него.

    Тогда просто пометить нужные куски HTML-я при помощи id="something" и далее делаешь XMLHttpRequest, парсишь как тебе там надо, получаешь интересовавший кусок чем-то типа document.getElementById("something") и на этом например .innerHTML="что ты там хотел". В элемент с id="label" запишется "что ты там хотел" как содержимое элемента.

    Если хочется чтобы симпатично выглядело - глянь на bootstrap. Чтобы самому не бодаться с всяким там выравниванием и адаптивом и прочим изобретением всяких там прогрессбаров и т.п. самому. Этого вообще осваивать не требуется почти. Как написал какой-то китаец, "теперь кто угодно может делать вабстранички".

     
  • 2.40, Аноним (-), 17:26, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    riot.js можете ещё глянуть.
     
  • 2.42, KonstantinB (ok), 18:18, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    JSON забрать - ручками на XMLHttpRequest не проблема. Можно взять fetch-полифилл https://github.github.io/fetch/

    Засунуть - можно ручками повертеть DOM, можно взять какой-нибудь handlebarsjs в качестве шаблонизатора.

     

  • 1.7, Аноним (-), 18:36, 23/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Советую также посмотреть на mithril.js
     
     
  • 2.24, Аноним (-), 21:20, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Чего-то не смог найти mithril на https://stats.js.org/, очень странно, вроде проект относительно известный, не верю что он хотя бы в JS-top500 на гитхабе не вхож.
     

  • 1.13, Sunderland93 (ok), 19:14, 23/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Где можно посмотреть примеры?
     
     
  • 2.15, Аноним (-), 19:23, 23/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Вот здесь примеры простых приложений:
    https://vuejs.org/v2/examples/

    А здесь туториал:
    https://vuejs.org/v2/guide/

    На русский вроде тоже активно переводят вторую версию туториала, но перевод, честно говоря, так себе.

     

  • 1.25, menangen (?), 00:16, 24/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Из малоизвезстных, но прикольных проектов есть ещё Cash.js, Riot.js, Zepto.js
     
  • 1.27, Аноним (-), 04:55, 24/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Также можно отметить что Gitlab выбрал Vuejs https://about.gitlab.com/2016/10/20/why-we-chose-vue/

    И несколько проектов для построения UI на Vuejs:
    — Bootstrap + Vuejs http://yuche.github.io/vue-strap/
    — Element http://element.eleme.io/#/en-US
    — Weex (от Alibaba) https://alibaba.github.io/weex/

     
     
  • 2.28, Ан (??), 07:31, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • –1 +/
    Это ни чего не означает. Я вот вижу что Vue.js использует в синтаксисе шаблонов очередной мета-язык, как и в Angular или Ember. А вот React ни чего такого изобретать не стал и пишешь на чистом JS ну с примесью JSX, хотя это только ширма, под ней скрывается тоже чистый JS. И это я считаю преимущество перед ними всеми, не надо учить очередной синтаксис очередного проходного фреймворка.
     
     
  • 3.43, KonstantinB (ok), 19:15, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    JSX, как будто, не очередной синтаксис.

    Если уж быть таким пуристом, то надо писать без JSX, ручками - React.createElement('div', {}, и так далее).

    Посмотрю, надолго ли вас хватит :)

     
     
  • 4.49, Ан (??), 07:36, 25/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Ну JSX сродни HTML и особых усилий прилагать в изучении его не надо. А вот синтаксис управляющих инструкций в шаблонах каждого нового фреймворка учить, да нах... это надо. К тому же используя нативный JS можно использоваться различные подходы к написанию кода шаблона, либо в классическом стиле, либо в стиле FP, либо как ещё душе угодно. А в других фреймворках, которые вводят свой определённый синтаксис управляющих инструкций, ты уж извини ты только ограничен фантазией разработчиков фреймворка.
     
     
  • 5.50, Ан (??), 07:46, 25/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > Ну JSX сродни HTML и особых усилий прилагать в изучении его не
    > надо. А вот синтаксис управляющих инструкций в шаблонах каждого нового фреймворка
    > учить, да нах... это надо. К тому же используя нативный JS
    > можно использоваться различные подходы к написанию кода шаблона, либо в классическом
    > стиле, либо в стиле FP, либо как ещё душе угодно. А
    > в других фреймворках, которые вводят свой определённый синтаксис управляющих инструкций,
    > ты уж извини ты только ограничен фантазией разработчиков фреймворка.

    К тому же щас новая версия движка Virtual DOM создаётся, не имеющая аналогов в других подобных фреймворках. Преимущество в том что ты можешь планировать обновления DOM-а, например чтобы в момент работы анимаций и предстоящего обновления DOM-а, оно не помешало работе анимации и соответственно видимых фризов. Если есть желание можно почитать здесь:
    https://github.com/timarney/react-faq#react-fiber

     
  • 2.37, Аноним (-), 15:16, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > Также можно отметить что Gitlab выбрал Vuejs

    Не в обиду, но гитлаб всегда отличался юзабилити своего гуя на уровне плинтуса, поэтому считать это рекламой либы - ну не знаю. Скорее антирекламой.

     
     
  • 3.47, Аноним (-), 03:15, 25/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > гитлаб всегда отличался юзабилити своего гуя на уровне плинтуса

    Может сейчас за голову возьмутся? :-)

     
  • 3.48, blackst0ne (ok), 05:55, 25/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    Можете привести более конкретные примеры проблем с UX гитлаба?
    Сам им пользуюсь. Может быть не обращал внимания на такие проблемы.
     

  • 1.31, Аноним (-), 10:37, 24/11/2016 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Самая крутая вещь - это famo.us
     
     
  • 2.38, Аноним (-), 15:19, 24/11/2016 [^] [^^] [^^^] [ответить]  
  • +/
    > Самая крутая вещь - это famo.us

    Неведома е...на х...я - это как раз про вот такие сайты. Прямо со стартовой поток маркетингового булшита в три реки.

     

     Добавить комментарий
    Имя:
    E-Mail:
    Текст:



    Партнёры:
    PostgresPro
    Inferno Solutions
    Hosting by Hoster.ru
    Хостинг:

    Закладки на сайте
    Проследить за страницей
    Created 1996-2024 by Maxim Chirkov
    Добавить, Поддержать, Вебмастеру