BETA

【Sinatra】でVue.jsを触ってみる

投稿日:2019-09-18
最終更新:2019-09-18

SinatraでerbファイルにVue.jsを反映させてみます。
注意:筆者はVue.jsに触れたことがないので、悪しからず。

*参考
https://qiita.com/isihigameKoudai/items/6718237cd8a971442e2d

npmのンストール

npmのインストールを行ってください。
about:blank

erbファイルに導入

静的ファイルの挙動についてまとめたので、こちらを参考にしてください。
https://sunnydayservice.qrunch.io/entries/eLzQT2Uhox2yBSvp

app.erb

<html>  
    <head>  
        <meta charset="UTF-8">  
        <base href="/">  
        <title>sinatra1_study</title>  
        <link rel="stylesheet" href="/css/test.css" type="text/css" >  
        <script src="http://vuejs.org/js/vue.min.js"></script>  

    </head>  
    <body>  
        <p>{{message}}</p>  
        </div>  
        <script type="text/javascript" src="/js/test_vue.js"></script>  
    </body>  
</html>  

erbファイルでは、headタグに<script src="http://vuejs.org/js/vue.min.js"></script> を記述してVue.jsを呼び出します。
実際に記述している<script type="text/javascript" src="/js/test_vue.js"></script> のコードは、bodyタグの一番下で呼び出します。こうしないとtest_vue.js ファイルがbodyに記述されている内容より先に実行され、test.jsファイルの内容が反映されないようです。

次に、Vue.jsファイルです。

test_vue.js

var app = new Vue({  
    el: "#app",  
    data() {  
      return {  
        message: "Hello Vue.js"  
      }  
    }  
  });  

これでを起動すると、Hello Vue.js が出てきます。
さらに、ブラウザのf12 でコンソール画面を開き、app.message="Sinatra saiko!" とすると、ブラウザの更新をしなくても文字が変わります。

これでSinatraにVue.jsが導入出来ました!!

まとめ

次回の記事でもう少し詳しく解説します。
JQueryに比べるとVue.jsは便利でコードが見やすい書きやすい!!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

初学者の成長が垣間見れます

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!