例子

rjomg · May 4, 2018 · 6c34062 · 6c34062
1 parent ff5fb82
commit 6c34062
Show file tree

Hide file tree

Showing 11 changed files with 3,943 additions and 0 deletions.
diff --git a/demo/4-7Vue中的作用域插槽.html b/demo/4-7Vue中的作用域插槽.html
@@ -0,0 +1,43 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Vue中的作用域插槽</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</head>
+<body>
+ <div id='app'>
+  <child>
+    <template slot-scope="props">
+      <li>{{props.item}} - hello</li>
+    </template>
+  </child>
+ </div>
+
+ <script>
+   Vue.prototype.bus = new Vue()
+
+   Vue.component('child', {
+     data: function(){
+       return {
+        list: [1, 2, 3, 4]
+       }
+     },
+     template: 
+      `<div>
+        <ul>
+          <slot v-for="item of list" :item=item>
+            {{item}}
+          </slot>
+        </ul>
+      </div>`
+   })
+
+   var vm = new Vue({
+     el: "#app",
+   })
+ </script>
+</body>
+</html> 
diff --git a/demo/4-8动态组件与v-once指令.html b/demo/4-8动态组件与v-once指令.html
@@ -0,0 +1,41 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>4.8 动态组件与v-once指令</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</head>
+<body>
+ <div id='app'>
+   <component :is="type"></component>
+  <!-- <child-one v-if="type === 'child-one'"></child-one> -->
+  <!-- <child-two v-if="type === 'child-two'"></child-two> -->
+  <button @click="handleBtnClick">change</button>
+ </div>
+
+ <script>
+   Vue.component('child-one', {
+    template: '<div v-once>Child-one</div>'
+   })
+
+   Vue.component('child-two', {
+    template: '<div v-once>Child-two</div>'
+   })
+
+
+   var vm = new Vue({
+     el: "#app",
+     data: {
+       type: 'child-one'
+     },
+     methods: {
+       handleBtnClick: function(){
+         this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
+       }
+     }
+   })
+ </script>
+</body>
+</html> 
diff --git a/demo/5-1Vue中CSS动画原理.html b/demo/5-1Vue中CSS动画原理.html
@@ -0,0 +1,40 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>5-1Vue中CSS动画原理</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <style>
+    .fade-enter, .fade-leave-to {
+      opacity: 0;
+    }
+    .fade-enter-active, .fade-leave-active {
+      transition: opacity 3s;
+    }
+  </style>
+</head>
+<body>
+  <div id='app'>
+    <transition name="fade">
+      <div v-if="show">Hello World</div>
+    </transition>
+    <button @click="handleClick">切换</button>
+  </div>
+
+  <script>
+    var vm = new Vue({
+      el: '#app',
+      data: {
+        show: true
+      },
+      methods: {
+        handleClick: function(){
+          this.show = !this.show
+        }
+      }
+    })
+  </script>
+</body>
+</html> 
diff --git a/demo/5-2Vue中使用animate.css库.html b/demo/5-2Vue中使用animate.css库.html
@@ -0,0 +1,62 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>5-2Vue中使用animate.css库</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <link rel="stylesheet" type="text/css" href="./animate.css">
+  <style>
+    .fade-enter, .fade-leave-to {
+      opacity: 0;
+    }
+    .enter, .leave {
+      transition: opacity 1s;
+    }
+  </style>
+  </style>
+</head>
+<body>
+  <div id='app'>
+    <!-- <transition name="fade"  enter-active-class="enter" leave-active-class="leave"> -->
+    <transition name="fade"  enter-active-class="animated flash" leave-active-class="animated hinge">
+      <div v-show="show"><div>Hello World</div></div>
+    </transition>
+    <button @click="handleClick">toggle</button>
+  </div>
+
+  <script>
+    var vm = new Vue({
+      el: '#app',
+      data: {
+        show: true
+      },
+      methods: {
+        handleClick: function(){
+          this.show = !this.show
+        }
+      }
+    })
+  </script>
+
+  <div id="app2">
+    <div @click="handleDivClick" :class="[activated]">Hello World</div>
+  </div>
+
+  <script>
+    var vm2 = new Vue({
+      el: "#app2",
+      data: {
+        activated: "",
+      },
+      methods: {
+        handleDivClick: function(){
+          // this.activated = this.activated === "jello animated" ? "" : "jello animated"
+          this.activated = this.activated === "animated flash" ? "" : "animated flash"         
+        }
+      }
+    })
+  </script>
+</body>
+</html>
diff --git a/demo/5-3Vue中同时使用过度和动画.html b/demo/5-3Vue中同时使用过度和动画.html
@@ -0,0 +1,43 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>5-3Vue中同时使用过度和动画</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <link rel="stylesheet" type="text/css" href="./animate.css">
+  <style>
+    .fade-enter, .fade-leave-to {
+      opacity: 0;
+    }
+    .fade-enter-active, .fade-leave-active {
+      transition: opacity 3s;
+    }
+  </style>
+  </style>
+</head>
+<body>
+  <div id='app'>
+    <!-- <transition name="fade"  enter-active-class="enter" leave-active-class="leave"> -->
+    <transition type="transition" name="fade"  enter-active-class="animated bounceInRight fade-enter-active" leave-active-class="animated hinge fade-leave-active" appear appear-active-class="animated flash" >
+      <div v-show="show"><div>Hello World</div></div>
+    </transition>
+    <button @click="handleClick">toggle</button>
+  </div>
+
+  <script>
+    var vm = new Vue({
+      el: '#app',
+      data: {
+        show: true
+      },
+      methods: {
+        handleClick: function(){
+          this.show = !this.show
+        }
+      }
+    })
+  </script>
+</body>
+</html>
diff --git a/demo/Vue中的插槽.html b/demo/Vue中的插槽.html
@@ -0,0 +1,53 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Vue中的插槽 (slot)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</head>
+<body>
+  <div id='app'>
+    <child>
+        <h1>Dell</h1>
+    </child>
+
+    <content>
+        <boby-content>
+          <div class='header' slot='header'>header</div>
+          <div class='footer' slot='footer'>footer</div>
+        </boby-content>
+    </content>
+
+  </div>
+
+  <script>
+    Vue.prototype.bus = new Vue()
+
+    Vue.component('child', {
+      props:{
+        content: String
+      },
+      template: 
+        '<div>' +
+          '<p>Hello</p>' +
+          '<slot>默认值</slot>' +
+        '</div>'
+    })
+
+    Vue.component('boby-content', {
+      template: 
+        '<div>' +
+          '<slot name="header"></slot>' +
+          '<div class="boby-content">content</div>' +
+          '<slot name="footer"></slot>' +
+        '</div>'
+    })
+
+    var vm = new Vue({
+      el: '#app',
+    })
+  </script>
+</body>
+</html>