Skip to content

Commit 9b9fad8

Browse files
skaqiskaqi
committed
鏈濆鏁欒偛Ace鐩存挱-鍥涙vue涓撻璇�
1 parent ee1e764 commit 9b9fad8

18 files changed

+1667
-251
lines changed

‎package-lock.json

+786-194
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
"dependencies": {
1010
"axios": "^0.19.2",
1111
"core-js": "^2.6.5",
12+
"node-sass": "^4.14.1",
1213
"vue": "^2.6.10",
1314
"vue-router": "^3.3.2"
1415
},
1516
"devDependencies": {
1617
"@vue/cli-plugin-babel": "^3.8.0",
1718
"@vue/cli-service": "^3.8.0",
18-
"vue-template-compiler": "^2.6.10"
19+
"vue-template-compiler": "^2.6.10",
20+
"sass-loader": "^8.0.0"
1921
}
2022
}

‎public/Demo/demo1.html

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<script src="jquery-2.2.2.min.js"></script>
9+
<script src="vue.min.js"></script>
10+
</head>
11+
<body>
12+
<div id="app">
13+
<!-- {{}} 插值表达式 可以在其中写上其他内容-->
14+
<!-- v-cloak -->
15+
<!-- v-text 1.会覆盖他所在标签的所有内容，2.可以直接渲染-->
16+
<!-- v-html 可以将文本渲染成html-->
17+
<!-- v-bind 对标签属性进行绑定 简写 :-->
18+
<!-- v-on 绑定事件 简写 @ -->
19+
20+
<!-- <p>{{message}}大家好才是真的好</p>
21+
<p v-text="message">他好我也好</p> -->
22+
<!-- <p v-html="htmlText" id="htmlp"></p>
23+
<p v-text="htmlText" id="textp"></p> -->
24+
<input type="button" id="btn" :value="buttonText" @click="clickiMe">
25+
</div>
26+
</body>
27+
</html>
28+
<!-- <script type="text/x-jsrender" id="jsr">
29+
<div id="app">
30+
<p>{{:userName}}</p>
31+
</div>
32+
</script> -->
33+
<script>
34+
//原生js -> Jquery -> JsRender -> vue.js
35+
//MVVM: M=> model ; V=> 视图 ; VM => ViewModel
36+
37+
var vm = new Vue({
38+
el:"#app",
39+
data:{
40+
message:"Hello World",
41+
htmlText:"<b>我是一段文本</b>",
42+
buttonText:"我是按钮"
43+
},
44+
methods: {
45+
clickiMe(){
46+
this.buttonText="我是按钮1111";
47+
}
48+
},
49+
});
50+
51+
// document.getElementById("btn").onclick = function(){
52+
// alert();
53+
// }
54+
55+
56+
57+
58+
59+
// document.getElementById("app")
60+
// var doms = document.getElementsByClassName("xxx");
61+
// var xhr
62+
// if(window.XMLHttpRequest){
63+
// xhr= new XMLHttpRequest();
64+
// }
65+
// else{
66+
// xhr =new ActiveXObject("")
67+
// }
68+
// xhr.open("GET",url);
69+
// xhr.send(data);
70+
// xhr.onreadystatechange = function(){
71+
// if(xhr.readyState == 200){
72+
// JSON.parse(xhr.responseText)
73+
// }
74+
// }
75+
// $.post(url,data,function(res){
76+
// //$("#app").append("<p>"+res.userName+"</p>");
77+
// var htmlText = $("#jsr").render(res);
78+
// $("#app").append(htmlText);
79+
// })
80+
// document.getElementById("htmlp").innerHTML="<b>我是一段文本</b>"
81+
// document.getElementById("textp").innerText="<b>我是一段文本</b>"
82+
</script>
83+
<style>
84+
[v-cloak]{
85+
display: none;
86+
}
87+
</style>

‎public/Demo/demo2.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<script src="vue.min.js"></script>
9+
<title>Document</title>
10+
</head>
11+
12+
<body>
13+
<div id="app">
14+
<p>{{score}}</p>
15+
<p>{{level}}</p>
16+
<input type="button" value="开始抽奖" @click="start()">
17+
<input type="button" value="停止" @click="stop()">
18+
</div>
19+
</body>
20+
21+
</html>
22+
<script>
23+
var vm = new Vue({
24+
el: "#app",
25+
data: {
26+
score: 0,
27+
level: null,
28+
intervalIndex:null
29+
},
30+
methods: {
31+
start() {
32+
if(this.intervalIndex == null){
33+
this.intervalIndex = setInterval(() => {
34+
//Math.random() 生成 0~1之间的随机数
35+
this.score = parseInt(Math.random() * 100);
36+
//switch语句的范围判断
37+
switch (true) {
38+
case this.score < 30:
39+
this.level = "参与奖"
40+
break;
41+
case this.score >= 30 && this.score < 65:
42+
this.level = "三等奖"
43+
break;
44+
case this.score >= 65 && this.score < 85:
45+
this.level = "二等奖"
46+
break;
47+
case this.score >= 85:
48+
this.level = "一等奖"
49+
break;
50+
}
51+
}, 50)
52+
}
53+
},
54+
stop(){
55+
clearInterval(this.intervalIndex);
56+
this.intervalIndex = null
57+
}
58+
},
59+
});
60+
</script>

