vue.jsはnode.jsとセットのイメージがあるけど、jqueryみたいにscriptタグで読み込んで、HTMLファイル単体でも使える。

vue.jsはnode.jsとセットのイメージがあるけど、jqueryみたいにscriptタグで読み込んで、HTMLファイル単体でも使える。
※node.jsのパッケージが使えた方が色々出来るので、普通は組み合わせて使う。

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    <meta http-equiv="Content-Type" content="text/html"/>

	<!-- ボタンの色を切り替え -->
    <style>
      .btn-toggle {
        background-color: #ff00ff;
      }
      .btn-toggle.is-active {
        background-color: #00ff00;
      }
    </style>

  </head>

  <body>
	<!-- Vueインスタンスは、このdivタグ以下 -->
    <div id="app">
	  <!-- if-else文で表示の切り替え -->
      <h1 v-if="num >= 1">１以上</h1>
      <h2 v-else-if="num == 0">ゼロです</h2>
      <h3 v-else>たぶんマイナス？</h3>

	  <!-- v-for文でforeach処理 -->
      <ul>
        <li v-for="todo in todos" v-if="todo.id > 1">
          <p >{{todo.id}} {{todo.text}}</p>
        </li>
      </ul>

	  <!-- v-modelで双方向バインディング(入力される度に自動的に同期) -->
      <input v-model="message" type="text" />
	  <!-- v-modelで双方向バインディング(入力される度に自動的に同期) -->
      <p>{{message}}</p>

	  <!-- ボタンをクリックしたらCSSで色が変わる -->
      <input 
        type="button" 
        value="BUTTON"
        class="btn-toggle"
        @click="tapButton()"
        :class="{'is-active': toggleFlag}"
      />
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
	// Vueインスタンスを生成
    var app = new Vue({
	  // 生成する場所を指定
      el: "#app",
　	  // メソッドも指定できる
      methods: {
        tapButton() {
          this.toggleFlag = !this.toggleFlag;
        }
      },
	　// Vueインスタンスのメンバー変数
      data() {
        return {

          toggleFlag: false, // ボタンの色切り替えフラグ
          num: -10, // if-else文で表示の切り替え
          message: "Hello Vue.js", //v-modelで双方向バインディング(入力される度に自動的に同期)
		  // 配列も使える
          todos: [
            {id:1, text:"油そばを食べる"},
            {id:2, text:"家の掃除をする"},
            {id:3, text:"食料を買って帰る"}
          ]
        }
      }
    });
  </script>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.btn-toggle {

background-color: #ff00ff;

}

.btn-toggle.is-active {

background-color: #00ff00;

}

</style>

</head>

<body>

<h3 v-else>たぶんマイナス？</h3>

<ul>

</li>

</ul>

<p>{{message}}</p>

<input

type="button"

value="BUTTON"

class="btn-toggle"

@click="tapButton()"

:class="{'is-active': toggleFlag}"

</div>

</body>

// Vueインスタンスを生成

var app = new Vue({

// 生成する場所を指定

el: "#app",

　 // メソッドも指定できる

methods: {

tapButton() {

this.toggleFlag = !this.toggleFlag;

}

　// Vueインスタンスのメンバー変数

data() {

return {

toggleFlag: false, // ボタンの色切り替えフラグ

num: -10, // if-else文で表示の切り替え

message: "Hello Vue.js", //v-modelで双方向バインディング(入力される度に自動的に同期)

// 配列も使える

todos: [

{id:1, text:"油そばを食べる"},

{id:2, text:"家の掃除をする"},

{id:3, text:"食料を買って帰る"}

]

}

});

</script>

</html>

関連記事