Download as PDF, PPTX
![Vue [Вю] (франц.) — Вид](https://image.slidesharecdn.com/vue-160607122435/85/Vue-js-Vue-server-js-2-320.jpg)
![Vue [Вю] (франц.) — Вид
Vue → View [Вью]](https://image.slidesharecdn.com/vue-160607122435/85/Vue-js-Vue-server-js-3-320.jpg)
![<div v-bind:class=" 'foo' "></div>
<div :class=" 'foo' "></div>
<div :class=" ['foo', {bar: true}] "></div>](https://image.slidesharecdn.com/vue-160607122435/85/Vue-js-Vue-server-js-34-320.jpg)
![Другие решения
●
Эмуляция (jsdom, PhantomJS)
●
Snapshots / Prerender.io [SEO]](https://image.slidesharecdn.com/vue-160607122435/85/Vue-js-Vue-server-js-88-320.jpg)
![Vue [Вю] (франц.) — Вид](https://image.slidesharecdn.com/vue-160607122435/75/Vue-js-Vue-server-js-2-2048.jpg)
![Vue [Вю] (франц.) — Вид
Vue → View [Вью]](https://image.slidesharecdn.com/vue-160607122435/75/Vue-js-Vue-server-js-3-2048.jpg)
![<div v-bind:class=" 'foo' "></div>
<div :class=" 'foo' "></div>
<div :class=" ['foo', {bar: true}] "></div>](https://image.slidesharecdn.com/vue-160607122435/75/Vue-js-Vue-server-js-34-2048.jpg)
![Другие решения
●
Эмуляция (jsdom, PhantomJS)
●
Snapshots / Prerender.io [SEO]](https://image.slidesharecdn.com/vue-160607122435/75/Vue-js-Vue-server-js-88-2048.jpg)
Uploaded byOntico
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Документ обсуждает Vue.js и его серверный аналог vueserver.js, описывая их особенности и сравнительные характеристики. Представлены технические детали, примеры кода и различные методы работы с компонентами и директивами. Также рассматриваются преимущества и недостатки использования vue.server, а также рекомендации по переходу на более новую версию Vue 2.0.
More Related Content
Similar to Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
- 1. Vue.js и его брат-близнец VueServer.js АндрейСолодовников 1.4
- 2. Vue [Вю] (франц.)— Вид
- 3. Vue [Вю] (франц.)— Вид Vue → View [Вью]
- 4.
- 7.
- 8.
- 9.
- 10.
- 13.
- 15.
- 16.
- 17.
- 18. React (v15.1.0) 43k IE9+ 147 (43)kb Vue.js (v1.0.24) 20k IE9+ 76 (26) kb Звездочек на GitHub Поддержка Размер
- 19. React (v15.1.0) 43k IE9+ 147 (43)kb 550ms Vue.js (v1.0.24) 20k IE9+ 76 (26) kb 450ms Звездочек на GitHub Поддержка Размер Стартует за* * В моём личном тесте
- 20.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. <div v-if="false">Не отрисуется</div> <divv-else>Отрисуется</div>
- 31. <div v-if="false">Не отрисуется</div> <divv-else>Отрисуется</div> <div>Отрисуется</div>
- 32. <div v-bind:class=" 'foo'"></div>
- 33. <div v-bind:class=" 'foo'"></div> <div :class=" 'foo' "></div>
- 34. <div v-bind:class=" 'foo'"></div> <div :class=" 'foo' "></div> <div :class=" ['foo', {bar: true}] "></div>
- 35. <div class="foo"></div> <div class="foo"></div> <divclass="foo bar"></div>
- 36.
- 37.
- 38. <div>{{ someText }}</div> <div>{{*someText }}</div>
- 39. <div>{{ someText }}</div> <div>{{*someText }}</div> <div>{{{ someHtml }}}</div>
- 40. <div>{{ someText }}</div> <div>{{*someText }}</div> <div>{{{ someHtml }}}</div> <div title="Было {{pubDate}}">
- 41. <div>{{ someText }}</div> <div>{{*someText }}</div> <div>{{{ someHtml }}}</div> <div title="Было {{pubDate}}"> <div title="Было {{pubDate | dateFull}}">
- 42.
- 43. Data Scope Template +Children Destroy Attach created compiled ready destroyed
- 44. Data Scope Template +Children Destroy Attach created compiled ready destroyed beforeDestroy beforeCompiled
- 45. Data Scope Template +Children Destroy Attach created compiled ready destroyed beforeDestroy beforeCompiled activate
- 46.
- 47. export default { //... } Создание компонентов
- 48.
- 49. template: '<h1>Hello world</h1>', data() { return { cats: 1, dogs: 2 }; }
- 50. template: '<h1>Hello world</h1>', data() { return { cats: 1, dogs: 2 }; }, methods: { … }
- 51. template: '<h1>Hello world</h1>', data() { return { cats: 1, dogs: 2 }; }, methods: { … }, computed: { summ () { return this.cats + this.dogs; } // 3 }
- 52. created () {… } beforeCompiled () { … } compiled () { … } activate () { … } ready () { … } beforeDestroy () { … } destroyed () { … }
- 53.
- 54. Vue.component('MyBlock', { …}); export default { // ... components: { MyBlock: { … } } }
- 55.
- 56.
- 57.
- 58. const Root ={ el: 'body', template: '<div>...</div>' }; new Vue(Root);
- 59.
- 60. template: '<component :is="name + 'Page' "></component>', data: { name: 'Main' }
- 61. template: '<component :is="name + 'Page' "></component>', data: { name: 'Main' }, components: { MainPage: {...}, ArticlesPage: {...} } Главная
- 62. template: '<component :is="name + 'Page' "></component>', data: { name: 'Articles' }, components: { MainPage: {...}, ArticlesPage: {...} } Статьи
- 63.
- 64. <button v-on:click="onButtonClick($event)"></button> <button v-on:click="isVisible= !isVisible"></button> Обработка событий
- 65. <button v-on:click="onButtonClick($event)"></button> <button v-on:click="isVisible= !isVisible"></button> <button @click="isVisible = !isVisible"></button> Обработка событий
- 66. <button @click="isVisible =!isVisible"> {{ isVisible ? 'Скрыть' : 'Показать' }} </button> <div v-show="isVisible">Содержимое</div>
- 67.
- 68.
- 69.
- 70. { message: 'Привет!'} <child></child>parent child { } <div></div>
- 71. { message: 'Привет!'} <child></child>parent child { } <div></div> Как передать?
- 72. { message: 'Привет!'} <child></child>parent child props: { ... } { } <div></div> Как передать?
- 73.
- 74. props: { value: { required:true, default: 'foo', type: String, validate () {…} } }
- 75. { message: 'Привет!'} <child></child>parent child props: { value: null } { } <div></div>
- 76. { message: 'Привет!'} <child :value="message"></child>parent child props: { value: null } { } <div></div>
- 77. { message: 'Привет!'} <child :value="message"></child>parent child props: { value: null } { value: 'Привет!' } <div>Привет!</div>
- 78. <child :value="message"></child> <child :value.once="message"></child> <child:value.sync="message"></child> parent (*)→ child parent (1)→ child parent ←→ child
- 79. ● vue-router, vuex… ● Slot API ● DevTools(Hot Reload + TimeTravel) ● Шикарные доки А ещё...
- 80. Попробуйте Vue.js 1день (серьёзно)
- 81. Что делать сSEO?
- 82. Что делать сSEO? Хочу видеть контент сразу!
- 83.
- 84. Время 250ms 210ms 430ms Версия 15.0.2 0.14.8 0.13.3 * В моёмличном тесте, NODE_ENV=production React: SSR
- 85.
- 86. Другие решения ● Эмуляция (jsdom,PhantomJS)
- 87. Другие решения ● Эмуляция (jsdom,PhantomJS) ● Snapshots / Prerender.io
- 88. Другие решения ● Эмуляция (jsdom,PhantomJS) ● Snapshots / Prerender.io [SEO]
- 89.
- 90. Почему это несложно?
- 91. Почему это несложно? ● Vue.js — простой
- 92. Почему это несложно? ● Vue.js — простой ● Реактивность — не нужна
- 93. Почему это несложно? ● Vue.js — простой ● Реактивность — не нужна ● Кроссбраузерность — забудьте
- 94. Почему это несложно? ● Vue.js — простой ● Реактивность — не нужна ● Кроссбраузерность — забудьте ● Не всё писать с нуля
- 95. Рендерим. Как поступить сданными?
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103. import {renderer} from'vue-server'; const Vue = new renderer(); new Vue({ template: '<div>Hello world!</div>' })
- 104. import {renderer} from'vue-server'; const Vue = new renderer(); new Vue({ template: '<div>Hello world!</div>' }) .$on('vueServer.htmlReady', (html) => { res.send(html); // '<div>Hello world!</div>' });
- 105. import {compiler} from'vue-server'; export default { template: compiler('<div>.../div>') } Пре-компиляция шаблонов
- 106.
- 107. Время 430ms 250ms React@0.13.3 React@15.0.2 * В моёмличном тесте React vs VueServer
- 108. Время 430ms 250ms 150ms React@0.13.3 React@15.0.2 VueServer@0.4.8 * В моёмличном тесте React vs VueServer
- 109.
- 110.
- 111. Подходы ● Подхват (сохранение разметки) ● Замена(re-rendering)
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 123. import {renderer} from'vue-server'; const Vue = new renderer(); Vue.prototype.$isServer = true;
- 124.
- 125.
- 126.
- 127. VueServer: недостатки ● Версия 1.0.0-migration ● Своидирективы — нельзя
- 128. VueServer: недостатки ● Версия 1.0.0-migration ● Своидирективы — нельзя ● vue-router и другое — не поддерживается
- 129.
- 130. Vue 2.0 ● SSR «изкоробки»
- 131. Vue 2.0 ● SSR «изкоробки» ● API ещё проще (на ~90% совместимо с 1.x)
- 132. Vue 2.0 ● SSR «изкоробки» ● API ещё проще (на ~90% совместимо с 1.x) ● render ()
- 133. Спасибо за внимание! http://n1.ru/ http://vuejs.org/guide/ https://www.npmjs.com/package/vue-server/ https://www.npmjs.com/package/gulp-vue-compile/ АндрейСолодовников JS-разработчик «НГС Технологии» a.solodovnikov@office.ngs.ru