开始学习动画

20_脚手架/vue_code/16.src_nextTick/App.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="root">
+    <div class="todo-container">
+      <div class="todo-wrap">
+        <TodoHeader @addTodo="addTodo"/>
+        <TodoList :todos="todos"/>
+        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+import TodoHeader from "./components/TodoHeader.vue";
+import TodoList from "./components/TodoList.vue";
+import TodoBottom from "./components/TodoBottom.vue";
+
+
+export default {
+  name: "App",
+  components: {
+    TodoHeader,
+    TodoList,
+    TodoBottom
+  },
+  data() {
+    return {
+      // 预置测试数据
+      todos: JSON.parse(localStorage.getItem('todos')) || []
+    }
+  },
+  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中
+  // 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件
+  methods: {
+    // 添加todo任务，绑定到TodoHeader中
+    addTodo(todoObj) {
+      this.todos.unshift(todoObj)
+    },
+
+    // 勾选和取消勾选todo任务，穿透TodoList绑定到TodoItem中
+    checkTodo(id) {
+      this.todos.forEach((todo) => {
+        if (todo.id === id) todo.done = !todo.done
+      })
+    },
+
+    // 删除单个todo任务，穿透TodoList绑定到TodoItem中
+    deleteTodo(_, id) {
+      this.todos = this.todos.filter(todo => todo.id !== id)
+    },
+
+    // 更新一个TodoItem
+    updateTodo(id, title) {
+      this.todos.forEach((todo) => {
+        if (todo.id === id) todo.title = title
+      })
+    },
+
+    // 勾选或取消勾选全部todo任务，绑定到TodoBottom中
+    checkAllTodo(done) {
+      this.todos.forEach((todo) => todo.done = done)
+    },
+
+    // 清除全部已完成的todo任务，绑定到TodoBottom中
+    clearAllTodo() {
+      this.todos = this.todos.filter((todo) => {
+        return !todo.done
+      })
+    }
+  },
+  watch: {
+    todos: {
+      deep: true,
+      handler(value) {
+        localStorage.setItem('todos', JSON.stringify(value))
+      }
+    }
+  },
+  // 生成全局事件总线
+  mounted() {
+    this.$bus.$on('checkTodo', this.checkTodo)
+    this.$bus.$on('updateTodo', this.updateTodo)
+    this.pubId = pubsub.subscribe('itemDel', this.deleteTodo)  // 使用订阅方式实现删除功能
+  },
+  // 销毁全局事件总线
+  beforeDestroy() {
+    this.$bus.$off('checkTodo')
+    this.$bus.$off('updateTodo')
+    this.pubsub.unsubscribe(this, pubId)  // 使用订阅方式实现删除功能，销毁订阅
+  }
+}
+</script>
+
+<style>
+body {
+  background: #fff;
+}
+
+.btn {
+  display: inline-block;
+  padding: 4px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #da4f49;
+  border: 1px solid #bd362f;
+}
+
+.btn-edit {
+  color: #fff;
+  background-color: skyblue;
+  border: 1px solid #82cdea;
+  margin-right: 5px;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #bd362f;
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.todo-container {
+  width: 600px;
+  margin: 0 auto;
+}
+
+.todo-container .todo-wrap {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+</style>

20_脚手架/vue_code/16.src_nextTick/main.js

@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

20_脚手架/vue_code/src/App.vue

@@ -1,145 +1,19 @@
 <template>
-  <div id="root">
+  <div>
-    <div class="todo-container">
+    <Test/>
-      <div class="todo-wrap">
-        <TodoHeader @addTodo="addTodo"/>
-        <TodoList :todos="todos"/>
-        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import pubsub from 'pubsub-js'
+import Test from "./components/Test.vue"
-import TodoHeader from "./components/TodoHeader.vue";
-import TodoList from "./components/TodoList.vue";
-import TodoBottom from "./components/TodoBottom.vue";
-
 
 export default {
   name: "App",
   components: {
-    TodoHeader,
+    Test
-    TodoList,
-    TodoBottom
   },
-  data() {
-    return {
-      // 预置测试数据
-      todos: JSON.parse(localStorage.getItem('todos')) || []
-    }
-  },
-  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中
-  // 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件
-  methods: {
-    // 添加todo任务，绑定到TodoHeader中
-    addTodo(todoObj) {
-      this.todos.unshift(todoObj)
-    },
-
-    // 勾选和取消勾选todo任务，穿透TodoList绑定到TodoItem中
-    checkTodo(id) {
-      this.todos.forEach((todo) => {
-        if (todo.id === id) todo.done = !todo.done
-      })
-    },
-
-    // 删除单个todo任务，穿透TodoList绑定到TodoItem中
-    deleteTodo(_, id) {
-      this.todos = this.todos.filter(todo => todo.id !== id)
-    },
-
-    // 更新一个TodoItem
-    updateTodo(id, title) {
-      this.todos.forEach((todo) => {
-        if (todo.id === id) todo.title = title
-      })
-    },
-
-    // 勾选或取消勾选全部todo任务，绑定到TodoBottom中
-    checkAllTodo(done) {
-      this.todos.forEach((todo) => todo.done = done)
-    },
-
-    // 清除全部已完成的todo任务，绑定到TodoBottom中
-    clearAllTodo() {
-      this.todos = this.todos.filter((todo) => {
-        return !todo.done
-      })
-    }
-  },
-  watch: {
-    todos: {
-      deep: true,
-      handler(value) {
-        localStorage.setItem('todos', JSON.stringify(value))
-      }
-    }
-  },
-  // 生成全局事件总线
-  mounted() {
-    this.$bus.$on('checkTodo', this.checkTodo)
-    this.$bus.$on('updateTodo', this.updateTodo)
-    this.pubId = pubsub.subscribe('itemDel', this.deleteTodo)  // 使用订阅方式实现删除功能
-  },
-  // 销毁全局事件总线
-  beforeDestroy() {
-    this.$bus.$off('checkTodo')
-    this.$bus.$off('updateTodo')
-    this.pubsub.unsubscribe(this, pubId)  // 使用订阅方式实现删除功能，销毁订阅
-  }
 }
 </script>
 
 <style>
-body {
-  background: #fff;
-}
-
-.btn {
-  display: inline-block;
-  padding: 4px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
-}
-
-.btn-danger {
-  color: #fff;
-  background-color: #da4f49;
-  border: 1px solid #bd362f;
-}
-
-.btn-edit {
-  color: #fff;
-  background-color: skyblue;
-  border: 1px solid #82cdea;
-  margin-right: 5px;
-}
-
-.btn-danger:hover {
-  color: #fff;
-  background-color: #bd362f;
-}
-
-.btn:focus {
-  outline: none;
-}
-
-.todo-container {
-  width: 600px;
-  margin: 0 auto;
-}
-
-.todo-container .todo-wrap {
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-}
 </style>

20_脚手架/vue_code/src/components/Test.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <button @click="isShow=!isShow">显示/隐藏</button>
+<!--  Vue默认实现动画方式  -->
+<!--  :appear="true"  -->
+    <transition appear>
+      <h1 v-show="isShow" class="come">你好啊！</h1>
+    </transition>
+<!--  自定义名称实现动画  -->
+    <transition name="hello">
+      <h1 v-show="isShow" class="come">你好啊！</h1>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Test",
+  data() {
+    return {
+      isShow: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  background-color: orange;
+  width: 300px;
+}
+
+/*Vue默认实现动画方式*/
+.v-enter-active{
+  animation: demo 0.5s linear;
+}
+.v-leave-active{
+  animation: demo 0.5s linear reverse;
+}
+
+/*自定义名称实现动画*/
+.hello-enter-active{
+  animation: demo 0.5s linear;
+}
+.hello-leave-active{
+  animation: demo 0.5s linear reverse;
+}
+
+@keyframes demo {
+  from{
+    transform: translateX(-100%);
+  }
+  to{
+    transform: translateX(0px);
+  }
+}
+</style>