Главная Обзор Помощь
Регистрация Вход
vuejs
/
vue
зеркало из https://github.com/vuejs/vue.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

simplify functional test fixtures

Evan You 12 лет назад
Родитель
77ffd53b6b
Сommit
75d200cc3b
17 измененных файлов с 838 добавлено и 972 удалено
Разделённый вид Показать статистику Diff
  1. 43 51
      test/functional/fixtures/component.html
  2. 33 41
      test/functional/fixtures/computed-repeat.html
  3. 63 71
      test/functional/fixtures/expression.html
  4. 70 78
      test/functional/fixtures/extend.html
  5. 49 58
      test/functional/fixtures/forms.html
  6. 68 76
      test/functional/fixtures/nested-props.html
  7. 28 36
      test/functional/fixtures/nested-repeat.html
  8. 58 65
      test/functional/fixtures/nested-vms.html
  9. 23 31
      test/functional/fixtures/repeated-exp.html
  10. 73 81
      test/functional/fixtures/repeated-items.html
  11. 37 45
      test/functional/fixtures/repeated-vms.html
  12. 24 32
      test/functional/fixtures/routing.html
  13. 45 53
      test/functional/fixtures/share-data.html
  14. 23 31
      test/functional/fixtures/simple-dir.html
  15. 54 62
      test/functional/fixtures/template.html
  16. 86 93
      test/functional/fixtures/transition.html
  17. 61 68
      test/functional/fixtures/validation.html

+ 43 - 51
test/functional/fixtures/component.html
Просмотреть файл 

@@ -1,51 +1,43 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>Component</title>
 
-        <meta charset="utf-8">
 
-    </head>
 
-    <body>
 
-        <div id="test">
 
-            <!-- v-component + v-with -->
 
-            <div id="component-and-with" v-component="avatar" v-with="user"></div>
 
-
 
-            <!-- custom element + v-with -->
 
-            <avatar id="element-and-with" v-with="user"></avatar>
 
-
 
-            <!-- v-with alone -->
 
-            <div id="with" v-with="user">{{hi}} {{name}}</div>
 
-
 
-            <!-- v-component alone -->
 
-            <div id="component" v-component="simple"></div>
 
-
 
-            <!-- custom element alone -->
 
-            <simple id="element"></simple>
 
-        </div>
 
-        <script src="../../../dist/vue.js"></script>
 
-        <script>
 
-
 
-            Vue.config({debug: true})
 
-
 
-            Vue.component('avatar', {
 
-                template: '{{hi}} {{name}}',
 
-                ready: function () {
 
-                    console.log(JSON.stringify(this))
 
-                }
 
-            })
 
-
 
-            Vue.component('simple', {
 
-                template: '{{hi}} {{user.name}}'
 
-            })
 
-
 
