Kane/vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

保存进度！

Browse Source
This commit is contained in:
Kane Wang
2022-11-22 17:27:13 +08:00
parent af1205ffed
commit 82877012c9
9 changed files with 19384 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
入门/teleport/teleport.html Normal file
View File

@@ -0,0 +1,43 @@
<!--
* @Author: Kane
* @Date: 2022-11-22 16:46:03
* @LastEditors: Kane
* @LastEditTime: 2022-11-22 17:17:24
* @FilePath: \vue-learning\入门\teleport\teleport.html
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Teleport学习</title>
<link rel="stylesheet" href="../../css/root.css" />
<link rel="stylesheet" href="../../css/normalize.css" />
<link rel="stylesheet" href="../../css/app.css" />
</head>
<body>
<div class="content">
<div id="app">
<h1>{{title}}</h1>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.js"></script>
<script>
const app = {
data() {
return {
title: "",
};
},
methods: {},
};
const vm = Vue.createApp(app);
vm.mount("#app");
</script>
</html>

41
入门/入门.html
View File

@@ -1,41 +0,0 @@
<!--
* @Author: Kane
* @Date: 2022-05-20 10:20:42
* @LastEditors: Kane
* @LastEditTime: 2022-05-20 15:14:26
* @FilePath: \vue.js学习\入门\入门.html
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue入门</title>
<link rel="stylesheet" href="../css/root.css" />
<link rel="stylesheet" href="../css/kane.css" />
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">{{message}}</div>
</body>
<script>
const vm = Vue.createApp({
data() {
return {
message: "测试vue",
};
},
methods: {
reversedString(string) {
return string.split("").reverse().join("");
},
},
});
vm.mount("#root");
</script>
</html>

18
入门/动画/css/main.css Normal file
View File

@@ -0,0 +1,18 @@
/*
* @Author: Kane
* @Date: 2022-11-22 17:12:01
* @LastEditors: Kane
* @LastEditTime: 2022-11-22 17:24:53
* @FilePath: \vue-learning\入门\动画\css\main.css
* @Description: 列表动画的css文件
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
}

62
入门/动画/列表动画.html Normal file
View File

@@ -0,0 +1,62 @@
<!--
* @Author: Kane
* @Date: 2022-11-22 17:10:33
* @LastEditors: Kane
* @LastEditTime: 2022-11-22 17:23:34
* @FilePath: \vue-learning\入门\动画\列表动画.html
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表动画</title>
<link rel="stylesheet" href="../../css/root.css" />
<link rel="stylesheet" href="../../css/normalize.css" />
<link rel="stylesheet" href="../../css/app.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="app">
<div class="content">
<h1>{{title}}</h1>
<button type="button" @click="addItem()">添加元素</button>
<hr />
<transition-group name="list">
<div v-for="(item,key) in items" :key="key">
姓名：{{item.name}} 年龄：{{item.age}}
性别：{{item.gender}}
</div>
</transition-group>
</div>
</div>
</body>
<script src="../../js/vue/vue.global.js"></script>
<script>
const app = {
data() {
return {
title: "列表动画",
items: [
{ name: "1", age: 20, gender: "男" },
{ name: "2", age: 20, gender: "男" },
{ name: "3", age: 20, gender: "男" },
{ name: "5", age: 20, gender: "男" },
],
};
},
methods: {
addItem() {
this.items.push({ name: "老王", age: 20, gender: "男" });
},
},
};
const vm = Vue.createApp(app);
vm.mount("#app");
</script>
</html>