‎public/Demo/demo3.html

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<script src="vue.min.js"></script>
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<!-- v-model 双向绑定 ， 只能绑定value属性-->
13+
<!-- :class 绑定样式 1.绑定数组 2. 三元表达式 3.数组嵌套 -->
14+
<!-- :style 1.键值对直接填写法 2.键值对对象符合json格式 3.多个data可以用数组接收-->
15+
<!-- v-for 以可循环四种对象 1.普通数组 2. 对象数组 3.对象 4.迭代数字 5.默认以索引绑定，需要使用key属性改变默认设置-->
16+
<!-- v-if v-show 显示/影藏 -->
17+
18+
<!-- <p :class="['backg',flag?'fontcolor':'']">{{msg}}</p> -->
19+
<!-- <p :class="['backg',{'fontcolor':flag}]">{{msg}}</p> -->
20+
21+
<!-- <p :style="[style1,style2]">{{msg}}</p>
22+
<input type="text" v-model="msg">
23+
<button @click="change">变</button> -->
24+
<!-- <div v-for="userId in userIds">{{userId}}</div> -->
25+
<!-- <div v-for="(user,i) in userList">id: {{user.id}}; 姓名: {{user.name}}; 索引: {{i}}</div> -->
26+
<!-- <div v-for="item in 10">{{item}}</div> -->
27+
<!-- <div v-for="(value, key,index) in userInfo">值：{{value}} ； 键：{{key}} ；索引：{{index}}</div> -->
28+
<!-- <select>
29+
<option v-for="(user,i) in userList" :key="user.id">{{user.name}}</option>
30+
</select>
31+
<button @click="addUser">添加人</button> -->
32+
<div v-if="isif">div1</div>
33+
<div v-show="isShow">div2</div>
34+
35+
</div>
36+
</body>
37+
</html>
38+
<script>
39+
var vm = new Vue({
40+
el:"#app",
41+
data:{
42+
msg:"Hello World",
43+
flag:false,
44+
style1:{'background-color': 'brown', color:'white'},
45+
style2:{'font-size':"18px"},
46+
userIds:[1,2,3,4,5,6],
47+
userList:[
48+
{id:1, name:"张三"},
49+
{id:2, name:"李四"},
50+
{id:3, name:"王五"},
51+
{id:4, name:"赵六"}
52+
],
53+
userInfo:{id:4, name:"赵六"},
54+
isif:true,
55+
isShow:true,
56+
},
57+
methods: {
58+
change(){
59+
this.style2['font-size'] = "22px";
60+
},
61+
addUser(){
62+
this.userList.unshift({id:5, name:"田七"})
63+
}
64+
},
65+
})
66+
</script>
67+
<style>
68+
.backg{
69+
background-color: aquamarine;
70+
}
71+
.fontcolor{
72+
color:red;
73+
}
74+
.fontcolor1{
75+
color:blue;
76+
}
77+
</style>

‎public/Demo/demo4.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<script src="vue.min.js"></script>
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<input type="text" v-model="score">
13+
<br>
14+
<input type="range" v-model= "score" min="0" :max="maxValue">
15+
<br>
16+
<select v-model="maxValue">
17+
<option value="100">100</option>
18+
<option value="1000">1000</option>
19+
<option value="10000">10000</option>
20+
</select>
21+
</div>
22+
</body>
23+
</html>
24+
<script>
25+
var vm = new Vue({
26+
el:"#app",
27+
data:{
28+
score:50,
29+
maxValue:100,
30+
}
31+
})
32+
</script>

‎public/Demo/demo5.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<script src="vue.min.js"></script>
9+
<title>Document</title>
10+
</head>
11+
12+
<body>
13+
<div id="app">
14+
<table>
15+
<tr>
16+
<td>编号</td>
17+
<td>姓名</td>
18+
<td>操作</td>
19+
</tr>
20+
<tr v-for="(user,index) in userList" :key="user.id" :class="{'oddStyle':isOdd(index)}">
21+
<td>{{user.id}}</td>
22+
<td v-text="user.name"></td>
23+
<td @click="remove(index)">删除 ---- {{index}}</td>
24+
</tr>
25+
</table>
26+
<input type="text" v-model="id">
27+
<input type="text" v-model="userName"><br>
28+
<button @click="addUser">添加</button>
29+
30+
31+
</div>
32+
</body>
33+
34+
</html>
35+
<script>
36+
var vm = new Vue({
37+
el: "#app",
38+
data: {
39+
userList: [
40+
{ id: 1, name: "张三" },
41+
{ id: 2, name: "李四" },
42+
{ id: 3, name: "王五" },
43+
{ id: 4, name: "赵六" }
44+
],
45+
id: 5,
46+
userName: ""
47+
},
48+
methods: {
49+
isOdd(index) {
50+
var res = index % 2;
51+
if (res == 1) return true;
52+
else return false;
53+
},
54+
addUser() {
55+
this.userList.push({ id: this.id++, name: this.userName })
56+
},
57+
remove(index){
58+
//this.userList.splice(index,1);
59+
delete this.userList[0];
60+
this.$forceUpdate();
61+
}
62+
},
63+
})
64+
</script>
65+
<style>
66+
table {
67+
width: 600px;
68+
border-collapse: collapse;
69+
}
70+
71+
table td {
72+
border: 1px solid #000;
73+
}
74+
75+
.oddStyle {
76+
background-color: rgb(255, 168, 168);
77+
}
78+
</style>

‎public/Demo/jquery-2.2.2.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/Demo/vue.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/imgs/icons/Logo1.png

71.1 KB
Loading

‎public/imgs/icons/Logo2.png

50.8 KB
Loading

‎public/imgs/icons/backTitle.jpg

103 KB
Loading

‎public/lib/jquery.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)