Skip to content

Commit 583ccaf

Browse files
huang303513huang303513
committed
github提交这个demo完整正确的演示了css、html、js的正确使用
1 parent c2b1186 commit 583ccaf

File tree

7 files changed

+158
-0
lines changed

7 files changed

+158
-0
lines changed

‎vuejs练习/github提交/index.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#demo{
2+
font-family: 'Helvetica', Arial, sans-serif;
3+
}
4+
5+
a{
6+
text-decoration: none;
7+
color: #f66;
8+
}
9+
10+
li{
11+
line-height: 1.5em;
12+
margin-bottom: 20px;
13+
}
14+
15+
.author, .date{
16+
font-weight: bold;
17+
}

‎vuejs练习/github提交/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/html">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
</head>
8+
<body>
9+
<div id="demo">
10+
<h1>Latest Vue.js Commits</h1>
11+
<template v-for="branch in branches">
12+
<input type="radio" :id="branch" :value="branch" v-model="currentBranch">
13+
<label :for="branch">{{branch}}</label>
14+
</template>
15+
<p>vuejs/vue@{{currentBranch}}</p>
16+
<ul>
17+
<li v-for="record in commits">
18+
<a :href="record.html_url" target="_blank" class="commit">{{record.sha.slice(0,7)}}</a>
19+
-<span class="message">{{record.commit.message | truncate}}</span></br>
20+
by <span class="author">{{record.commit.author.name}}</span>
21+
at <span class="date">{{record.commit.author.date | formatDate}}</span>
22+
</li>
23+
</ul>
24+
</div>
25+
<script src='../vue.min.js'></script>
26+
<script src="index.js"></script>
27+
</body>
28+
</html>

‎vuejs练习/github提交/index.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha='
2+
3+
var demo = new Vue({
4+
el:"#demo",
5+
6+
data:{
7+
branches:['master','dev'],
8+
currentBranch:'master',
9+
commits:null
10+
},
11+
12+
created:function () {
13+
this.fetchData()
14+
},
15+
16+
watch:{
17+
currentBranch:'fetchData'
18+
},
19+
20+
filters:{
21+
truncate: function (v) {
22+
var newline = v.indexOf('\n');
23+
return newline > 0 ? v.slice(0,newline):v;
24+
},
25+
formatDate: function (v) {
26+
return v.replace(/T|Z/g, ' ');
27+
}
28+
},
29+
30+
methods:{
31+
fetchData:function () {
32+
var xhr = new XMLHttpRequest();
33+
var self = this;
34+
xhr.open('GET',apiURL + self.currentBranch);
35+
xhr.onload = function () {
36+
self.commits = JSON.parse(xhr.responseText);
37+
}
38+
xhr.send();
39+
}
40+
}
41+
})

‎vuejs练习/vue.min.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vuejs练习/基本使用/index.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
html,body,#editor{
2+
margin: 0;
3+
height: 100%;
4+
font-family: "Helvetica Neue", Arial, sans-serif;
5+
color: #333;
6+
}
7+
8+
textarea, #editor div{
9+
display: inline-block;
10+
width: 49%;
11+
height: 100%;
12+
vertical-align: top;
13+
-webkit-box-sizing: border-box;
14+
-moz-box-sizing: border-box;
15+
box-sizing: border-box;
16+
padding: 0 20px;
17+
}
18+
19+
textarea{
20+
border: none;
21+
border-right: 1px solid #ccc;
22+
resize: none;
23+
outline: none;
24+
background-color: #f6f6f6;
25+
font-size: 14px;
26+
font-family: 'Monaco',Courier,monospace;
27+
padding: 20px;
28+
}
29+
30+
code{
31+
color: #f66;
32+
}
33+
34+
#editor div{
35+
background-color: #00d4b4;
36+
}

‎vuejs练习/基本使用/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/html">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
7+
</head>
8+
<body>
9+
<div id="editor">
10+
<textarea v-model="input" debounce="300"></textarea>
11+
<div v-html="input | marked"></div>
12+
</div>
13+
14+
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
15+
<script src="index.js"></script>
16+
<link type="text/css" href="index.css">
17+
</body>
18+
</html>

‎vuejs练习/基本使用/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
new Vue({
2+
el: '#editor',
3+
data: {
4+
input: '# hello'
5+
},
6+
filters: {
7+
marked: marked
8+
}
9+
})

0 commit comments

Comments
 (0)