0

More than 1 year has passed since last update.

@YumaInaura(稲浦悠馬)

#vue.js のチュートリアルを Codepen でやる ( Hello World ) ( 初心者向け )

Vue.js

Last updated at 2022-08-21Posted at 2019-04-03

Tutorial

Introduction — Vue.js

Codepen

Vue.js Playground

HTML

{{ message }} という部分が vue.js の記法で、残りの部分はHTML。

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
          {{ message }}
        </div>
            
        <script src="index.js"></script>
    </body>
</html>

Js

id="app" の message というデータは Hello Vue! ですよという定義をしている。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter

0

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

0