- Vue.js 2 Design Patterns and Best Practices
- Paul Halliday
- 265字
- 2021-06-24 18:33:02
Mobile development
When it comes to developing mobile applications, projects such as Angular and React are great choices for developing mobile-first applications. The success of the NativeScript, React Native, and Ionic Framework projects have boosted the significant popularity of these frameworks. For instance, Ionic Framework currently has more stars than Angular on GitHub!
Vue is making waves in this area with projects such as NativeScript Vue, Weex, and Quasar Framework. All of the listed projects are relatively new, but it only takes one to truly spike the popularity of Vue in production even further. Using NativeScript Vue as an example, it only takes 43 lines of code to create a cross-platform mobile application that connects to a REST API and displays the results on screen. If you'd like to follow along with this yourself, run:
# Install the NativeScript CLI npm install nativescript -g # New NativeScript Vue project tns create NSVue --template nativescript-vue-template # Change directory cd NSVue # Run on iOS tns run ios
Then, we can place the following inside of our app/app.js:
const Vue = require('nativescript-vue/dist/index'); const http = require('http'); Vue.prototype.$http = http; new Vue({ template: ` <page>
<action-bar class="action-bar" title="Posts"></action-bar>
<stack-layout>
<list-view :items="posts">
<template scope="post">
<stack-layout class="list">
<label :text="post.title"></label>
<label :text="post.body"></label>
</stack-layout>
</template>
</list-view>
</stack-layout>
</page>
`, data: { posts: [] }, created(args) { this.getPosts(); }, methods: { getPosts() { this.$http .getJSON(`https://jsonplaceholder.typicode.com/posts`) .then(response => { this.posts = response.map( post => { return { title: post.title, body: post.body } } ) }); } } }).$start();
If we then run our code, we can see a list of posts. You'll notice that our Vue code is declarative, and we have the power of larger frameworks at our disposal with much less code:

- 通信網(wǎng)絡(luò)基礎(chǔ)與設(shè)備
- 網(wǎng)絡(luò)協(xié)議工程
- FreeSWITCH 1.2
- 物聯(lián)網(wǎng)短距離無線通信技術(shù)應(yīng)用與開發(fā)
- 網(wǎng)絡(luò)安全技術(shù)與解決方案(修訂版)
- 互聯(lián)網(wǎng)安全的40個智慧洞見:2014年中國互聯(lián)網(wǎng)安全大會文集
- 區(qū)塊鏈輕松上手:原理、源碼、搭建與應(yīng)用
- 智慧光網(wǎng)絡(luò):關(guān)鍵技術(shù)、應(yīng)用實踐和未來演進
- 網(wǎng)管工具使用與技巧大全
- Learning Storm
- 計算機網(wǎng)絡(luò)技術(shù)
- 物聯(lián)網(wǎng)基礎(chǔ)及應(yīng)用
- 走近奇妙的物聯(lián)網(wǎng)
- OSPF協(xié)議原理與功能拓展
- SD-WAN 架構(gòu)與技術(shù)