├── .gitignore
├── src
├── view-model
│ ├── instantiation-options.md
│ └── instantiation-options
│ │ ├── id.md
│ │ ├── className.md
│ │ ├── attributes.md
│ │ ├── el.md
│ │ ├── tagName.md
│ │ ├── LifecycleHooks
│ │ ├── detached.md
│ │ ├── attached.md
│ │ ├── afterDestroy.md
│ │ ├── beforeDestroy.md
│ │ ├── ready.md
│ │ └── created.md
│ │ ├── methods.md
│ │ ├── replace.md
│ │ ├── data.md
│ │ ├── PrivateAssets.md
│ │ ├── LifecycleHooks.md
│ │ ├── template.md
│ │ ├── parent.md
│ │ ├── paramAttributes.md
│ │ └── computed.md
├── README.md
├── install.md
├── view-model.md
└── about-vuejs.md
├── README.md
├── Gruntfile.coffee
├── package.json
└── SUMMARY.md
/.gitignore:
--------------------------------------------------------------------------------
1 | _book
2 | node_modules/
3 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options.md:
--------------------------------------------------------------------------------
1 | # Instantiation Options
2 |
3 | ここではViewModelのインスタンス化する際に指定可能なオプションについて説明します。
4 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/id.md:
--------------------------------------------------------------------------------
1 | # id
2 |
3 | `$el`に設定されているDOM要素の`id`属性です。
4 |
5 |
6 | ```js
7 | vm = new Vue({
8 | id: "main",
9 | });
10 |
11 | console.log(vm.$el.id); // main
12 | ```
13 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/className.md:
--------------------------------------------------------------------------------
1 | # className
2 |
3 | `$el`に設定されているDOM要素の`className`属性です。
4 |
5 |
6 | ```js
7 | vm = new Vue({
8 | className: "item"
9 | });
10 |
11 | console.log(vm.$el.className); // item
12 | ```
13 |
--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
1 | # はじめに
2 |
3 | Vue.jsは[Evan You](http://evanyou.me/)氏によって開発されているMVVMのライブラリです。
4 |
5 | この本では公式ページのドキュメントをもとにVue.jsについての基本的な使い方を紹介していきたいと思います。
6 |
7 | すばらしいライブラリとドキュメントを作成してくれたEvan Youに感謝したいと思います。
8 |
9 | なお本書はVue.js v0.10.4のバージョンをもとに作成されています。
10 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/attributes.md:
--------------------------------------------------------------------------------
1 | # attributes
2 |
3 | `$el`に設定されているDOM要素の属性値です。
4 |
5 |
6 | ```js
7 | vm = new Vue({
8 | attributes: {
9 | width: "100",
10 | height: "200"
11 | }
12 | });
13 |
14 | console.log(vm.$el.getAttribute("width")); // 100
15 | console.log(vm.$el.getAttribute("height")); // 200
16 | ```
17 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/el.md:
--------------------------------------------------------------------------------
1 | # el
2 |
3 | ViewModelに紐付けたいDOM要素を`querySelector`の書式で指定しています。
4 |
5 | 指定したDOM要素は`vm.$el`のように`$el`でアクセスすることが出来ます。
6 |
7 | もしこのオプションが指定されていない場合は、DOM要素が新しく作成されます。
8 |
9 | (tagNameが指定されていればそのtagが、なければ`div`で作成されます)
10 |
11 |
12 | ```js
13 | vm = new Vue({
14 | el: "#main"
15 | });
16 | ```
17 | ```html
18 |
19 | ```
20 |
21 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/tagName.md:
--------------------------------------------------------------------------------
1 | # tagName
2 |
3 | `el`が指定されていなくて`replace`がfalseの場合に、`$el`として新しく作成されるDOM要素のtag名です。
4 |
5 | デフォルトでは`div`が指定されています。
6 |
7 | ```js
8 | vm = new Vue({
9 | tagName: "ul",
10 | template: "xxxx"
11 | });
12 |
13 | document.body.appendChild(vm.$el);
14 |
15 | console.log(document.body.innerHTML);
16 | //
17 | ```
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/install.md:
--------------------------------------------------------------------------------
1 | # インストール
2 |
3 | Vue.jsではIE8はサポートしてないのでIE8のサポートが必要な場合は使用することが出来ません。
4 |
5 | ## そのまま使用する場合
6 |
7 | 公式サイトからダウンロードしたファイルをそのままscriptタグで読み込むと、*Vue*というグローバル変数がexportされます。
8 |
9 | また、[cdnjs](http://cdnjs.com/)にもホスティングされていますし、[bower](http://bower.io/)を使用することも出来ます。
10 |
11 | ## モジュールビルドライブラリを使用する場合
12 |
13 | Vue.jsがビルドで使用している[component](http://component.io/)や[browserify](http://browserify.org/)を使って`require`で読み込む方法もサポートされています。
14 |
15 | ```javascript
16 | var Vue = require('vue');
17 | ```
18 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/LifecycleHooks/detached.md:
--------------------------------------------------------------------------------
1 | # detached
2 |
3 | `vm.$el`がdirectiveや`vm.$appendTo()`によってDOMツリーから削除された時に呼ばれます。
4 |
5 | `vm.$el`を直接操作して削除された場合はこのフックは呼ばれません。
6 |
7 | ```js
8 |
9 | //
10 |
11 | vm = new Vue({
12 | el: "#main",
13 | template: "{{name}}",
14 | data: {
15 | name: "1st"
16 | },
17 | detached: function() {
18 | console.log("detached");
19 | console.log(document.body.innerHTML); // ""
20 | }
21 | });
22 |
23 | vm.$remove();
24 | ```
25 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/LifecycleHooks/attached.md:
--------------------------------------------------------------------------------
1 | # attached
2 |
3 | `vm.$el`がdirectiveや`vm.$appendTo()`によってDOMツリーに追加された時に呼ばれます。
4 |
5 | `vm.$el`を直接操作して追加された場合はこのフックは呼ばれません。
6 |
7 | ```js
8 |
9 | //
10 |
11 | vm = new Vue({
12 | template: "{{name}}",
13 | data: {
14 | name: "1st"
15 | },
16 | attached: function() {
17 | console.log("attached");
18 | console.log(document.body.innerHTML); //
19 | }
20 | });
21 |
22 | vm.$appendTo("#main");
23 | ```
24 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/methods.md:
--------------------------------------------------------------------------------
1 | # methods
2 |
3 | ViewModelのメソッドを定義するところです。
4 |
5 | ViewModelの`data`にはJSONでシリアライズ可能なデータが格納されるため、メソッドはこちらに定義します。
6 |
7 | ここで定義したメソッドはtemplateの中からも呼ぶことが出来て、コンテキストはViewModelのインスタンスになります。
8 |
9 | ```javascript
10 | vm = new Vue({
11 | data: {
12 | name: "bob"
13 | },
14 | methods: {
15 | notify: function(message) {
16 | alert(message + " by " + this.name);
17 | }
18 | }
19 | });
20 |
21 | vm.notify("hello");
22 | ```
23 | ```html
24 | click
25 | ```
26 |
27 |
--------------------------------------------------------------------------------
/src/view-model.md:
--------------------------------------------------------------------------------
1 | # ViewModel
2 |
3 | ViewModelはVueのコンストラクタから作成することが出来ます。
4 |
5 | ```javascript
6 | vm = new Vue({
7 | data: {
8 | name: "foo",
9 | }
10 | });
11 | ```
12 |
13 | ## View
14 |
15 | `vm.$el`で参照することが出来るDOMオブジェクトがViewを担っています。
16 |
17 | データが変更された場合は非同期でViewに反映されるためパフォーマンスにも優れています。
18 |
19 | * requestAnimationFrame(webkitRequestAnimationFrame)が利用できる環境ではそれを使用し、使用できない環境ではsetTimeoutを0msでの呼び出しを使用します。
20 |
21 | `$el`を使ってDOM操作することはあまりなくて、そういった場合はDirectiveやFilterを使うといいでしょう。
22 |
23 | ## Model
24 |
25 | データ自体はただのJavaScriptのオブジェクトであり、Object.definePropertyを使って変更や参照を監視していることが特徴です。
26 |
27 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/LifecycleHooks/afterDestroy.md:
--------------------------------------------------------------------------------
1 | # afterDestory
2 |
3 | ViewModelが完全に破棄された後に呼ばれます。
4 |
5 | このフックが呼ばれた時は、すでに全てのデータバインディングや子のViewModelが破棄されています。
6 |
7 | ```js
8 |
9 | //
10 |
11 | vm = new Vue({
12 | el: "#main",
13 | template: "{{name}}",
14 | data: {
15 | name: "destroy"
16 | },
17 | afterDestroy: function() {
18 | console.log("afterDestroy");
19 | console.log(this.name); // destroy
20 | console.log(document.body.innerHTML);
21 | //
22 | }
23 | });
24 |
25 | vm.$destroy();
26 | ```
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DEPRECATED
2 |
3 | Vue.js has already a great documentation that have been translated into Japanese.
4 |
5 | I recommend to read that!
6 |
7 | http://jp.vuejs.org/
8 |
9 | # vue.js book[WIP]
10 |
11 | This book is vue.js guide book.
12 |
13 | (work in progress)
14 |
15 |
16 | # writing
17 |
18 | ```
19 | % npm install -g gitbook
20 | % gitbook serve
21 |
22 | Starting build ...
23 | Successfuly built !
24 |
25 | Starting server ...
26 | Serving book on http://localhost:4000
27 | ```
28 |
29 | # publish to gh-pages
30 |
31 | ```
32 | % npm install -g grunt-cli
33 | % npm install
34 | % grunt publish
35 | ```
36 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/replace.md:
--------------------------------------------------------------------------------
1 | # replace
2 |
3 | template文字列で`el`で指定している要素自体を置き換えるかどうか指定します。
4 |
5 | この要素が有効なのは、`el`に親要素があって、templateのroot要素となる要素が1つだけの場合です。
6 | また、`el`で指定されていた属性値はそのままtemplateのroot要素にコピーされます。
7 |
8 | ```html
9 |
10 | ```
11 | ```js
12 | vm = new Vue({
13 | el: "#main",
14 | replace: true,
15 | template: '',
16 | data: {
17 | name: "koba04"
18 | }
19 | });
20 |
21 | console.log(document.body.innerHTML);
22 | //
23 | ```
24 | http://jsfiddle.net/koba04/6aQWL/
25 |
26 |
--------------------------------------------------------------------------------
/Gruntfile.coffee:
--------------------------------------------------------------------------------
1 | module.exports = (grunt) ->
2 |
3 | grunt.loadNpmTasks 'grunt-gitbook'
4 | grunt.loadNpmTasks 'grunt-gh-pages'
5 | grunt.loadNpmTasks 'grunt-contrib-clean'
6 |
7 | grunt.initConfig
8 | gitbook:
9 | development:
10 | input: "./"
11 | title: "vue.js book",
12 | description: "This book is vue.js guide book.",
13 | github: "koba04/vuejs-book"
14 | 'gh-pages':
15 | options:
16 | base: '_book'
17 | src: ['**']
18 | clean:
19 | files: '.grunt'
20 |
21 | grunt.registerTask 'publish', [
22 | # 'gitbook'
23 | 'gh-pages'
24 | 'clean'
25 | ]
26 |
27 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/data.md:
--------------------------------------------------------------------------------
1 | # data
2 |
3 | `data`はViewModelが保持するデータで、ViewModelの作成時にオプションとして渡すことが出来ます。ViewModelのインスタンスからは`vm.$data`として参照することが出来ます。
4 |
5 | また、`vm.$data`の値はvmにプロキシされていて、例えば`vm.$data.name`は`vm.name`として参照することも出来ます。
6 |
7 | ```javascript
8 | vm = new Vue({
9 | data: {
10 | name: "bob"
11 | }
12 | });
13 |
14 | console.log(vm.$data.name); // bob
15 | console.log(vm.name); // bob
16 |
17 | vm.name = "jim";
18 |
19 | console.log(vm.$data.name); // jim
20 | console.log(vm.name); // jim
21 | ```
22 |
23 | dataの値はJSONとして表現できる形式である必要があります。
24 |
25 | dataの値は他のViewModelと共有して使用することも可能ですので、APIのレスポンスをdataとして、複数のViewModelで共有するといった使い方も出来ます。
26 |
27 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuejs-book",
3 | "version": "0.1.0",
4 | "description": "This book is vue.js guide book.",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/koba04/vuejs-book"
12 | },
13 | "keywords": [
14 | "vue.js",
15 | "book"
16 | ],
17 | "author": "koba04",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/koba04/vuejs-book/issues"
21 | },
22 | "devDependencies": {
23 | "grunt": "~0.4.4",
24 | "grunt-contrib-clean": "~0.5.0",
25 | "grunt-gitbook": "~0.4.2",
26 | "grunt-gh-pages": "~0.9.1"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/LifecycleHooks/beforeDestroy.md:
--------------------------------------------------------------------------------
1 | # beforeDestory
2 |
3 | ViewModelが破棄(`destroy`)される前に呼ばれます。
4 |
5 | この段階ではデータバインディングなどは全てまだ有効で、子のViewModelもまだ有効です。
6 |
7 | このフックは内部的に使われることがほとんどですが、createdやreadyで行った準備に対するクリーンアップ処理として使うことはあるかもしれません。
8 |
9 | `$on`や`$watch`などの解除は`$destroy`の処理の中で行われるので明示的に行う必要はありません。
10 |
11 |
12 | ```js
13 |
14 | //
15 |
16 | vm = new Vue({
17 | el: "#main",
18 | template: "{{name}}",
19 | data: {
20 | name: "destroy"
21 | },
22 | beforeDestroy: function() {
23 | console.log("beforeDestroy");
24 | console.log(this.name); // destroy
25 | console.log(document.body.innerHTML);
26 | //
27 | }
28 | });
29 |
30 | vm.$destroy();
31 | ```
32 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/PrivateAssets.md:
--------------------------------------------------------------------------------
1 | # Private Assets
2 |
3 | ViewModelをインスタンス化する際に指定することで、指定したViewModelと子のViewModelだけでのみ有効な`directives`や`filter`、`components`などを作成することが出来ます。
4 |
5 | 作成出来るのは下記の通りです。
6 |
7 | * directives
8 | * filters
9 | * components
10 | * partials
11 | * transitions
12 |
13 |
14 | ```js
15 | vm = new Vue({
16 | el: "#main",
17 | template: '{{name}} ',
18 | data: {
19 | name: "assets",
20 | tax: 1.05,
21 | list: [100, 1000, 10000]
22 | },
23 | filters: {
24 | addTax: function(val) {
25 | return +val * this.$get("tax");
26 | }
27 | },
28 | components: {
29 | banner: Vue.extend({
30 | template: "this is banner"
31 | })
32 | }
33 | });
34 |
35 | //
36 | // - 105
37 | // - 1050
38 | // - 10500
39 | //
40 | // this is banner
41 | ```
42 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/LifecycleHooks.md:
--------------------------------------------------------------------------------
1 | # Lifecycle Hooks
2 |
3 | ViewModelのライフサイクルに応じて、`created`、`ready`、`attached`、`detached`、`beforeDestroy`、`afterDestroy`といったイベントが発行されます。
4 |
5 | イベントは`hook:attached`のように`hook:eventName`という形式で発行されます。
6 |
7 | また、ViewModelをインスタンスする際に`created`、`ready`、`attached`、`detached`、`beforeDestroy`、`afterDestroy`にメソッドを指定することも出来ます。
8 |
9 | その際の`this`のコンテキストはViewModelのインスタンスになります。
10 |
11 |
12 | ```js
13 | vm = new Vue({
14 | data: {
15 | name: "hook"
16 | },
17 | created: function() {
18 | this.$on("hook:created", function() {
19 | console.log("created event by " + this.name)
20 | });
21 | this.$on("hook:ready", function() {
22 | console.log("ready event by " + this.name)
23 | });
24 | },
25 | ready: function() {
26 | console.log("ready function by " + this.name);
27 | }
28 | });
29 |
30 | // created event by hook
31 | // ready function by hook
32 | // ready event by hook
33 | ```
34 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/LifecycleHooks/ready.md:
--------------------------------------------------------------------------------
1 | # ready
2 |
3 | ViewModelのコンパイルが完了し、データバインディングが開始された状態で呼ばれます。
4 |
5 | `ready`の中で`$data`の値を変更するとViewに反映されますが、プロパティを追加した場合は無視されます。追加したい場合は`created`の中で追加しておくか`data`に初期値を設定しておく必要があります。
6 |
7 |
8 | ```js
9 |
10 | //
11 |
12 | vm = new Vue({
13 | el: "#main",
14 | template: "{{name}}",
15 | data: {
16 | name: "1st",
17 | like: ""
18 | },
19 | ready: function() {
20 | this.name = "2nd";
21 | this.age = 10;
22 | this.like = "music";
23 |
24 | console.log(this.$data.name); // 2nd
25 | console.log(this.$data.age); // undefined
26 | console.log(this.$data.like); // music
27 |
28 | this.$watch('name', function(newName) {
29 | // changed name 3rd
30 | console.log("changed name " + newName)
31 | });
32 | }
33 | });
34 |
35 | Vue.nextTick(function() {
36 | vm.name = "3rd";
37 | });
38 |
39 | // 3st
40 | ```
41 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/LifecycleHooks/created.md:
--------------------------------------------------------------------------------
1 | # created
2 |
3 | ViewModelのコンパイルが開始する前に同期的に呼ばれます。
4 |
5 | コンパイル開始前ですので、`$el`や`$data`は有効ですがDOMはまだ準備出来ておらずデータバインディングはまだ有効ではありません。
6 |
7 | (つまり`created`の中で`$data`の値を更新してもDOMには反映されません。)
8 |
9 | `created`はViewModelの初期状態に何か追加したい場合に使われ、関数ではないプロパティをセットすると、後ほど`$data`にコピーされてデータバインディングの対象となります。
10 |
11 | `created`の中で`$watch`を使うとデータバインディングが開始されたタイミングでも呼ばれます。変更されたときだけ呼ばれて欲しい場合は後述の`ready`の中で`$watch`を設定してください。
12 |
13 |
14 | ```js
15 | //
16 |
17 | vm = new Vue({
18 | el: "#main",
19 | template: "{{name}}",
20 | data: {
21 | name: "1st"
22 | },
23 | created: function() {
24 | this.$data.name = "2nd";
25 | this.sum = function (a, b) { return a + b; };
26 | this.age = 10;
27 | this.$watch('name', function(newName) {
28 | // changed name 1st
29 | // changed name 3rd
30 | console.log("changed name " + newName)
31 | });
32 | }
33 | });
34 |
35 | Vue.nextTick(function() {
36 | vm.name = "3rd";
37 | });
38 |
39 | console.log(vm.$data.age); // 10
40 | console.log(vm.$data.sum); // undefined
41 |
42 | // 1st
43 | ```
44 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/template.md:
--------------------------------------------------------------------------------
1 | # template
2 |
3 | `vm.$el`に挿入されるtemplateを文字列で指定します。`vm.$el`の中に存在していた要素は全てここで指定したtemplate文字列によって置き換えられます。
4 |
5 | **replace**のoptionが`true`に指定されている場合は、`el`の中に挿入されるのではなく`el`を上書きします。
6 | (詳しくは**replace**を参照してください)
7 |
8 | `#`ではじまる文字列をtemplateに指定した場合は`querySelector`として評価され、取得した要素の`innerHTML`が使用されます。
9 |
10 | これは`
26 | ```
27 |
28 | ## Vue.jsのtemplate
29 |
30 | Vue.jsはDOMベースのtemplateを使用します。
31 |
32 | そして、Vue.jsのcompilerはDOM要素を走査してdirectivesを探しながらデータバインディングを作成しています。
33 |
34 | これが何を意味しているのかというと、templateは実際にDOMに変換可能な文字列である必要があるということです。
35 |
36 | Vue.jsはDOM fragmentにtemplateを入れておいて、ViewModelのインスタンスを再生するときにそれをcloneして使用します。
37 |
38 | また、もしあなたがvalidなHTMLであることを求めるのであれば、direcitveのprefixを`data-`に変更することが出来ます。
39 |
40 | ```js
41 | Vue.config({
42 | prefix: "data"
43 | });
44 | ```
45 |
46 |
47 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/parent.md:
--------------------------------------------------------------------------------
1 | # parent
2 |
3 | 親のViewModelを指定します。
4 |
5 | ViewModel間の親子関係を指定することで、`v-components`と同じように下記のようなメリットがあります。
6 |
7 | 1. 子のViewModelが親のViewModelのデータをテンプレート内で参照することが出来ます。
8 | 1. 子のViewModelから親のViewModelを`this.$parent`として参照することが出来ます。
9 | 1. 子のViewModelと親のViewModel間で`$dispatch`や`$broadcast`といったメソッドでイベントのやりとりが出来ます。
10 | 1. 親のViewModelが破棄されたときに子のViewModelも破棄されます。
11 |
12 | このオプションはネストしたViewModelのメモリ管理をより上手く行うために、自らライフサイクルを管理したいような場合に便利です。
13 |
14 | ```js
15 | var parent = new Vue({
16 | el: "#parent",
17 | template:"{{scope}}", // parent
18 | afterDestroy: function() {
19 | console.log("parent destroy");
20 | },
21 | data: {
22 | scope: "parent"
23 | }
24 | });
25 |
26 | var child = new Vue({
27 | el: "#child",
28 | template:"{{scope}}/{{name}}", // parent/child
29 | parent: parent,
30 | afterDestroy: function() {
31 | console.log("child destroy");
32 | },
33 | data: {
34 | name: "child"
35 | }
36 | });
37 |
38 | console.log(child.$parent.scope); // parent
39 |
40 | parent.$destroy();
41 | // child destroy
42 | // parent destroy
43 | ```
44 |
45 |
--------------------------------------------------------------------------------
/src/view-model/instantiation-options/paramAttributes.md:
--------------------------------------------------------------------------------
1 | # paramAttributes
2 |
3 | ViewModelの初期値として設定したいDOMの属性名を配列で指定します。
4 |
5 | HTMLの属性としてViewModelにセットしたい値を指定し、ViewModelの側では`paramAttribute`として指定することで`data`の初期値として設定されます。
6 |
7 | ```html
8 |
9 | ```
10 | ```js
11 | new Vue({
12 | el: '#test',
13 | paramAttributes: ['size', 'message'],
14 | created: function () {
15 | console.log(this.size) // 100
16 | console.log(this.message) // 'hello!'
17 | console.log(this.$data.message) // 'hello!'
18 | }
19 | })
20 | ```
21 |
22 | ただし、この値は初期値として使用されるだけですので、ViewModelの側で値を変更したりDOMの属性値を変更しても値が同期されることはありません。
23 |
24 | ```js
25 | new Vue({
26 | el: '#test',
27 | paramAttributes: ['size'],
28 | ready: function() {
29 | this.$el.setAttribute("size", 400);
30 | var that = this;
31 | Vue.nextTick(function() {
32 | console.log(that.size); // 100
33 | console.log(that.$el.getAttribute("size")); // 400
34 | });
35 | },
36 | })
37 | ```
38 |
39 | ## 想定される用途
40 |
41 | サーバーサイドでtemplateを描画するようなアプリケーションにおいて、ViewModelの初期値を渡したいときに`paramAttributes`を用いて設定するといった使用方法が考えられます。
42 |
43 |
--------------------------------------------------------------------------------
/src/about-vuejs.md:
--------------------------------------------------------------------------------
1 | # Vue.jsとは
2 |
3 | Angular.jsやKnockout.jsといったフレームワークからの影響を受けているライブラリですが、Angular.jsと比較するとViewModelにフォーカスしたライブラリになっており、DOM操作については別途DirectivesやFiltersといった仕組みが用意されています。他のライブラリと組み合わせることも可能です。
4 |
5 | Directivesを見てみるとAngular.jsから移植したようなものも多いのですが、シンプルであることが重視されていて必要最低限の実装のみがあって見通しがよいのも特徴であると言えます。
6 |
7 | ## Vue.jsの特徴
8 |
9 | 公式ページではVue.jsの特徴として*Simple*、*Fast*、*Composable*、*Compact*、*Powerful*、*Module Friendly*が挙げられています。
10 |
11 | ### Simple
12 |
13 | HTMLとdataとなるJSONをもとにViewModelを作成するだけで動作します。
14 |
15 | ### Fast
16 |
17 | DOMへの反映は非同期でバッチとしてまとめて実行されるため、他のフレームワークと比較しても高速です。
18 |
19 | ### Composable
20 |
21 | ViewModelをComponentとして再利用性があるものとして定義することが出来ます。
22 |
23 | ### Compact
24 |
25 | 他のライブラリへの依存もなく、minifyとgzippedすると約13kbとコンパクトです。
26 |
27 | ### Powerful
28 |
29 | HTMLに書く評価式やComputed Propertiesは、自動的に依存している変数を発見し値を追跡してくれます。
30 |
31 | ### Module Friendly
32 |
33 | ComponentやBrowserify，Bowerなど好みのモジュール管理の仕組みを使うことが出来ます。
34 |
35 |
36 | ## Hello Vue.js
37 |
38 | ```html
39 |
40 |
{{message}}
41 |
42 |
84 |
85 |
86 |
87 |
{{status}}
88 |