3DESU

えにぐまさん(@enigma63)が気ままに語るよ

vue.jsを使ってみた

イマドキ？なJavaScriptフレームワークを使ってみた。

vue.jsとは？

クライアント側でなんかぬるぬる処理ができるやつ・・・は個人のイメージなので、 詳細は素晴らしく分かりやすい以下の記事をご参考ください。 digitalidentity.co.jp

さわってみた

公式ガイドを見ながらやる jp.vuejs.org

環境を用意するのが面倒な場合は、公式ガイドの以下文言の「Hello World example」のリンクを別タブで開いてやってください。

Vue.js を試すには、Hello World example が最も簡単です。

f:id:gypsophilla63:20200522224445p:plain ①にガイドの <div〜/div>の内容をコピペ
②にガイドのvar 〜の内容をコピペ f:id:gypsophilla63:20200522224640p:plain ③左側のFile > Save で保存すると右の白いエリアに反映されます。 f:id:gypsophilla63:20200522225404p:plain ④右下のConsoleからJavaScriptの値の内容を変更できます。
app.message = 'test'と入力し、Enterを押すとHello Vue!がtestに変更されます。

以下は自分の環境(macOS)でやった手順です。

適当にフォルダつくる

$ mkdir vuetest
$ cd vuetest

宣言的レンダリング1

index.htmlを作る

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <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>

index.jsを作る

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

Webサーバを起動する

$ python -m SimpleHTTPServer 8000

index.htmlをブラウザ(Chrome)で見る

http://localhost:8000/

Hello Vue!が表示されたらOK

ChromeのF12でデベロッパーツールを起動して、Consoleに以下を入力

app.message = 'test'

Hello Vue!がtestに変更される

宣言的レンダリング2 (属性のバインディング）

index.htmlを編集する

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

 <div id="app">
   {{ message }}
 </div>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

 <script src="index.js"></script>
</body>
</html>

index.jsの編集

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

index.htmlをブラウザ(Chrome)で見る

http://localhost:8000/

ページ内のHover your mouse over me for a few seconds to see my dynamically bound title!にカーソルを合わせて数秒待つと、「You loaded this page on YYYY/MM/DD 〜」が表示される。

ChromeのF12でデベロッパーツールを起動して、Consoleに以下を入力

app2.message = 'some new message'

Hover your mouse over me for a few seconds to see my dynamically bound title!にカーソルを合わせて数秒待つと、「some new message」が表示される。

条件分岐とループ1

index.htmlを編集する

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

 <div id="app">
   {{ message }}
 </div>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

 <script src="index.js"></script>
</body>
</html>

index.jsの編集

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

index.htmlをブラウザ(Chrome)で見る

http://localhost:8000/

Now you see meが表示される。

ChromeのF12でデベロッパーツールを起動して、Consoleに以下を入力

app3.seen = false

Now you see meの表示が消える。

条件分岐とループ2

index.htmlを編集する

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

 <div id="app">
   {{ message }}
 </div>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

 <script src="index.js"></script>
</body>
</html>

index.jsの編集

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

index.htmlをブラウザ(Chrome)で見る

http://localhost:8000/

1.Learn JavaScript〜3.Build something awesomeが表示される。

ChromeのF12でデベロッパーツールを起動して、Consoleに以下を入力

app4.todos.push({ text: 'New item' })

4.New itemが新たに表示される

ユーザー入力の制御1

index.htmlを編集する

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

 <div id="app">
   {{ message }}
 </div>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

 <script src="index.js"></script>
</body>
</html>

index.jsの編集

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

index.htmlをブラウザ(Chrome)で見る

http://localhost:8000/

Reverse Messageのボタンを押すと、'Hello Vue.js!'が反転する

ユーザー入力の制御2

index.htmlを編集する

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

 <div id="app">
   {{ message }}
 </div>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

 <script src="index.js"></script>
</body>
</html>

index.jsの編集

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

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

index.htmlをブラウザ(Chrome)で見る

http://localhost:8000/

Hello Vue!のテキストボックスに文字列を入力すると、真上の文字が変化する