Home Explore Project
Register Sign In
vue
/
Vue
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

note1 目录改到 Basic

liuyuqi-dellpc 6 years ago
parent
3bc4617cb1
commit
a6ee5ae453
9 changed files with 46 additions and 52 deletions
Split View Show Diff Stats
  1. 0 0
      Basic/监听属性/index.html
  2. 46 0
      Basic/组件/transition.html
  3. 0 0
      Basic/组件/transition/index.html
  4. 0 0
      Basic/组件/transition/index2.html
  5. 0 0
      Basic/路由/index.html
  6. 0 8
      note1/index.css
  7. 0 16
      note1/index.html
  8. 0 6
      note1/index.js
  9. 0 22
      note1/index2.html

+ 0 - 0
note1/watch/index.html → Basic/监听属性/index.html
View File


+ 46 - 0
Basic/组件/transition.html
View File 

@@ -0,0 +1,46 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+
 
+	<head>
 
+		<title></title>
 
+		<meta charset="UTF-8">
 
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 
+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
 
+		<link href="../css/style.css" rel="stylesheet"> </head>
 
+
 
+	<body>
 
+		<div id="myApp">
 
+			<!-- 简单元素 -->
 
+			<transition>
 
+				<div v-if="ok">toggled content</div>
 
+			</transition>
 
+
 
+			<!-- 动态组件 -->
 
+			<transition name="fade" mode="out-in" appear>
 
+				<component :is="view"></component>
 
+			</transition>
 
+
 
+			<!-- 事件钩子 -->
 
+			<div id="transition-demo">
 
+				<transition @after-enter="transitionComplete">
 
+					<div v-show="ok">toggled content</div>
 
+				</transition>
 
+			</div>
 
+		</div>
 
+		<script>
 
+			var myApp = new Vue({
 
+				el: '#myApp',
 
+				data: {
 
+
 
+				},
 
+				methods: {
 
+					transitionComplete: function(el) {
 
+						// 传入 'el' 这个 DOM 元素作为参数。
 
+					}
 
+				}
 
+			});
 
+			myApp.$mount('#transition-demo')
 
+		</script>
 
+	</body>
 
+
 
+</html>

+ 0 - 0
note1/transition/index.html → Basic/组件/transition/index.html
View File


+ 0 - 0
note1/transition/index2.html → Basic/组件/transition/index2.html
View File


+ 0 - 0
note1/router/index.html → Basic/路由/index.html
View File


+ 0 - 8
note1/index.css
View File 

@@ -1,8 +0,0 @@
 
-html, body {
 
-    margin: 5px;
 
-    padding: 0;
 
-}
 
-#app{
 
-    text-align: center;
 
-    padding-top: 10rem;
 
-}

+ 0 - 16
note1/index.html
View File 

@@ -1,16 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>Note1</title>
 
-    <link rel="stylesheet" href="index.css">
 
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
-</head>
 
-<body>
 
-<div id="app">
 
-    <h1>{{ message }}</h1>
 
-</div>
 
-
 
-<script src="index.js"></script>
 
-</body>
 
-</html>

+ 0 - 6
note1/index.js
View File 

@@ -1,6 +0,0 @@
 
-var app = new Vue({
 
-    el: '#app',
 
-    data: {
 
-        message: 'Hello Vue!'
 
-    }
 
-});

+ 0 - 22
note1/index2.html
View File 

@@ -1,22 +0,0 @@
 
-<!DOCTYPE html>
 
-<html>
 
-<head>
 
-<meta charset="utf-8">
 
-<title>测试</title>
 
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
-</head>
 
-<body>
 
-<div id="app">
 
-  {{ message }}
 
-</div>
 
-<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
 
-<script>
 
-new Vue({
 
-    el:'#app',
 
-    data: {
 
-        message:'Hello World!'
 
-    }
 
-});
 
-</script>
 
-</body>
 
-</html>