Vue.jsに入門しようと思ったらとりあえず簡単にHelloWorldやってみたいですよね。やりましょう。超絶簡単に。

Vue.jsで簡単に色々なHelloWorld!

Vue.js のコアソースは<a href="https://jp.vuejs.org/v2/guide/installation.html" rel="noopener noreferrer" target="_blank">公式</a> より開発版をダウンロードして使用
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#%E3%83%99%E3%83%BC%E3%82%B7%E3%83%83%E3%82%AF%E3%81%AA-helloworld">ベーシックな HelloWorld</a></li>
<li><a href="#%E3%83%9C%E3%82%BF%E3%83%B3%E6%8A%BC%E4%B8%8B%E3%81%A7-helloworld">ボタン押下で HelloWorld</a></li>
<li><a href="#%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8B%E3%82%89%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6-helloworld">フォームから入力して HelloWorld</a></li>
<li><a href="#%E3%83%9C%E3%82%BF%E3%83%B3%E6%8A%BC%E4%B8%8B%E3%81%A7-helloworldv-show-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96">ボタン押下で HelloWorld（v-show ディレクティブ）</a></li>
<li><a href="#%E3%83%9C%E3%82%BF%E3%83%B3%E6%8A%BC%E4%B8%8B%E3%81%A7-helloworldv-if-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96">ボタン押下で HelloWorld（v-if ディレクティブ）</a></li>
</ol>
<h2 id="ベーシックな-helloworld">ベーシックな HelloWorld</h2>
<pre><code class="hljs language-html">&#x3C;!DOCTYPE html>
&#x3C;html lang="ja">
&#x3C;head>
 &#x3C;meta charset="UTF-8">
 &#x3C;title>Vue.js - Hello world&#x3C;/title>
&#x3C;/head>
&#x3C;body>

&#x3C;div id="app">
 {{ message }}
&#x3C;/div>

&#x3C;script src="./vue.js">&#x3C;/script>
&#x3C;script>
 new Vue({
 el: '#app',

 data () {
 return {
 message: 'Hello world!'
 }
 }
 })
&#x3C;/script>
&#x3C;/body>
&#x3C;/html>
</code></pre>
<dl>
<dt>HTML</dt>
<dd>
<ol>
<li>id 名「app 」を持つ DIV要素を作成する。</li>
<li>その中に、<a href="https://jp.vuejs.org/v2/guide/syntax.html#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88" target="_blank" rel="noopener">Mustache 構文</a>で message をセット</li>
</ol>
</dd>
<dt>JavaScript</dt>
<dd>
<ol>
<li>Vue.js のコアソースを読み込み</li>
<li>el プロパティで id 名を指定すると、「Vue.js で描画する対象を、id 名「app 」配下とする」という意味になる</li>
<li><a href="https://jp.vuejs.org/v2/api/#data" target="_blank" rel="noopener">データプロパティ</a>に message を定義</li>
</ol>
</dd>
</dl>
<h2 id="ボタン押下で-helloworld">ボタン押下で HelloWorld</h2>
<pre><code class="hljs language-html">&#x3C;div id="app">
 &#x3C;p>{{ message }}&#x3C;/p>
 &#x3C;button @click="display">メッセージを表示する&#x3C;/button>
&#x3C;/div>

&#x3C;script src="./vue.js">&#x3C;/script>
&#x3C;script>
 new Vue({
 el: '#app',

 data () {
 return {
 message: ''
 }
 },

 methods: {
 display: function () {
 this.message = 'Hello world!';
 }
 }
 })
&#x3C;/script>
</code></pre>
<dl>
<dt>HTML</dt>
<dd>
<ol>
<li>ボタンに <a href="https://jp.vuejs.org/v2/api/#v-on" target="_blank" rel="noopener">v-on</a> ディレクティブでクリックイベントを設定する</li>
</ol>
</dd>
<dt>JavaScript</dt>
<dd>
<ol>
<li><a href="https://jp.vuejs.org/v2/api/#methods" target="_blank" rel="noopener">methods</a> に、ボタン押下イベント発生時に実行する display メソッドを定義</li>
</ol>
</dd>
</dl>
<h2 id="フォームから入力して-helloworld">フォームから入力して HelloWorld</h2>
<pre><code class="hljs language-html">&#x3C;div id="app">
 &#x3C;p>{{ message | stripTag }}&#x3C;/p>
 &#x3C;input type="text" v-model="input">
 &#x3C;button @click="display">メッセージを表示する&#x3C;/button>
