Frames

test1

0
1
2
3
1<template>
2 <div id="wrapper" class="container-fluid">
3
4 <div class="container">
5 <div class="row">
6 <div class="col-3">
7 <div class="dropdown">
8 <button class="btn btn-secondary dropdown-toggle"
9 type="button" id="dropdownMenu2" data-toggle="dropdown"
10 aria-haspopup="true" aria-expanded="false"
11 style="background-color: #F1F1F1; color: #070000;"
12
13 >
14 Applications
15 </button>
16 <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
17 <button class="dropdown-item" type="button" href="#" @click="navigate('/demo1')">Fetch data</button>
18 <button class="dropdown-item" type="button" href="#" @click="navigate('/demo2')">Todo List</button>
19 <button class="dropdown-item" type="button" href="#" @click="navigate('/demo3')">Celsius to fahrenheit</button>
20 <button disabled class="dropdown-item" type="button">Something else here</button>
21 </div>
22
23 </div>
24 </div>
25 <div class="col-6">
26
27 <!-- <a class="nav-link" href="#" @click="navigate('/')">Demo1</a> -->
28
29
30 <!--{ use v-for to get list, also use v-model to double bind -->
31 <div class="fetch">
32
33 <h2>Latest Fastai Github Commits</h2>
34
35 <template v-for="branch in branches">
36 <input type="radio" :value="branch" v-model="currentBranch">
37 {{ branch }}
38 </template>
39
40 <p>fastai@{{ currentBranch }}</p>
41 <p>
42 Donec sit amet tellus lectus. Mauris a nisl at urna vestibulum suscipit sed non felis. Suspendisse facilisis, augue facilisis commodo pulvinar, odio velit aliquam erat, vitae fermentum sem ligula vel erat. Donec eu urna sed tellus molestie iaculis. Suspendisse urna velit, rhoncus non dictum sit amet, tempor quis neque.
43 </p>
44 <ul>
45 <li v-for="record in commits">
46 <a :href="record.html_url" target="_blank"
47 class="commit">更新紀錄</a>
48 -
49 by
50 <span class="author">
51 <a :href="record.author.html_url"
52 target="_blank">
53 {{ record.commit.author.name }}</a>
54 </span>
55 at
56 <span class="date">{{ record.commit.author.date | formatDate }}</span>
57 </li>
58 </ul>
59 </div>
60
61 <br>
62
63 </div>
64 </div>
65<!-- end -->
66</div>
67
68 </div>
69</template>
70
71<script>
72var apiKey = "https://api.github.com/repos/fastai/fastai/commits?per_page=5&sha=";
73//
74export default {
75 // name of this vue component
76 name: "demo1",
77
78 // data need to use function
79 data() {
80 return {
81 branches: ["master", "fp16","revert-2070-index_row","release-1.0.52"],
82 currentBranch: "master",
83 };
84 },
85
86// data, computed, methods, watch/event callbacks has finished processing
87// the mounting phase has not been started,
88// and the $el property will not be available yet.
89// 通常在這個階段去用api get data
90 created: function() {
91 this.fetchData();
92 },
93
94 watch: {
95 currentBranch: "fetchData"
96 },
97
98 methods: {
99
100 navigate(route){
101 this.$router.push(route)
102 },
103
104 fetchData() {
105 var xhr = new XMLHttpRequest();
106 var self = this;
107 xhr.open("GET", apiKey + self.currentBranch);
108 xhr.onload = function() {
109 self.commits = JSON.parse(xhr.responseText);
110 console.log(self.commits[0].html_url);
111 };
112 xhr.send();
113 },
114 },
115
116
117
118
119 filters: {
120
121 formatDate(v){
122 return v.replace(/T|Z/g," ")
123 },
124
125 capitalize (value) {
126 if (!value) return "";
127 value = value.toString();
128 return value.charAt(0).toUpperCase() + value.slice(1);
129 }
130 }
131};
132
133
134
135
136</script>
137
138
139<style>
140
141/* use this google font */
142@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
143
144/* when li have class avtive, line-through */
145li.active {
146 text-decoration: line-through;
147}
148
149.fetch {
150 margin-top:40px;
151}
152
153
154</style>
155
Watch expressions
var1:!23