The OpenNET Project / Index page

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

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

Вышла новая версия 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...)
Автор новости: Аноним
Тип: Программы
Ключевые слова: vue.js, javascript
При перепечатке указание ссылки на opennet.ru обязательно
Обсуждение Ajax/Линейный | Раскрыть все сообщения | 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 [ответить] [показать ветку] [···]     [к модератору]  
  • +/
    Т е для 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, или удалённ... весь текст скрыт [показать]
     
     
  • 4.20, Аноним (-), 19:56, 23/11/2016 [^] [ответить]     [к модератору]  
  • +/
    Так тогда это обычное web-приложение будет SPA - single page application Не в... весь текст скрыт [показать]
     
     
  • 5.26, Андрей (??), 01:11, 24/11/2016 [^] [ответить]     [к модератору]  
  • +/
    Тем, кто занимается web ом, всё ясно Вопрос как раз в том, есть ли туториалы пр... весь текст скрыт [показать]
     
     
  • 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 без году неделя Подожди ещё выйдет если конечно язык стоящий А ... весь текст скрыт [показать]
     
  • 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 для вставк... весь текст скрыт [показать]
     
     
  • 5.36, Аноним (-), 15:14, 24/11/2016 [^] [ответить]     [к модератору]  
  • +1 +/
    А потом зайдите на 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 [^] [ответить]     [к модератору]  
  • +/
    Тогда просто пометить нужные куски HTML-я при помощи id something и далее дела... весь текст скрыт [показать]
     
  • 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 А здесь тут... весь текст скрыт [показать]
     
  • 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... весь текст скрыт [показать]
     
     
  • 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:
    Заголовок:
    Текст:


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