getting-started-with-javascript/index.html at master · kun0523/getting-started-with-javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html><!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>新生大学</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <script src="vue.min.js"></script>
  <script src="filelist.js"></script>
</head>

<body>
  <div id="app">
    <div class="main-header">
      <div class="container">
        <h1>JavaScript编程入门</h1>
      </div>
    </div>
    <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">我的心里话</h3>
          </div>
          <div class="panel-body">
            <div class="words-pannel" v-for="item in wordsList">
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object avatar" v-bind:src="item.avatar" alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">
                    {{ item.name }}
                  </h4>
                    {{ item.words }}
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</body>

</html>
<script>
  // vue官网： https://cn.vuejs.org/v2/guide/
  // 初始化Vue
  // 把收集的数据放在这里

  new Vue({
    el: '#app',   // #app 和html中div#id的 app 对应
    data: {
      wordsList: fileList()  // 变量wordsList可以在html使用
    }
  });
</script>