初步入门 Vue.JS 2

最近突然有点兴趣来学习 Web 前端,自身有一点点 HTML 和一丢丢的 CSS 经验,因此上手了一款学习成本低,曲线较缓的 JavaScript 前端框架入门;如标题 —— Vue.JS

通过表严肃的 Vue.JSVue Router 的快速入门教程,大概能写点东西了

如下:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/assets/vue.js"></script>
<script src="/assets/vue-router.js"></script>
<script defer src="/assets/main.js"></script>
<title>网络日志</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
main.js
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
61
62
63
64
65
66
67
68
69
70
71
72
73
const getFeed = {
template: `
<div>
<a href="/">Go back</a>
<p v-if="!items">Loading...</p>
<ol v-if="items">
<li v-for="item in items">
<router-link v-bind:to=" '/blog/' + item.slug">
{{ item.title }}
</router-link>
<ul>
<li v-for="tags in item.tags">
{{ tags.name }}
</li>
</ul>
<p></p>
</li>
</ol>
<br>
</div>
`,
data() {
return {
items: ''
}
},
created() {
fetch('https://moe.jimmy0w0.me/api/posts.json')
.then(res => res.json())
.then(res => this.items = res)
}
};

const readPost = {
template: `
<div>
<p v-if="!item">Loading...</p>
<div v-html=item.content></div>
<br>
<router-link to="/">Go back</router-link>
</div>
`,
data() {
return {
item: ''
}
},
created() {
fetch(`https://moe.jimmy0w0.me/api/articles/${this.$route.params.article}.json`)
.then(res => res.json())
.then(res => this.item = res)
}
}

const routes = [
{
path: '/',
component: getFeed
},
{
path: '/blog/:article',
component: readPost
}
]

const router = new VueRouter({
routes
});

const app = new Vue({
el: '#app',
router
});

你可以在 https://old.jimmy0w0.me/blog/ 体验到这个程序