最近突然有点兴趣来学习 Web 前端,自身有一点点 HTML 和一丢丢的 CSS 经验,因此上手了一款学习成本低,曲线较缓的 JavaScript 前端框架入门;如标题 —— Vue.JS
通过表严肃的 Vue.JS 和 Vue Router 的快速入门教程,大概能写点东西了
如下:
index.html1 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.js1 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/ 体验到这个程序