保存进度!
This commit is contained in:
parent
af1205ffed
commit
82877012c9
|
@ -2,8 +2,8 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-11-12 23:32:20
|
* @Date: 2022-11-12 23:32:20
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-11-16 11:08:23
|
* @LastEditTime: 2022-11-22 17:15:41
|
||||||
* @FilePath: \car_dealer\css\app.css
|
* @FilePath: \vue-learning\css\app.css
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||||
|
@ -12,6 +12,10 @@
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--backupground-color);
|
background-color: var(--backupground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#root,
|
||||||
|
#app {
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
/*
|
||||||
|
* @Author: Kane
|
||||||
|
* @Date: 2022-11-12 23:22:59
|
||||||
|
* @LastEditors: Kane
|
||||||
|
* @LastEditTime: 2022-11-16 15:26:04
|
||||||
|
* @FilePath: \car_dealer\css\colors.css
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
--backupground-color: #f4f5f7ff;
|
||||||
|
--btn-color-blue: #307dbe;
|
||||||
|
--btn-color-yellow: #f7b24d;
|
||||||
|
--btn-color-green: #5bad60;
|
||||||
|
--btn-color-red: #e56651;
|
||||||
|
--btn-font-color: #fff;
|
||||||
|
|
||||||
|
--input-focus-color: #e56651;
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
@ -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
41
入门/入门.html
|
@ -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>
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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>
|
Loading…
Reference in New Issue