HTML5対応を謳っていてもいなくても、JavaScript用の上述の4つのどの有名フレームワークも、記法のまぎらわしさが、何も解決していない。
== Vue.jsの使い方 ==
まず、CDNにリンクしなくても使える。
公式サイトの [https://vuejs.org/v2/guide/installation.html このページ]から、vue.js をダウンロードできる。
使用するサーバーは、webサーバでありさえすれば、なんでもよく、Apacheで構わない。node.jsでなくてもいい。
ただし、商用などの厳しい用途で使うには、Apacheの場合はJavaScript実行環境がアクセスしてきたwebブラウザによって異なるので、もしかしたらnode.jsのほうがJavaScript実行環境をサーバ側にインストールされたnode.jsに統一できるので良いかもしれない。
本wikiでは、説明の単純化のため、Apache上にHTMLをアップロードすると仮定して説明する。
vue.js本体を公式サイトからwebブラウザで「ファイル」>「保存」する方法でタウンロードしてきて、ダウンロードしてきた「vue.js」をApacheのドキュメントルート(/var/www/html/ あたり) に入れておけば、あとはHTMLファイル中でsrcタグでリンクするだけで、vue.jsのテンプレートを使えるようになる。
ドキュメントルートなど公開フォルダにvue.jsを入れておかないと、webブラウザからApache上で公開されているHTMLファイルにアクセスしたときに、そのHTMLファイルがvue.jsを読み取れずにエラーになってしまう。
webブラウザからアクセスしたHTMlファイルを、ドキュメントルート中に保管してある vue.js にアクセスさせる場合、srcタグには
<code> http://localhost/vue.js </code>
のように、記述する。こうしないと、webブラウザで見たときに、アクセスできない。
; コード例
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<script src="http://localhost/vue.js"> </script>
</head>
<body>
<div id="app">
<p>{{ msg1 }}</p>
<p>{{ 13 + 5 }}</p>
</div>
<script>
let Obje1 = new Vue({
el: "#app",
data: {
msg1: "Hello world!"
}
});
</script>
</body>
</html>
</syntaxhighlight>
; 表示結果
<pre>
Hello world!
18
</pre>
コードで script タグが2箇所に分かれて記述されているのが読者には気持ち悪いかもしれないが、しかし、こういう順序で記述しないとエラー的な動作になる。
vue.js でテンプレートを表すには、ヒゲ括弧 <code><nowiki>{{ }} </nowiki></code> を使う。
vue,js界隈では、テンプレートのためにを使う書式のことを「マスタッシュ構文」というが、「マスタッシュ」とは、ちょびヒゲの事なので(ヒゲ括弧を横にすると、ちょびヒゲのように見える)、本wikiでは、簡単にヒゲ括弧とかヒゲ文とか呼ぶことにする。
new 宣言を使い、オブジェクトとして、「Vue」を作成する必要がある。他の名前だとエラーになる。
elプロパティやdataプロパティも、名前が決まっている。なお、特に断りなく「プロパティ」という用語を使ったが、vue.js界隈はelやdataを「プロパティ」に分類している。
; if文などのHTML埋め込み
vue.jsでは、HTMLタグに「v-if」という vue.js 専用のプロパティのようなものを付け加える方法により、HTMLに if 文を埋め込む。けっしてヒゲ括弧<code><nowiki>{{ }} </nowiki></code> を使うのではない。(Pythonなど他の言語のフレームワークだと、ヒゲ括弧にif文を記載する方式で埋め込むのもあるので、混同しないように。)
なお、これら v-ifで表示の条件による切り替えできる機能のことを v-if ディレクティブと呼ぶ。
; コード例
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<script src="http://localhost/vue.js"> </script>
</head>
<body>
<div id="app">
<p> if文テスト </p>
<p v-if="1 == 1"> aaaaa </p>
</div>
<script>
let Obje1 = new Vue({
el: "#app",
});
</script>
</body>
</html>
</syntaxhighlight>
; 表示結果
論理式 <code> 1==1 </code> は真なので、このpタグが有効になり、
aaaaa
と表示される。
; v-ifの論理式が偽の場合
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<script src="http://localhost/vue.js"> </script>
</head>
<body>
<div id="app">
<p> if文テスト </p>
<p v-if="1 == 3"> aaaaa </p>
</div>
<script>
let Obje1 = new Vue({
el: "#app",
});
</script>
</body>
</html>
</syntaxhighlight>
論理式 <code> 1==3 </code> は偽なので、このpタグは無効になり「aaaaa」は非表示になる。
; v-ifに変数を使う場合
下記のようにv-ifディレクティブに変数を使う場合、dataプロパティ 中のJSON形式で指定しないといけない。
JavaScript中の命令で代入しても、認識しない。
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<script src="http://localhost/vue.js"> </script>
</head>
<body>
<div id="app">
<p>{{ msg1 }}</p>
<p v-if="Flag"> aaaaa </p>
</div>
<script>
let Obje1 = new Vue({
el: "#app",
data: {
msg1: "Hello world!" ,
Flag: true,
}
});
// Flag = true; // これを書いても認識されず無効
</script>
</body>
</html>
</syntaxhighlight>
変数の値を変えたい場合は、変数の値をmethodsプロパティを使う方法がある。
|