&#x3C;/div>

&#x3C;script src="./vue.js">&#x3C;/script>
&#x3C;script>
 new Vue({
 el: '#app',

 data () {
 return {
 message: '',
 input: 'Hello world!'
 }
 },

 filters: {
 stripTag: (value) => {
 return value.toString().replace(/&#x3C;("[^"]*"|'[^']*'|[^'">])*>/g,'')
 }
 },

 methods: {
 display: function () {
 this.message = this.input
 }
 }
 })
&#x3C;/script>
</code></pre>
<dl>
<dt>HTML</dt>
<dd>
<ol>
<li>Mustache 構文で message をセットする際に、パイプでフィルターをセットする事もできる</li>
<li>この例では、フィルターでタグを除去している</li>
<li>入力値を表示させる場合は XSS 攻撃の危険があるので非推奨</li>
</ol>
</dd>
</dl>
<h2 id="ボタン押下で-helloworldv-show-ディレクティブ">ボタン押下で HelloWorld（v-show ディレクティブ）</h2>
<pre><code class="hljs language-html">&#x3C;div id="app">
 &#x3C;p v-show="isShow">Hello world!&#x3C;/p>
 &#x3C;button @click="display">メッセージを表示する&#x3C;/button>
&#x3C;/div>

&#x3C;script src="./vue.js">&#x3C;/script>
&#x3C;script>
 new Vue({
 el: '#app',

 data () {
 return {
 isShow: false
 }
 },

 methods: {
 display: function () {
 this.isShow = true;
 }
 }
 })
&#x3C;/script>
</code></pre>
<dl>
<dt>HTML</dt>
<dd>
<ol>
<li><a href="https://jp.vuejs.org/v2/guide/conditional.html#v-show" target="_blank" rel="noopener">v-show</a> ディレクティブに isShow プロパティを指定する</li>
<li>v-show ディレクティブは必ず描画を行い、style である display:block/none で表示・非表示を制御する</li>
</ol>
</dd>
<dt>JavaScript</dt>
<dd>
<ol>
<li>ボタンを押下した際に methods プロパティの display が呼ばれ、isShow プロパティを true に切り替える</li>
</ol>
</dd>
</dl>
<h2 id="ボタン押下で-helloworldv-if-ディレクティブ">ボタン押下で HelloWorld（v-if ディレクティブ）</h2>
<pre><code class="hljs language-html">&#x3C;div id="app">
 &#x3C;p v-if="isShow">Hello world!&#x3C;/p>
 &#x3C;p v-else>メッセージはありません&#x3C;/p>
 &#x3C;button @click="toggleMessage">{{ buttonLabel }}&#x3C;/button>
&#x3C;/div>

&#x3C;script src="./vue.js">&#x3C;/script>
&#x3C;script>
 new Vue({
 el: '#app',

 data () {
 return {
 isShow: false
 }
 },

 computed: {
 buttonLabel () {
 return this.isShow ? 'メッセージを非表示にする' : 'メッセージを表示する'
 }
 },

 methods: {
 toggleMessage: function () {
 this.isShow = !this.isShow
 }
 }
 })
&#x3C;/script>
</code></pre>
<dl>
<dt>HTML</dt>
<dd>
<ol>
<li><a></a><a href="https://jp.vuejs.org/v2/guide/conditional.html#v-if" target="_blank" rel="noopener">v-if</a> ディレクティブに isShow プロパティを指定する</li>
<li>同時に <a href="https://jp.vuejs.org/v2/guide/conditional.html#v-else" target="_blank" rel="noopener">v-else</a> ディレクティブも設置する</li>
<li>よくある if-else と同じ意味を持っていて、この場合、isShow が true なら v-if ディレクティブが描画され、false なら v-else ディレクティブが描画される</li>
<li>これらは描画と破棄を繰り返す為、何度も表示の切り替えが必要なインタラクションの場合は v-show を使いましょう</li>
</ol>
</dd>
<dt>JavaScript</dt>
<dd>
<ol>
<li>ボタン押下でイベントが発火し toggleMessage() メソッドが呼ばれ、isShow プロパティの真偽値を反転させている</li>
<li>これによってメッセージの表示が切り替わる</li>
<li>同時に、<a href="https://jp.vuejs.org/v2/api/#computed" target="_blank" rel="noopener">computed</a>（算出プロパティ）の buttonLabel() メソッドが真偽値を評価し、ボタンのラベルを返している</li>
</ol>
</dd>
</dl>

Author