0623

YosefYuan · Jun 23, 2017 · e381eb2 · e381eb2
1 parent 0f22564
commit e381eb2
Show file tree

Hide file tree

Showing 10 changed files with 10,080 additions and 0 deletions.
diff --git a/vue.js b/vue.js
diff --git a/单元素、组件的过渡.html b/单元素、组件的过渡.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="./vue.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div id="demo">
+        <button @click="show=!show">Toggle</button>
+        <transition name="v">
+            <p v-if="show">hello</p>
+        </transition>
+    </div>
+    <script>
+        var vm = new Vue({
+            el:"#demo",
+            data:{
+                show: true
+            }
+        })
+    </script>
+    <style>
+        .v-enter-active, .v-leave-active{
+            transition: opacity .5s
+        }
+        .v-enter, .v-leave-to{
+            opacity: 0
+        }
+    </style>
+
+</body>
+</html>
diff --git a/异步更新队列.html b/异步更新队列.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="./vue.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div id="demo">
+        <example></example>
+    </div>
+    <script>
+        // Vue.component('example',{
+        //     template:`<span @click.once="updateMessage">{{ msg }}</span>`,
+        //     data () {
+        //         return {
+        //             msg: 'not updated'
+        //         }
+        //     },
+        //     methods: {
+        //         updateMessage () {
+        //             this.msg = 'updated'
+        //             console.log(this.$el.textContent)
+        //             this.$nextTick(function () {
+        //                 console.log(this.$el.textContent)
+        //             })
+        //         }
+        //     }
+        // })
+        new Vue({
+            el: "#demo",
+            components: {
+                'example':{
+                    template:`<span @click.once="updateMessage">{{ msg }}</span>`,
+                    data () {
+                        return {
+                            msg: 'not updated'
+                        }
+                    },
+                    methods: {
+                        updateMessage () {
+                            this.msg = 'updated'
+                            console.log(this.$el.textContent)
+                            this.$nextTick(function () {
+                                console.log(this.$el.textContent)
+                            })
+                        }
+                    }
+                }
+            }
+        })
+    </script>
+
+</body>
+</html>
diff --git a/組件-props.html b/組件-props.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
+	<!-- <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> -->
+	<!-- <script src="https://unpkg.com/[email protected]/lodash.min.js"></script> -->
+</head>
+<body>
+    <script>
+        Vue.component('child',{
+            props:{
+                myMsg: {
+                    type:Number
+                }
+            },
+            template:`<span>{{ myMsg }}</span>`
+        })
+    </script>
+    <div id="demo">
+        <input v-model="parentMsg">
+        <child :my-msg="parentMsg"></child>
+    </div>
+    <script>
+        new Vue({
+            el:"#demo",
+            data:{
+                parentMsg:100
+            }
+        })
+    </script>
+
+</body>
+</html>
diff --git a/組件-自定義事件.html b/組件-自定義事件.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
+	<!-- <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> -->
+	<!-- <script src="https://unpkg.com/[email protected]/lodash.min.js"></script> -->
+</head>
+<body>
+    <div id="demo">
+        <p>{{ total }}</p>
+        <btn-increment v-on:increment="incrementTotal"></btn-increment>
+        <btn-increment v-on:increment="incrementTotal"></btn-increment>
+    </div>
+    <script>
+        Vue.component('btn-increment',{
+            template:`<button v-on:click="incrementFunc">{{ counter }}</button>`,
+            data () {
+                return {
+                    counter:0
+                }
+            },
+            methods: {
+                incrementFunc () {
+                    this.counter += 1
+                    this.$emit('increment')
+                }
+            }
+        })
+        new Vue({
+            el:"#demo",
+            data:{
+                total:0
+            },
+            methods:{
+                incrementTotal () {
+                    this.total += 1
+                }
+            }
+        })
+    </script>
+</body>
+</html>
diff --git a/組件-自定義表單輸入組件.html b/組件-自定義表單輸入組件.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
+	<!-- <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> -->
+	<!-- <script src="https://unpkg.com/[email protected]/lodash.min.js"></script> -->
+</head>
+<body>
+    <div id="demo">
+        <currency-input></currency-input>
+    </div>
+    <script>
+        Vue.component('currency-input', {
+            template:`
+                <span>
+                    $
+                    <input
+                        ref="input01"
+                        v-bind:value="value"
+                        v-on:input="updateValue($event.target.value)"
+                    >
+                </span>
+            `,
+            props: ['value'],
+            methods: {
+                updateValue: function (value) {
+                    var formattedValue = value
+                        .trim()
+                        .slice(0, value.indexOf('.') + 3)
+                    if (formattedValue !== value) {
+                        this.$refs.input01.value = formattedValue
+                    }
+                    this.$emit('input')
+                }
+            }
+        })
+        new Vue({
+            el:"#demo"
+        })
+    </script>
+</body>
+</html>
diff --git a/組件-非父子组件通信.html b/組件-非父子组件通信.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="./vue.js"></script>
+	<!-- <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> -->
+	<!-- <script src="https://unpkg.com/[email protected]/lodash.min.js"></script> -->
+</head>
+<body>
+    <div id="demo">
+        <component01></component01>
+        <component02></component02>
+    </div>
+    <div id="demo2">
+        <component01></component01>
+        <component02></component02>
+    </div>
+    <script>
+        var bus = new Vue();
+
+        Vue.component('component01',{
+            template:`
+                <button>{{ name }}</button>
+            `,
+            methods:{
+                func (val) {
+                    bus.$on('test',(val)=>{alert(2)})
+                }
+            },
+            data(){
+                return {
+                    name:'btn1'
+                }
+            },
+            beforeMount(){//mounted函數亦可 參見vue生命周期图示
+                var _this = this;
+                bus.$on('test', function (val) {
+                    _this.name=val;
+                });
+            }
+        });
+
+        Vue.component('component02',{
+            template:`
+                <button v-on:click="funcEmit">btn2</button>
+            `,
+            methods:{
+                funcEmit () {
+                    bus.$emit('test',"from btn2")
+                    alert(1)
+                }
+            }
+        });
+
+        new Vue({
+            el:"#demo"
+        });
+        new Vue({
+            el:"#demo2"
+        })
+    </script>
+</body>
+</html>
diff --git a/組件.html b/組件.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
+	<!-- <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> -->
+	<!-- <script src="https://unpkg.com/[email protected]/lodash.min.js"></script> -->
+</head>
+<body>
+<script>
+    Vue.component('my-component', {
+        template: '<div>A custom component!</div>'
+    })
+</script>
+<div id="example">
+    <my-component></my-component>
+</div>
+<script>
+    var child1 = {
+        template:'<div>a child1 component!</div>'
+    }
+    var child2 = {
+        template:'<div>a child2 component!</div>'
+    }
+    window.onload =function(){
+
+        new Vue({
+            el: '#example'
+        });
+        new Vue({
+            el:"#demo",
+            components:{
+                child1,
+                child2
+            }
+        })
+    } 
+</script>
+<div id="demo">
+    <child1></child1>
+    <child2></child2>
+</div>
+</body>
+</html>
diff --git a/过渡效果-CSS 动画.html b/过渡效果-CSS 动画.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="./vue.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div id="demo">
+        <button @click="show=!show">Toggle</button>
+        <transition name="render">
+            <p v-show='show'>Hello</p>
+        </transition>
+    </div>
+    <script>
+        new Vue({
+            el:"#demo",
+            data:{
+                show:true
+            }
+        })
+    </script>
+    <style>
+        .render-enter-active, .render-leave{
+            opacity: 1;
+        }
+        .render-enter, .render-leave-active{
+            transform:translateX(10px);
+            opacity: 0;
+        }
+        .render-enter-active, .render-leave-active{
+            transition: all .5s ease;
+        }
+    </style>
+</body>
+</html>