-            var app = new Vue({
 
-                el: '#test',
 
-                data: {
 
-                    hi: '123',
 
-                    user: {
 
-                        name: 'Jack'
 
-                    }
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+<div id="test">
 
+    <!-- v-component + v-with -->
 
+    <div id="component-and-with" v-component="avatar" v-with="user"></div>
 
+
 
+    <!-- custom element + v-with -->
 
+    <avatar id="element-and-with" v-with="user"></avatar>
 
+
 
+    <!-- v-with alone -->
 
+    <div id="with" v-with="user">{{hi}} {{name}}</div>
 
+
 
+    <!-- v-component alone -->
 
+    <div id="component" v-component="simple"></div>
 
+
 
+    <!-- custom element alone -->
 
+    <simple id="element"></simple>
 
+</div>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+
 
+    Vue.config({debug: true})
 
+
 
+    Vue.component('avatar', {
 
+        template: '{{hi}} {{name}}',
 
+        ready: function () {
 
+            console.log(JSON.stringify(this))
 
+        }
 
+    })
 
+
 
+    Vue.component('simple', {
 
+        template: '{{hi}} {{user.name}}'
 
+    })
 
+
 
+    var app = new Vue({
 
+        el: '#test',
 
+        data: {
 
+            hi: '123',
 
+            user: {
 
+                name: 'Jack'
 
+            }
 
+        }
 
+    })
 
+</script>

+ 33 - 41
test/functional/fixtures/computed-repeat.html
Просмотреть файл 

@@ -1,41 +1,33 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>Repeated form elements</title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <form id="form">
 
-            <p v-repeat="items">
 
-                <input type="text" name="text{{$index}}" v-model="text">
 
-            </p>
 
-            <button v-on="click: add" id="add">Add</button>
 
-            <p id="texts">{{texts}}</p>
 
-        </form>
 
-        <script>
 
-            var app = new Vue({
 
-                el: '#form',
 
-                data: {
 
-                    items: [
 
-                        { text: "a" },
 
-                        { text: "b" }
 
-                    ]
 
-                },
 
-                methods: {
 
-                    add: function(e) {
 
-                        this.items.push({ text: "c" })
 
-                        e.preventDefault()
 
-                    }
 
-                },
 
-                computed: {
 
-                    texts: function () {
 
-                        return this.items.map(function(item) {
 
-                            return item.text
 
-                        }).join(",")
 
-                    }
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+<form id="form">
 
+    <p v-repeat="items">
 
+        <input type="text" name="text{{$index}}" v-model="text">
 
+    </p>
 
+    <button v-on="click: add" id="add">Add</button>
 
+    <p id="texts">{{texts}}</p>
 
+</form>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    var app = new Vue({
 
+        el: '#form',
 
+        data: {
 
+            items: [
 
+                { text: "a" },
 
+                { text: "b" }
 
+            ]
 
+        },
 
+        methods: {
 
+            add: function(e) {
 
+                this.items.push({ text: "c" })
 
+                e.preventDefault()
 
+            }
 
+        },
 
+        computed: {
 
+            texts: function () {
 
+                return this.items.map(function(item) {
 
+                    return item.text
 
+                }).join(",")
 
+            }
 
+        }
 
+    })
 
+</script>

+ 63 - 71
test/functional/fixtures/expression.html
Просмотреть файл 

@@ -1,76 +1,68 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div id="normal">
 
-            <p v-text="one + ' ' + two.three + '!'"></p>
 
-            <input id="one" v-model="one" name="one"> <input id="two" v-model="two.three" name="two">
 
-            <button v-on="click: this.one = 'clicked'">click</button>
 
-        </div>
 
-        <div id="lazy">
 
-            <p v-text="one + ' ' + two.three + '!'"></p>
 
-            <form id="form">
 
-                <input v-model="one" name="three"> <input v-model="two.three" name="four">
 
-            </form>
 
-            <button v-on="click: two.three = 'clicked'">click</button>
 
-        </div>
 
-        <div id="conditional">
 
-            <p>{{ok ? yesMsg : noMsg}}</p>
 
-            <button v-on="click: ok = !ok" class="toggle">toggle</button>
 
-            <button v-on="click: noMsg = 'Nah'" class="change">change</button>
 
-        </div>
 
-        <div id="attrs" data-test="hi {{msg}} ha"></div>
 
-        <div id="html">html {{{html}}} work</div>
 
-        <script>
 
-            Vue.config({debug:true})
 
+<div id="normal">
 
+    <p v-text="one + ' ' + two.three + '!'"></p>
 
+    <input id="one" v-model="one" name="one"> <input id="two" v-model="two.three" name="two">
 
+    <button v-on="click: this.one = 'clicked'">click</button>
 
+</div>
 
+<div id="lazy">
 
+    <p v-text="one + ' ' + two.three + '!'"></p>
 
+    <form id="form">
 
+        <input v-model="one" name="three"> <input v-model="two.three" name="four">
 
+    </form>
 
+    <button v-on="click: two.three = 'clicked'">click</button>
 
+</div>
 
+<div id="conditional">
 
+    <p>{{ok ? yesMsg : noMsg}}</p>
 
+    <button v-on="click: ok = !ok" class="toggle">toggle</button>
 
+    <button v-on="click: noMsg = 'Nah'" class="change">change</button>
 
+</div>
 
+<div id="attrs" data-test="hi {{msg}} ha"></div>
 
+<div id="html">html {{{html}}} work</div>
 
 
-            var normal = new Vue({
 
-                el: '#normal',
 
-                data: {
 
-                    one: 'Hello',
 
-                    two: {
 
-                        three: 'World'
 
-                    }
 
-                }
 
-            })
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    Vue.config({debug:true})
 
 
-            var lazy = new Vue({
 
-                el: '#lazy',
 
-                lazy: true,
 
-                data: {
 
-                    one: 'Hi',
 
-                    two: {
 
-                        three: 'Ho'
 
-                    }
 
-                }
 
-            })
 
+    var normal = new Vue({
 
+        el: '#normal',
 
+        data: {
 
+            one: 'Hello',
 
+            two: {
 
+                three: 'World'
 
+            }
 
+        }
 
+    })
 
 
-            var conditional = new Vue({
 
-                el: '#conditional',
 
-                data: {
 
-                    ok: true,
 
-                    yesMsg: 'YES',
 
-                    noMsg: 'NO'
 
-                }
 
-            })
 
+    var lazy = new Vue({
 
+        el: '#lazy',
 
+        lazy: true,
 
+        data: {
 
+            one: 'Hi',
 
+            two: {
 
+                three: 'Ho'
 
+            }
 
+        }
 
+    })
 
 
-            var attrs = new Vue({
 
-                el: '#attrs',
 
-                data: {
 
-                    msg: 'ho'
 
-                }
 
-            })
 
+    var conditional = new Vue({
 
+        el: '#conditional',
 
+        data: {
 
+            ok: true,
 
+            yesMsg: 'YES',
 
+            noMsg: 'NO'
 
+        }
 
+    })
 
 
-            var html = new Vue({
 
-                el: '#html',
 
-                data: {
 
-                    html: '<p>should</p> <a>probably</a>'
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+    var attrs = new Vue({
 
+        el: '#attrs',
 
+        data: {
 
+            msg: 'ho'
 
+        }
 
+    })
 
+
 
+    var html = new Vue({
 
+        el: '#html',
 
+        data: {
 
+            html: '<p>should</p> <a>probably</a>'
 
+        }
 
+    })
 
+</script>

+ 70 - 78
test/functional/fixtures/extend.html
Просмотреть файл 

@@ -1,80 +1,72 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div id="log"></div>
 
-        <div id="test">
 
-            <div class="dir" v-hola="dirMsg"></div>
 
-            <div class="filter">{{filterMsg | nodigits}}</div>
 
-            <div class="partial" v-partial="partial-test"></div>
 
-            <div class="vm" v-component="vm-test">{{vmMsg}}</div>
 
-            <div class="vm-w-model" v-component="vm-w-model" v-with="vmData">{{selfMsg + msg}}</div>
 
-        </div>
 
-        <div id="child">
 
-            <div class="cvm" v-component="vm-test">{{vmMsg}}</div>
 
-        </div>
 
-        <script>
 
-            Vue.config({debug:true})
 
-            var log = document.getElementById('log')
 
-            var T = Vue.extend({
 
-                created: function () {
 
-                    log.textContent += ' T created'  
-                },
 
-                ready: function () {
 
-                    log.textContent += ' T ready'
 
-                },
 
-                components: {
 
-                    'vm-test': {
 
-                        data: {
 
-                            vmMsg: 'component works'
 
-                        }
 
-                    },
 
-                    'vm-w-model': {
 
-                        data : {
 
-                            selfMsg: 'component with model '
 
-                        }
 
-                    }
 
-                },
 
-                partials: {
 
-                    'partial-test': '{{partialMsg}}'
 
-                },
 
-                directives: {
 
-                    hola: function (value) {
 
-                        this.el.innerHTML = value + ' works'
 
-                    }
 
-                },
 
-                filters: {
 
-                    nodigits: function (value) {
 
-                        return value.replace(/\d/g, '')
 
-                    }
 
-                }
 
-            })
 
-            var C = T.extend({
 
-                created: function () {
 
-                    log.textContent += ' C created'  
-                },
 
-                ready: function () {
 
-                    log.textContent += ' C ready'
 
-                }
 
-            })
 
-            var test = new T({
 
-                el: '#test',
 
+<div id="log"></div>
 
+<div id="test">
 
+    <div class="dir" v-hola="dirMsg"></div>
 
+    <div class="filter">{{filterMsg | nodigits}}</div>
 
+    <div class="partial" v-partial="partial-test"></div>
 
+    <div class="vm" v-component="vm-test">{{vmMsg}}</div>
 
+    <div class="vm-w-model" v-component="vm-w-model" v-with="vmData">{{selfMsg + msg}}</div>
 
+</div>
 
+<div id="child">
 
+    <div class="cvm" v-component="vm-test">{{vmMsg}}</div>
 
+</div>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    Vue.config({debug:true})
 
+    var log = document.getElementById('log')
 
+    var T = Vue.extend({
 
+        created: function () {
 
+            log.textContent += ' T created'  
+        },
 
+        ready: function () {
 
+            log.textContent += ' T ready'
 
+        },
 
+        components: {
 
+            'vm-test': {
 
                 data: {
 
-                    dirMsg: 'directive',
 
-                    filterMsg: 'fi43l132ter5 w12345orks',
 
-                    partialMsg: 'partial works',
 
-                    vmData: {
 
-                        msg: 'works'
 
-                    }
 
+                    vmMsg: 'component works'
 
+                }
 
+            },
 
+            'vm-w-model': {
 
+                data : {
 
+                    selfMsg: 'component with model '
 
                 }
 
-            })
 
-            new C({
 
-                el: '#child'
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+            }
 
+        },
 
+        partials: {
 
+            'partial-test': '{{partialMsg}}'
 
+        },
 
+        directives: {
 
+            hola: function (value) {
 
+                this.el.innerHTML = value + ' works'
 
+            }
 
+        },
 
+        filters: {
 
+            nodigits: function (value) {
 
+                return value.replace(/\d/g, '')
 
+            }
 
+        }
 
+    })
 
+    var C = T.extend({
 
+        created: function () {
 
+            log.textContent += ' C created'  
+        },
 
+        ready: function () {
 
+            log.textContent += ' C ready'
 
+        }
 
+    })
 
+    var test = new T({
 
+        el: '#test',
 
+        data: {
 
+            dirMsg: 'directive',
 
+            filterMsg: 'fi43l132ter5 w12345orks',
 
+            partialMsg: 'partial works',
 
+            vmData: {
 
+                msg: 'works'
 
+            }
 
+        }
 
+    })
 
+    new C({
 
+        el: '#child'
 
+    })
 
+</script>

+ 49 - 58
test/functional/fixtures/forms.html
Просмотреть файл 

@@ -1,58 +1,49 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>Forms test</title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <form id="forms">
 
-
 
-            <input type="text" name="text" v-model="text">
 
-
 
-            <input type="checkbox" name="checkbox" v-model="checked">
 
-
 
-            <input type="radio" name="radio" v-model="radio" value="a">
 
-            <input type="radio" name="radio" v-model="radio" value="b">
 
-
 
-            <select v-model="select" name="select">
 
-                <option>a</option>
 
-                <option>b</option>
 
-            </select>
 
-
 
-            <select id="multi" v-model="multipleSelect" name="multi" multiple>
 
-                <option>a</option>
 
-                <option>b</option>
 
-                <option>c</option>
 
-                <option>d</option>
 
-            </select>
 
-
 
-            <textarea name="textarea" v-model="textarea"></textarea>
 
-
 
-        </form>
 
-
 
-        <div id="values">
 
-            <p class="text">{{text}}</p>
 
-            <p class="checkbox">{{checked}}</p>
 
-            <p class="radio">{{radio}}</p>
 
-            <p class="select">{{select}}</p>
 
-            <p class="multipleSelect">{{multipleSelect}}</p>
 
-            <p class="textarea">{{textarea}}</p>
 
-        </div>
 
-
 
-        <script>
 
-            var test = new Vue({
 
-                el: 'body',
 
-                lazy: true,
 
-                data: {
 
-                    text: 'some text',
 
-                    checked: true,
 
-                    radio: 'b',
 
-                    select: 'b',
 
-                    multipleSelect: ['a','c'],
 
-                    textarea: 'more text'
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+<form id="forms">
 
+
 
+    <input type="text" name="text" v-model="text">
 
+
 
+    <input type="checkbox" name="checkbox" v-model="checked">
 
+
 
+    <input type="radio" name="radio" v-model="radio" value="a">
 
+    <input type="radio" name="radio" v-model="radio" value="b">
 
+
 
+    <select v-model="select" name="select">
 
+        <option>a</option>
 
+        <option>b</option>
 
+    </select>
 
+
 
+    <select id="multi" v-model="multipleSelect" name="multi" multiple>
 
+        <option>a</option>
 
+        <option>b</option>
 
+        <option>c</option>
 
+        <option>d</option>
 
+    </select>
 
+
 
+    <textarea name="textarea" v-model="textarea"></textarea>
 
+
 
+</form>
 
+
 
+<div id="values">
 
+    <p class="text">{{text}}</p>
 
+    <p class="checkbox">{{checked}}</p>
 
+    <p class="radio">{{radio}}</p>
 
+    <p class="select">{{select}}</p>
 
+    <p class="multipleSelect">{{multipleSelect}}</p>
 
+    <p class="textarea">{{textarea}}</p>
 
+</div>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    var test = new Vue({
 
+        el: 'body',
 
+        lazy: true,
 
+        data: {
 
+            text: 'some text',
 
+            checked: true,
 
+            radio: 'b',
 
+            select: 'b',
 
+            multipleSelect: ['a','c'],
 
+            textarea: 'more text'
 
+        }
 
+    })
 
+</script>

+ 68 - 76
test/functional/fixtures/nested-props.html
Просмотреть файл 

@@ -1,78 +1,70 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div id="a">
 
-            <h1>a.b.c : <span v-text="a.b.c"></span></h1>
 
-            <h2>a.c : <span v-text="a.c"></span></h2>
 
-            <h3>Computed property that concats the two: <span v-text="d"></span></h3>
 
-            <button class="one" v-on="click:one">one</button>
 
-            <button class="two" v-on="click:two">two</button>
 
-            <button class="three" v-on="click:three">three</button>
 
-            <form id="form"><input name="msg" v-model="msg"></form>
 
-            <p class="hidden">{{sum}}</p>
 
-            <button class="four" v-on="click:four">four</button>
 
-            <button class="empty1" v-on="click:setEmpty">empty a.b</button>
 
-            <button class="empty2" v-on="click:setEmpty2">empty a</button>
 
-        </div>
 
-        <script>
 
-            Vue.config({debug: true})
 
-            var data = { c: 555 }
 
-            var Demo = Vue.extend({
 
-                lazy: true,
 
-                created: function () {
 
-                    this.msg = 'Yoyoyo'
 
-                    this.a = data
 
-                },
 
-                data: {
 
-                    hidden: {
 
-                        a: 1,
 
-                        b: 2
 
-                    }
 
-                },
 
-                computed: {
 
-                    d: function () {
 
-                        return this.msg + (this.a.b.c || '') + (this.a.c || '')
 
-                    },
 
-                    sum: function () {
 
-                        return this.hidden.a + this.hidden.b
 
-                    }
 
-                },
 
-                methods: {
 
-                    one: function () {
 
-                        this.a = {
 
-                            c: 1,
 
-                            b: {
 
-                                c: 'one'
 
-                            }
 
-                        }
 
-                    },
 
-                    two: function () {
 
-                        this.a.b = {
 
-                            c: 'two'
 
-                        }
 
-                        this.a.c = 2
 
-                    },
 
-                    three: function () {
 
-                        this.a.b.c = 'three'
 
-                        this.a.c = 3
 
-                    },
 
-                    four: function () {
 
-                        this.hidden.a++
 
-                    },
 
-                    setEmpty: function () {
 
-                        this.a.b = {}
 
-                    },
 
-                    setEmpty2: function () {
 
-                        this.a = {}
 
+<div id="a">
 
+    <h1>a.b.c : <span v-text="a.b.c"></span></h1>
 
+    <h2>a.c : <span v-text="a.c"></span></h2>
 
+    <h3>Computed property that concats the two: <span v-text="d"></span></h3>
 
+    <button class="one" v-on="click:one">one</button>
 
+    <button class="two" v-on="click:two">two</button>
 
+    <button class="three" v-on="click:three">three</button>
 
+    <form id="form"><input name="msg" v-model="msg"></form>
 
+    <p class="hidden">{{sum}}</p>
 
+    <button class="four" v-on="click:four">four</button>
 
+    <button class="empty1" v-on="click:setEmpty">empty a.b</button>
 
+    <button class="empty2" v-on="click:setEmpty2">empty a</button>
 
+</div>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    Vue.config({debug: true})
 
+    var data = { c: 555 }
 
+    var Demo = Vue.extend({
 
+        lazy: true,
 
+        created: function () {
 
+            this.msg = 'Yoyoyo'
 
+            this.a = data
 
+        },
 
+        data: {
 
+            hidden: {
 
+                a: 1,
 
+                b: 2
 
+            }
 
+        },
 
+        computed: {
 
+            d: function () {
 
+                return this.msg + (this.a.b.c || '') + (this.a.c || '')
 
+            },
 
+            sum: function () {
 
+                return this.hidden.a + this.hidden.b
 
+            }
 
+        },
 
+        methods: {
 
+            one: function () {
 
+                this.a = {
 
+                    c: 1,
 
+                    b: {
 
+                        c: 'one'
 
                     }
 
                 }
 
-            })
 
-            var app = new Demo({ el: '#a' })
 
-        </script>
 
-    </body>
 
-</html>
 
+            },
 
+            two: function () {
 
+                this.a.b = {
 
+                    c: 'two'
 
+                }
 
+                this.a.c = 2
 
+            },
 
+            three: function () {
 
+                this.a.b.c = 'three'
 
+                this.a.c = 3
 
+            },
 
+            four: function () {
 
+                this.hidden.a++
 
+            },
 
+            setEmpty: function () {
 
+                this.a.b = {}
 
+            },
 
+            setEmpty2: function () {
 
+                this.a = {}
 
+            }
 
+        }
 
+    })
 
+    var app = new Demo({ el: '#a' })
 
+</script>

+ 28 - 36
test/functional/fixtures/nested-repeat.html
Просмотреть файл 

@@ -1,40 +1,32 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>Nested repeat</title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div id="test">
 
+<div id="test">
 
+    <ul>
 
+        <li v-repeat="items" v-class="'list-' + $index">
 
             <ul>
 
                 <li v-repeat="items" v-class="'list-' + $index">
 
-                    <ul>
 
-                        <li v-repeat="items" v-class="'list-' + $index">
 
-                            {{$parent.$index + '.' + $index + ' : ' + $parent.title + '&lt;-' + title}}
 
-                        </li>
 
-                    </ul>
 
+                    {{$parent.$index + '.' + $index + ' : ' + $parent.title + '&lt;-' + title}}
 
                 </li>
 
             </ul>
 
-            <button id="b0" v-on="click: items[0].title = 'hi'">1</button>
 
-            <button id="b1" v-on="click: items[1].title = 'hi'">2</button>
 
-            <button id="b0-0" v-on="click: items[0].items[0].title = 'hi'">1.1</button>
 
-            <button id="b0-1" v-on="click: items[0].items[1].title = 'hi'">1.2</button>
 
-            <button id="b1-0" v-on="click: items[1].items[0].title = 'hi'">2.1</button>
 
-            <button id="b1-1" v-on="click: items[1].items[1].title = 'hi'">2.2</button>
 
-        </div>
 
-        <script>
 
-        Vue.config({debug:true})
 
-        var items = [
 
-            { title: 0, items: [{title:0}, {title:1}] },
 
-            { title: 1, items: [{title:0}, {title:1}] }
 
-        ]
 
-        new Vue({
 
-            el: '#test',
 
-            data: {
 
-                items: items
 
-            }
 
-        })
 
-        </script>
 
-    </body>
 
-</html>
 
+        </li>
 
+    </ul>
 
+    <button id="b0" v-on="click: items[0].title = 'hi'">1</button>
 
+    <button id="b1" v-on="click: items[1].title = 'hi'">2</button>
 
+    <button id="b0-0" v-on="click: items[0].items[0].title = 'hi'">1.1</button>
 
+    <button id="b0-1" v-on="click: items[0].items[1].title = 'hi'">1.2</button>
 
+    <button id="b1-0" v-on="click: items[1].items[0].title = 'hi'">2.1</button>
 
+    <button id="b1-1" v-on="click: items[1].items[1].title = 'hi'">2.2</button>
 
+</div>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+Vue.config({debug:true})
 
+var items = [
 
+    { title: 0, items: [{title:0}, {title:1}] },
 
+    { title: 1, items: [{title:0}, {title:1}] }
 
+]
 
+new Vue({
 
+    el: '#test',
 
+    data: {
 
+        items: items
 
+    }
 
+})
 
+</script>

+ 58 - 65
test/functional/fixtures/nested-vms.html
Просмотреть файл 

@@ -1,81 +1,74 @@
 
-<!DOCTYPE html>
 
-<html>
 
-<head>
 
-    <title>Nested Controllers</title>
 
-    <style type="text/css">
 
-        div:not(#grandpa) {
 
-            padding-left: 15px;
 
-        }
 
-        p {
 
-            position: relative;
 
-        }
 
-        p:not(.ancestor):before {
 
-            position: absolute;
 
-            top: 0;
 
-            left: -22px;
 
-            content: "└ ";
 
-            color: #F00;
 
-        }
 
-    </style>
 
-    <script src="../../../dist/vue.js"></script>
 
-</head>
 
-<body>
 
-    <div id="grandpa" data-name="Andy" data-family="Johnson">
 
-        <p class="ancestor">{{name}} {{family}}</p>
 
+<style type="text/css">
 
+    div:not(#grandpa) {
 
+        padding-left: 15px;
 
+    }
 
+    p {
 
+        position: relative;
 
+    }
 
+    p:not(.ancestor):before {
 
+        position: absolute;
 
+        top: 0;
 
+        left: -22px;
 
+        content: "└ ";
 
+        color: #F00;
 
+    }
 
+</style>
 
 
-        <div v-component="man" data-name="Jack">
 
-            <p class="jack">{{name}}, son of {{$parent.name}}</p>
 
+<div id="grandpa" data-name="Andy" data-family="Johnson">
 
+    <p class="ancestor">{{name}} {{family}}</p>
 
 
-            <div v-component="man" data-name="Mike">
 
-                <p class="mike">{{name}}, son of {{$parent.name}}</p>
 
+    <div v-component="man" data-name="Jack">
 
+        <p class="jack">{{name}}, son of {{$parent.name}}</p>
 
 
-                <div v-component="offspring" data-name="Tim" class="tim">
 
-                </div>
 
+        <div v-component="man" data-name="Mike">
 
+            <p class="mike">{{name}}, son of {{$parent.name}}</p>
 
+
 
+            <div v-component="offspring" data-name="Tim" class="tim">
 
+            </div>
 
 
-                <div v-component="offspring" data-name="Tom" class="tom">
 
-                </div>
 
+            <div v-component="offspring" data-name="Tom" class="tom">
 
             </div>
 
+        </div>
 
 
-            <div v-component="man" data-name="Jason">
 
-                <p class="jason">{{name}}, son of {{$parent.name}}</p>
 
+        <div v-component="man" data-name="Jason">
 
+            <p class="jason">{{name}}, son of {{$parent.name}}</p>
 
 
-                <div v-component="offspring" data-name="Andrew" class="andrew">
 
-                </div>
 
+            <div v-component="offspring" data-name="Andrew" class="andrew">
 
             </div>
 
         </div>
 
     </div>
 
+</div>
 
 
-    <script type="text/v-template" id="v-template-offspring">
 
-        <p>{{name}}, son of {{$parent.name}}, grandson of {{$parent.$parent.name}}, great-grandson of {{$root.name}}, and offspring of family {{family}}.</p>
 
-    </script>
 
-    
-    <script>
 
-        Vue.config({ debug: true })
 
+<script type="text/v-template" id="v-template-offspring">
 
+    <p>{{name}}, son of {{$parent.name}}, grandson of {{$parent.$parent.name}}, great-grandson of {{$root.name}}, and offspring of family {{family}}.</p>
 
+</script>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    Vue.config({ debug: true })
 
 
-        var Man = Vue.extend({
 
-            created: function () {
 
-                this.name = this.$el.dataset.name
 
-                console.log(this.$el)
 
-                console.log(this.name)
 
-                var family = this.$el.dataset.family
 
-                if (family) {
 
-                    this.family = family
 
-                }
 
+    var Man = Vue.extend({
 
+        created: function () {
 
+            this.name = this.$el.dataset.name
 
+            console.log(this.$el)
 
+            console.log(this.name)
 
+            var family = this.$el.dataset.family
 
+            if (family) {
 
+                this.family = family
 
             }
 
-        })
 
+        }
 
+    })
 
 
-        var Offspring = Man.extend({
 
-            template: document.getElementById('v-template-offspring').innerHTML.trim()
 
-        })
 
+    var Offspring = Man.extend({
 
+        template: document.getElementById('v-template-offspring').innerHTML.trim()
 
+    })
 
 
-        Vue
 
-            .component('man', Man)
 
-            .component('offspring', Offspring)
 
+    Vue
 
+        .component('man', Man)
 
+        .component('offspring', Offspring)
 
 
-        new Man({
 
-            el: '#grandpa'
 
-        })
 
-        
-    </script>
 
-</body>
 
-</html>
 
+    new Man({
 
+        el: '#grandpa'
 
+    })
 
+    
+</script>

+ 23 - 31
test/functional/fixtures/repeated-exp.html
Просмотреть файл 

@@ -1,31 +1,23 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>Repeated Expressions</title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <ul id="test">
 
-            <li
 
-                v-repeat="items"
 
-                v-on="click:n++"
 
-                class="item-{{$index}}"
 
-            >
 
-                {{n}}
 
-            </li>
 
-        </ul>
 
-        <script>
 
-            var app = new Vue({
 
-                el: '#test',
 
-                data: {
 
-                    items: [
 
-                        { n: 1 },
 
-                        { n: 2 },
 
-                        { n: 3 }
 
-                    ]
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+<ul id="test">
 
+    <li
 
+        v-repeat="items"
 
+        v-on="click:n++"
 
+        class="item-{{$index}}"
 
+    >
 
+        {{n}}
 
+    </li>
 
+</ul>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    var app = new Vue({
 
+        el: '#test',
 
+        data: {
 
+            items: [
 
+                { n: 1 },
 
+                { n: 2 },
 
+                { n: 3 }
 
+            ]
 
+        }
 
+    })
 
+</script>

+ 73 - 81
test/functional/fixtures/repeated-items.html
Просмотреть файл 

@@ -1,86 +1,78 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>Vue.js repeated items</title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div id="app">
 
-            <p>
 
-                <button class="push" v-on="click:push">push</button>
 
-                <button class="pop" v-on="click:pop">pop</button>
 
-                <button class="shift" v-on="click:shift">shift</button>
 
-                <button class="unshift" v-on="click:unshift">unshift</button>
 
-                <button class="splice" v-on="click:splice">splice</button>
 
-                <button class="remove" v-on="click:remove">remove</button>
 
-                <button class="replace" v-on="click:replace">replace</button>
 
-                <button class="sort" v-on="click:sort">sort</button>
 
-                <button class="reverse" v-on="click:reverse">reverse</button>
 
-            </p>
 
-            <p>Total items: <span class="count" v-text="items.length"></span></p>
 
-            <ul>
 
-                <li class="item" v-repeat="items">
 
-                    {{$index}} {{title}}
 
-                </li>
 
-            </ul>
 
-        </div>
 
-        <script>
 
+<div id="app">
 
+    <p>
 
+        <button class="push" v-on="click:push">push</button>
 
+        <button class="pop" v-on="click:pop">pop</button>
 
+        <button class="shift" v-on="click:shift">shift</button>
 
+        <button class="unshift" v-on="click:unshift">unshift</button>
 
+        <button class="splice" v-on="click:splice">splice</button>
 
+        <button class="remove" v-on="click:remove">remove</button>
 
+        <button class="replace" v-on="click:replace">replace</button>
 
+        <button class="sort" v-on="click:sort">sort</button>
 
+        <button class="reverse" v-on="click:reverse">reverse</button>
 
+    </p>
 
+    <p>Total items: <span class="count" v-text="items.length"></span></p>
 
+    <ul>
 
+        <li class="item" v-repeat="items">
 
+            {{$index}} {{title}}
 
+        </li>
 
+    </ul>
 
+</div>
 
 
-            //Vue.config({debug: true})
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
 
-            var items = [
 
-                { title: 'A'},
 
-                { title: 'B'},
 
-                { title: 'C'}
 
-            ]
 
+    //Vue.config({debug: true})
 
 
-            var demo = new Vue({
 
-                el: '#app',
 
-                data: {
 
-                    items: items,
 
-                    push: function () {
 
-                        this.items.push({ title: getChar() })
 
-                    },
 
-                    pop: function () {
 
-                        this.items.pop()
 
-                    },
 
-                    shift: function () {
 
-                        this.items.shift()
 
-                    },
 
-                    unshift: function () {
 
-                        this.items.unshift({ title: getChar() })
 
-                    },
 
-                    splice: function () {
 
-                        this.items.splice(1, 1, { title: getChar() }, { title: getChar() })
 
-                    },
 
-                    replace: function () {
 
-                        this.items.replace(getPos(), { title: getChar() })
 
-                    },
 
-                    remove: function () {
 
-                        this.items.remove(getPos())
 
-                    },
 
-                    sort: function () {
 
-                        this.items.sort(function (a, b) {
 
-                            return a.title.charCodeAt(0) - b.title.charCodeAt(0)
 
-                        })
 
-                    },
 
-                    reverse: function () {
 
-                        this.items.reverse()
 
-                    }
 
-                }
 
-            })
 
+    var items = [
 
+        { title: 'A'},
 
+        { title: 'B'},
 
+        { title: 'C'}
 
+    ]
 
 
-            var getChar = (function () {
 
-                var count = 0
 
-                return function () {
 
-                    return (count++).toString()
 
-                }
 
-            })()
 
-
 
-            function getPos () {
 
-                return items.length - 1
 
+    var demo = new Vue({
 
+        el: '#app',
 
+        data: {
 
+            items: items,
 
+            push: function () {
 
+                this.items.push({ title: getChar() })
 
+            },
 
+            pop: function () {
 
+                this.items.pop()
 
+            },
 
+            shift: function () {
 
+                this.items.shift()
 
+            },
 
+            unshift: function () {
 
+                this.items.unshift({ title: getChar() })
 
+            },
 
+            splice: function () {
 
+                this.items.splice(1, 1, { title: getChar() }, { title: getChar() })
 
+            },
 
+            replace: function () {
 
+                this.items.replace(getPos(), { title: getChar() })
 
+            },
 
+            remove: function () {
 
+                this.items.remove(getPos())
 
+            },
 
+            sort: function () {
 
+                this.items.sort(function (a, b) {
 
+                    return a.title.charCodeAt(0) - b.title.charCodeAt(0)
 
+                })
 
+            },
 
+            reverse: function () {
 
+                this.items.reverse()
 
             }
 
-        </script>
 
-    </body>
 
-</html>
 
+        }
 
+    })
 
+
 
+    var getChar = (function () {
 
+        var count = 0
 
+        return function () {
 
+            return (count++).toString()
 
+        }
 
+    })()
 
+
 
+    function getPos () {
 
+        return items.length - 1
 
+    }
 
+</script>

+ 37 - 45
test/functional/fixtures/repeated-vms.html
Просмотреть файл 

@@ -1,46 +1,38 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div class="item" v-repeat="items" v-component="item" v-component-id="items" v-on="click:click">
 
-            {{msg + ' ' + title}}
 
-        </div>
 
-        <script>
 
-            Vue.config({ debug: true })
 
-            
-            Vue.component('item', {
 
-                ready: function () {
 
-                    this.title += ' init'
 
-                },
 
-                methods: {
 
-                    click: function () {
 
-                        this.title += ' click'
 
-                    }
 
-                },
 
-                data: {
 
-                    msg: 'msg'
 
-                },
 
-                computed: {
 
-                    reversed: function () {
 
-                        return this.title.split('').reverse().join('')
 
-                    }
 
-                }
 
-            })
 
+<div class="item" v-repeat="items" v-component="item" v-component-id="items" v-on="click:click">
 
+    {{msg + ' ' + title}}
 
+</div>
 
 
-            var app = new Vue({
 
-                el: 'body',
 
-                data: {
 
-                    items: [
 
-                        {title:'a'},
 
-                        {title:'b'},
 
-                        {title:'c'}
 
-                    ]
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    Vue.config({ debug: true })
 
+    
+    Vue.component('item', {
 
+        ready: function () {
 
+            this.title += ' init'
 
+        },
 
+        methods: {
 
+            click: function () {
 
+                this.title += ' click'
 
+            }
 
+        },
 
+        data: {
 
+            msg: 'msg'
 
+        },
 
+        computed: {
 
+            reversed: function () {
 
+                return this.title.split('').reverse().join('')
 
+            }
 
+        }
 
+    })
 
+
 
+    var app = new Vue({
 
+        el: 'body',
 
+        data: {
 
+            items: [
 
+                {title:'a'},
 
+                {title:'b'},
 
+                {title:'c'}
 
+            ]
 
+        }
 
+    })
 
+</script>

+ 24 - 32
test/functional/fixtures/routing.html
Просмотреть файл 

@@ -1,36 +1,28 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>route</title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div v-if="route.hi">Hi! <a href="#ho">Next</a></div>
 
-        <div v-if="route.ho">Ho! <a href="#ha">Next</a></div>
 
-        <div v-if="route.ha">Ha! <a href="#hi">Next</a></div>
 
-        <script>
 
+<div v-if="route.hi">Hi! <a href="#ho">Next</a></div>
 
+<div v-if="route.ho">Ho! <a href="#ha">Next</a></div>
 
+<div v-if="route.ha">Ha! <a href="#hi">Next</a></div>
 
 
-            var route = {
 
-                hi: false,
 
-                ho: false,
 
-                ha: false
 
-            }
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
 
-            window.addEventListener('hashchange', updateRoute)
 
-            function updateRoute () {
 
-                var path = location.hash.slice(1) || 'hi'
 
-                for (var key in route) {
 
-                    route[key] = key === path
 
-                }
 
-            }
 
+    var route = {
 
+        hi: false,
 
+        ho: false,
 
+        ha: false
 
+    }
 
 
-            var app = new Vue({
 
-                el: 'body'
 
-            })
 
-            app.route = route
 
+    window.addEventListener('hashchange', updateRoute)
 
+    function updateRoute () {
 
+        var path = location.hash.slice(1) || 'hi'
 
+        for (var key in route) {
 
+            route[key] = key === path
 
+        }
 
+    }
 
 
-            updateRoute()
 
-        </script>
 
-    </body>
 
-</html>
 
+    var app = new Vue({
 
+        el: 'body'
 
+    })
 
+    app.route = route
 
+
 
+    updateRoute()
 
+</script>

+ 45 - 53
test/functional/fixtures/share-data.html
Просмотреть файл 

@@ -1,54 +1,46 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title>SEED share data</title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div id="a">{{shared.msg}}</div>
 
-        <div id="b">{{shared.msg}}</div>
 
-        <form id="c">
 
-            <input name="input" v-model="shared.msg" type="text">
 
-        </form>
 
-        <div id="d">
 
-            <pre>{{source}}</pre>
 
-        </div>
 
-        <script>
 
-            Vue.config({debug:true})
 
-            var shared = {
 
-                msg: 'hello'
 
+<div id="a">{{shared.msg}}</div>
 
+<div id="b">{{shared.msg}}</div>
 
+<form id="c">
 
+    <input name="input" v-model="shared.msg" type="text">
 
+</form>
 
+<div id="d">
 
+    <pre>{{source}}</pre>
 
+</div>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    Vue.config({debug:true})
 
+    var shared = {
 
+        msg: 'hello'
 
+    }
 
+    new Vue({
 
+        el: '#a',
 
+        data: {
 
+            shared: shared
 
+        }
 
+    })
 
+    new Vue({
 
+        el: '#b',
 
+        data: {
 
+            shared: shared
 
+        }
 
+    })
 
+    new Vue({
 
+        lazy: true,
 
+        el: '#c',
 
+        data: {
 
+            shared: shared
 
+        }
 
+    })
 
+    new Vue({
 
+        el: '#d',
 
+        data: {
 
+            shared: shared
 
+        },
 
+        computed: {
 
+            source: function () {
 
+                return JSON.stringify(this.shared)
 
             }
 
-            new Vue({
 
-                el: '#a',
 
-                data: {
 
-                    shared: shared
 
-                }
 
-            })
 
-            new Vue({
 
-                el: '#b',
 
-                data: {
 
-                    shared: shared
 
-                }
 
-            })
 
-            new Vue({
 
-                lazy: true,
 
-                el: '#c',
 
-                data: {
 
-                    shared: shared
 
-                }
 
-            })
 
-            new Vue({
 
-                el: '#d',
 
-                data: {
 
-                    shared: shared
 
-                },
 
-                computed: {
 
-                    source: function () {
 
-                        return JSON.stringify(this.shared)
 
-                    }
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+        }
 
+    })
 
+</script>

+ 23 - 31
test/functional/fixtures/simple-dir.html
Просмотреть файл 

@@ -1,32 +1,24 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
-        <div id="hi" v-test v-test2>
 
-        </div>
 
-        <p class="one"></p>
 
-        <p class="two"></p>
 
-        <script>
 
-            var a = new Vue({
 
-                el: '#hi',
 
-                directives: {
 
-                    test: {
 
-                        bind: function () {
 
-                            document.querySelector('.one').textContent = 'bind'
 
-                        },
 
-                        unbind: function () {
 
-                            document.querySelector('.one').textContent = 'unbind'
 
-                        }
 
-                    },
 
-                    test2: function () {
 
-                        document.querySelector('.two').textContent = 'bind'
 
-                    }
 
+<div id="hi" v-test v-test2>
 
+</div>
 
+<p class="one"></p>
 
+<p class="two"></p>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    var a = new Vue({
 
+        el: '#hi',
 
+        directives: {
 
+            test: {
 
+                bind: function () {
 
+                    document.querySelector('.one').textContent = 'bind'
 
+                },
 
+                unbind: function () {
 
+                    document.querySelector('.one').textContent = 'unbind'
 
                 }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+            },
 
+            test2: function () {
 
+                document.querySelector('.two').textContent = 'bind'
 
+            }
 
+        }
 
+    })
 
+</script>

+ 54 - 62
test/functional/fixtures/template.html
Просмотреть файл 

@@ -1,72 +1,64 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-    </head>
 
-    <body>
 
+<meta charset="utf-8">
 
 
-        <div id="usa" v-partial="global"></div>
 
-        <div id="japan">{{> local}}</div>
 
-        <div id="repeat">{{> repeat}}</div>
 
+<div id="usa" v-partial="global"></div>
 
+<div id="japan">{{> local}}</div>
 
+<div id="repeat">{{> repeat}}</div>
 
 
-        <script type="text/v-template" id="test">
 
-            <p>{{hi}}!</p>
 
-        </script>
 
+<script type="text/v-template" id="test">
 
+    <p>{{hi}}!</p>
 
+</script>
 
 
-        <script type="text/v-template" id="repeat-template">
 
-            <p v-repeat="items">{{title}}</p>
 
-        </script>
 
+<script type="text/v-template" id="repeat-template">
 
+    <p v-repeat="items">{{title}}</p>
 
+</script>
 
 
-        <script>
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
 
-           // Vue.config({debug:true})
 
+   // Vue.config({debug:true})
 
 
-            // direct usage
 
-            var china  = new Vue({
 
-                id: 'china',
 
-                template: '#test'
 
-            })
 
-            document.body.appendChild(china.$el)
 
-            // setting value after compile also works,
 
-            // as long as it has appeared in the template
 
-            china.hi = '你好'
 
+    // direct usage
 
+    var china  = new Vue({
 
+        id: 'china',
 
+        template: '#test'
 
+    })
 
+    document.body.appendChild(china.$el)
 
+    // setting value after compile also works,
 
+    // as long as it has appeared in the template
 
+    china.hi = '你好'
 
 
-            // extended usage
 
-            var Hawaii = Vue.extend({
 
-                id: 'hawaii',
 
-                template: '#test'
 
-            })
 
-            var hawaii = new Hawaii()
 
-            document.body.appendChild(hawaii.$el)
 
-            hawaii.hi = 'Aloha'
 
+    // extended usage
 
+    var Hawaii = Vue.extend({
 
+        id: 'hawaii',
 
+        template: '#test'
 
+    })
 
+    var hawaii = new Hawaii()
 
+    document.body.appendChild(hawaii.$el)
 
+    hawaii.hi = 'Aloha'
 
 
-            // global partial
 
-            Vue.partial('global', document.querySelector('#test').innerHTML)
 
-            var usa = new Vue({
 
-                el: '#usa'
 
-            })
 
-            usa.hi = 'Hi dude'
 
+    // global partial
 
+    Vue.partial('global', document.querySelector('#test').innerHTML)
 
+    var usa = new Vue({
 
+        el: '#usa'
 
+    })
 
+    usa.hi = 'Hi dude'
 
 
-            // direct partial
 
-            var japan = new Vue({
 
-                el: '#japan',
 
-                partials: {
 
-                    local: '#test'
 
-                }
 
-            })
 
-            japan.hi = 'こんにちは'
 
+    // direct partial
 
+    var japan = new Vue({
 
+        el: '#japan',
 
+        partials: {
 
+            local: '#test'
 
+        }
 
+    })
 
+    japan.hi = 'こんにちは'
 
 
-            var repeat = new Vue({
 
-                el: '#repeat',
 
-                partials: {
 
-                    repeat: '#repeat-template'
 
-                },
 
-                data: {
 
-                    items: [{ title: 'Repeat' }]
 
-                }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+    var repeat = new Vue({
 
+        el: '#repeat',
 
+        partials: {
 
+            repeat: '#repeat-template'
 
+        },
 
+        data: {
 
+            items: [{ title: 'Repeat' }]
 
+        }
 
+    })
 
+</script>

+ 86 - 93
test/functional/fixtures/transition.html
Просмотреть файл 

@@ -1,94 +1,87 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-        <style type="text/css">
 
-            .test {
 
-                width: 600px;
 
-                height: 100px;
 
-                background-color: #f00;
 
-                padding: 10px;
 
-                border: 1px solid #000;
 
-                overflow: hidden;
 
-                transition: all .2s ease;
 
-                -moz-transition: all .2s ease;
 
-                -webkit-transition: all .2s ease;
 
-            }
 
-            .v-enter, .v-leave {
 
-                height: 0;
 
-                padding-top: 0;
 
-                padding-bottom: 0;
 
-                border-top-width: 0;
 
-                border-bottom-width: 0;
 
-            }
 
-            .v-enter {
 
-                background-color: #00f;
 
-            }
 
-            .v-leave {
 
-                background-color: #0f0;
 
-            }
 
-        </style>
 
-    </head>
 
-    <body>
 
-        <div id="test">
 
-            <div>
 
-                <button class="button-0" v-on="click:set">0</button>
 
-                <button class="button-1" v-on="click:set">1</button>
 
-                <button class="button-2" v-on="click:set">2</button>
 
-                <button class="push" v-on="click:push">push</button>
 
-                <button class="pop" v-on="click:pop">pop</button>
 
-                <button class="splice" v-on="click:splice">splice</button>
 
-            </div>
 
-            <div
 
-                class="test"
 
-                v-repeat="items"
 
-                v-if="filter(this)"
 
-                v-transition
 
-                v-attr="data-id:a">
 
-                {{a}}
 
-            </div>
 
-            <div
 
-                class="test"
 
-                v-repeat="items"
 
-                v-show="filter(this)"
 
-                v-transition
 
-                v-attr="data-id:a">
 
-                {{a}}
 
-            </div>
 
-        </div>
 
-        <h1 style="margin:0">123</h1>
 
-        <script>
 
-            var test = new Vue({
 
-                el: '#test',
 
-                data: {
 
-                    b: 1,
 
-                    set: function (e) {
 
-                        this.b = +e.el.textContent
 
-                    },
 
-                    push: function () {
 
-                        this.items.push({a: this.items.length + 1 })  
-                    },
 
-                    pop: function () {
 
-                        this.items.pop()  
-                    },
 
-                    splice: function () {
 
-                        this.items.splice(0, 1, {a:99})
 
-                    },
 
-                    filter: function (item) {
 
-                        return item.a > this.b
 
-                    },
 
-                    items: [
 
-                        {
 
-                            a: 1
 
-                        },
 
-                        {
 
-                            a: 2
 
-                        }
 
-                    ]
 
+<style type="text/css">
 
+    .test {
 
+        width: 600px;
 
+        height: 100px;
 
+        background-color: #f00;
 
+        padding: 10px;
 
+        border: 1px solid #000;
 
+        overflow: hidden;
 
+        transition: all .2s ease;
 
+        -moz-transition: all .2s ease;
 
+        -webkit-transition: all .2s ease;
 
+    }
 
+    .v-enter, .v-leave {
 
+        height: 0;
 
+        padding-top: 0;
 
+        padding-bottom: 0;
 
+        border-top-width: 0;
 
+        border-bottom-width: 0;
 
+    }
 
+    .v-enter {
 
+        background-color: #00f;
 
+    }
 
+    .v-leave {
 
+        background-color: #0f0;
 
+    }
 
+</style>
 
+
 
+<div id="test">
 
+    <div>
 
+        <button class="button-0" v-on="click:set">0</button>
 
+        <button class="button-1" v-on="click:set">1</button>
 
+        <button class="button-2" v-on="click:set">2</button>
 
+        <button class="push" v-on="click:push">push</button>
 
+        <button class="pop" v-on="click:pop">pop</button>
 
+        <button class="splice" v-on="click:splice">splice</button>
 
+    </div>
 
+    <div
 
+        class="test"
 
+        v-repeat="items"
 
+        v-if="filter(this)"
 
+        v-transition
 
+        v-attr="data-id:a">
 
+        {{a}}
 
+    </div>
 
+    <div
 
+        class="test"
 
+        v-repeat="items"
 
+        v-show="filter(this)"
 
+        v-transition
 
+        v-attr="data-id:a">
 
+        {{a}}
 
+    </div>
 
+</div>
 
+<h1 style="margin:0">123</h1>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    var test = new Vue({
 
+        el: '#test',
 
+        data: {
 
+            b: 1,
 
+            set: function (e) {
 
+                this.b = +e.el.textContent
 
+            },
 
+            push: function () {
 
+                this.items.push({a: this.items.length + 1 })  
+            },
 
+            pop: function () {
 
+                this.items.pop()  
+            },
 
+            splice: function () {
 
+                this.items.splice(0, 1, {a:99})
 
+            },
 
+            filter: function (item) {
 
+                return item.a > this.b
 
+            },
 
+            items: [
 
+                {
 
+                    a: 1
 
+                },
 
+                {
 
+                    a: 2
 
                 }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+            ]
 
+        }
 
+    })
 
+</script>

+ 61 - 68
test/functional/fixtures/validation.html
Просмотреть файл 

@@ -1,71 +1,64 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <title></title>
 
-        <meta charset="utf-8">
 
-        <script src="../../../dist/vue.js"></script>
 
-        <style type="text/css">
 
-            input:not(.valid) {
 
-                outline-color: #f00;
 
+<style type="text/css">
 
+    input:not(.valid) {
 
+        outline-color: #f00;
 
+    }
 
+</style>
 
+
 
+<div id="test">
 
+    name: <input type="text" v-model="name | nameValidator" v-class="valid:validation.name" name="name">
 
+    email: <input type="text" v-model="email | emailValidator" v-class="valid:validation.email" name="email">
 
+    <a id="go" v-on="click:go">Go</a>
 
+    <ul>
 
+        <li class="user" v-repeat="users">
 
+            {{name}} {{email}}
 
+        </li>
 
+    </ul>
 
+</div>
 
+
 
+<script src="../../../dist/vue.js"></script>
 
+<script>
 
+    var RE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
+    var test = new Vue({
 
+        el: '#test',
 
+        filters: {
 
+            nameValidator: function (val) {
 
+                this.validation.name = !!val
 
+                return val
 
+            },
 
+            emailValidator: function (val) {
 
+                this.validation.email = RE.test(val)
 
+                return val
 
             }
 
-        </style>
 
-    </head>
 
-    <body>
 
-        <div id="test">
 
-            name: <input type="text" v-model="name | nameValidator" v-class="valid:validation.name" name="name">
 
-            email: <input type="text" v-model="email | emailValidator" v-class="valid:validation.email" name="email">
 
-            <a id="go" v-on="click:go">Go</a>
 
-            <ul>
 
-                <li class="user" v-repeat="users">
 
-                    {{name}} {{email}}
 
-                </li>
 
-            </ul>
 
-        </div>
 
-        <script>
 
-            var RE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-            var test = new Vue({
 
-                el: '#test',
 
-                filters: {
 
-                    nameValidator: function (val) {
 
-                        this.validation.name = !!val
 
-                        return val
 
-                    },
 
-                    emailValidator: function (val) {
 
-                        this.validation.email = RE.test(val)
 
-                        return val
 
-                    }
 
-                },
 
-                data: {
 
-                    name: '',
 
-                    email: '',
 
-                    users: [],
 
-                    validation: {
 
-                        email: false,
 
-                        name: false
 
-                    }
 
-                },
 
-                computed: {
 
-                    isValid: function () {
 
-                        var valid = true
 
-                        for (var key in this.validation) {
 
-                            if (!this.validation[key]) {
 
-                                valid = false
 
-                            }
 
-                        }
 
-                        return valid
 
-                    }
 
-                },
 
-                methods: {
 
-                    go: function () {
 
-                        if (this.isValid) {
 
-                            this.users.push({
 
-                                name: this.name,
 
-                                email: this.email
 
-                            })
 
-                        }
 
+        },
 
+        data: {
 
+            name: '',
 
+            email: '',
 
+            users: [],
 
+            validation: {
 
+                email: false,
 
+                name: false
 
+            }
 
+        },
 
+        computed: {
 
+            isValid: function () {
 
+                var valid = true
 
+                for (var key in this.validation) {
 
+                    if (!this.validation[key]) {
 
+                        valid = false
 
                     }
 
                 }
 
-            })
 
-        </script>
 
-    </body>
 
-</html>
 
+                return valid
 
+            }
 
+        },
 
+        methods: {
 
+            go: function () {
 
+                if (this.isValid) {
 
+                    this.users.push({
 
+                        name: this.name,
 
+                        email: this.email
 
+                    })
 
+                }
 
+            }
 
+        }
 
+    })
 
+</script>