おはようございますこんにちはこんばんは！
最近Front-endのフレームワークが色々出て流行ってるらしくて、
友達となんかやってみよー！になってはじめました。
最初、どのフレームワークを使おうかと、
'react / vue が人気らしいー何が違う？'とざっと検索してみたら
- Vue
- テンプレート形式でアプリの制作したいなら
- 簡単で「一旦動作」ができるのが好きなら
- 早くて軽量のアプリが作りたいなら
- React
- 大きい規模のアプリを作るなら
- もっと大きい情報が欲しいなら
こんな差がありました。
簡単なプロジェクトだから、VueにしようーでVueを選びました。
（実は韓国で何もわからずVueの本を買ってきたので、、最初からvueにしようと決めたこともあり、、笑）
back-endはnode.jsのexpress フレームワークを使います(なんでもjsでやってみよう感)
やってみましょう^0^
node.js install
https://nodejs.org/
installします。ltsの方が安定的らしくてltsの方インストールしました。コマンドラインでインストる確認
$ node -v
バージョンが出力されたらokpackage.jsonでパッケージ管理
package.json生成$npm init
express 設置 node_modulesというフォルダが生成されます$npm install --save express
4.htmlファイルを置いておくpublic directoryをnode_modulesと一緒の段階に生成
生成$mkdir public
入る$cd public
index.htmlページ生成$vi index.html
<!DOCTYPEhtml><html><head><title>Vue.jsSample</title>
</head><body><divid="app"><h1>{{message}}</h1>
<input v-model='message'>
</div><!--vue.js読み込み--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script></body>
</html>v-modelを使ってinputとtextareaのエレメントに両方向のデーターバインディングの生成が出来ます。
javascriptのjqueryだと inputのvalueを持って、、それをh1に適用して、、みたいなことを
nue Vue ~~ だけで出来ます。
5.node.jsを実行するindex.jsを生成(node_modulesとpublicと一緒の段階)$cd ../$vi index.js
constexpress=require('express');constapp=express();constPORT=process.env.PORT=8000;//port8000に指定、変えてもokapp.use(express.static('public'));//app.listen(PORT,()=>{console.log('Server is running at:',PORT);});6.index.jsのところで実行$node index.js
Serverisrunningat: 8000表示されたら localhost:8000に接続すると
こういう画面が出て、下のinputに内容を変更するとHello Vue.js!の大文字が変更されます。
とても簡単!
vue.jsの解説なんかより、一応、、画面表示してみよう！になっちゃったんですが、(汗)
これで終わり！
参考
https://jp.vuejs.org/index.html
自分は韓国人なので、https://kr.vuejs.org/index.htmlこちら参照しました (笑)
https://joshua1988.github.io/web_dev/vue-or-react/韓国語です (汗)