非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Vue.jsの基本

   

Vue.jsの基本形について書き留めておきます。

広告

完成形

こちらが完成形です。「change」ボタンを押すと「Hello World !」という文字が「Hello Vue.js !」に変わるようになります。

 

ソースコード

ソースコードは以下のとおりです。

<!DOCTYPE html>
<html lang="jp">
<head>
  <title>Vue Test #1</title>
</head>
<body>
<h1>Vue Test #1</h1>
<div id="app">
  Hello {{ message }} !
  <button @click="update">change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'World'
    },
    methods: {
      update() {
        this.message = 'Vue.js'
      }
    }
 })
</script>
</body>
</html>
  

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Vue.js