Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.jsとその未来 2.0 #wbkyoto

Vue.jsとその未来 2.0 #wbkyoto

#wbkyoto x #ng_kyoto 共催 WordBench京都10月 JS-FWでのスライドです。

potato4d(Takuma HANATANI)

October 09, 2016
Tweet

More Decks by potato4d(Takuma HANATANI)

Other Decks in Programming

Transcript

  1. ૒ํ޲όΠϯσΟϯά var demo = new Vue({ el: “#demo” data:{ message:

    “Hello Vue.js!” } }); JavaScript Code https://jp.vuejs.org
  2. ΧελϜίϯϙʔωϯτ <div id=“app”> <greeting name=“John”></greeting> </div> <script src=“/path/to/vue.min.js”></script> <script> var

    Greeting = new Vue.extend({ props: “name”, template: “<p>Hello, {{name}}.</p>” ); Vue.component(“greeting”, Greeting); new Vue({el: “#app”}); </script> index.html
  3. ΧελϜίϯϙʔωϯτ <div id=“app”> <greeting name=“John”></greeting> <greeting name=“Jack”></greeting> </div> <script src=“/path/to/vue.min.js”></script>

    <script> var Greeting = new Vue.extend({ props: “name”, template: “<p>Hello, {{name}}.</p>” ); Vue.component(“greeting”, Greeting); new Vue({el: “#app”}); </script> index.html
  4. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ $ npm install -D vue webpack vue-loader etc… const

    Vue = require(“vue”); const App = require(“./app.vue”); Vue.component(“comp-a”, require(“./components/comp-a.vue”); Vue.component(“comp-b”, require(“./components/comp-b.vue”); new Vue(App); On the terminal index.js
  5. VueRouter(with 1.x) router.map({ "/": { component: require(“./pages/index.vue”) }, “users/“ :{

    component: require(“./pages/users/index.vue”) }, “/users/:id”: { component: require(“./pages/users/detail.vue”) } });
  6. Server-Side Rendering(with 2.0) const Vue = require('vue'); const app =

    new Vue({ render: function (h) { return h('p', 'hello world'); }; }); const renderer = require('vue-server-renderer').createRenderer(); renderer.renderToString(app, (error, html) => { if (error) throw error; console.log(html); }); http://vuejs.org/guide/ssr.html