Vue.js勉強したメモ。
まずはVue.jsのサイトにあるガイドの「はじめに」をコピペでテスト。そこからちょっとずつ変更を加えていって学んだこと。バージョンはVue.js v2.3.3です。
学んだこと：
- 例の
{{ }}はMustache（ムスターシュ）記法と呼ぶ。 - MustacheはHTMLアトリビュート（属性）には使えない。
- ループ内からメソッド呼び出しは、わかってしまえば簡単。
- クラスの動的変更の便利な方法。
参考ページ：
- Vue.jsオフィシャルページ：はじめに
- Qiitaの記事：Vue.jsから手軽に始めるJavaScriptフレームワーク
コード（HTMLとJavaScript）
<div id="project-list">
active project: {{ active }}
<ul>
<li v-for="project in projects" v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
<a v-bind:href="'#' + project.id">{{ project.id }}. {{ project.name }}</a>
<button v-on:click="loadProject(project)"> → </button>
</li>
</ul>
</div>
let vm = new Vue({
el: '#project-list',
data: {
active_id: null,
projects: [
{ id: '1', name: 'private'},
{ id: '2', name: 'work'}
]
},
methods: {
loadProject: function(project) {
project.name = project.name + '!';
this.active_id = project.id;
}
}
});
属性を扱う場合はv-bindを使う
<a v-bind:href="'#' + project.id">
いわゆるHTMLの属性にムスターシュを書いても動かない。
属性を動的に変えたい場合はv-bindを使う。
例えばhref属性のリンクURLにproject.idを使う場合は、v-bindの後に、属性名（href）を入れて指定する。コメントの中はJavaScriptなので、普通の文字列を使う場合はクオートする（例：'#'）。
ループ変数をメソッド呼び出しに使うには
<li v-for="project in projects">
<button v-on:click="loadProject(project)">
...
methods: {
loadProject: function(project) {
project.name = project.name + '!';
this.active_id = project.id;
}
}
Vueモデルに定義したloadProjectメソッドを呼び出す際に、ループの変数を渡す方法。わかってしまえば当たり前で、メソッドの引数に入れれば動く。
内容は、プロジェクト名に「！」を追加する。そして選択されたことを示すために、this.active_id = project.idとしておく。
クラスの動的変更
<li v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
選択されたプロジェクトの表示を変更したい場合。クラスを動的に変更することで対応する。全てのプロジェクトにはproject-listというクラスが付与されている。
loadProjectを呼び出してプロジェクトを選択すると、Vueモデルのactiveプロパティにproject.idを設定する。ので、activeとproject.idを比較して、同じ場合はproject-activeクラスを付与すると簡単に対応できた。
Vue.jsから手軽に始めるJavaScriptフレームワークのコードをもとに作成してみた。
全ページ
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
ul {
margin: .3em 0 0 0;
padding: 0;
list-style: none;
}
.project-list:before {
margin: 0;
content: '＞';
color: gray;
}
.project-active {
font-weight:bold;
}
.project-active:before {
content: '＞';
color: red;
}
</style>
</head>
<body>
<h1>Tasks</h1>
<div id="project-list">
active project: {{ active }}
<ul>
<li v-for="project in projects" v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
<a v-bind:href="'#' + project.id">{{ project.id }}. {{ project.name }}</a>
<button v-on:click="loadProject(project)"> → </button>
</li>
</ul>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://unpkg.com/vue" crossorigin="anonymous"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#project-list',
data: {
active_id: null,
projects: [
{ id: '1', name: 'private'},
{ id: '2', name: 'work'}
]
},
methods: {
loadProject: function(project) {
project.name = project.name + '!';
this.active_id = project.id;
}
}
});
</script>
</body>
</html>