vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由

Vue.js是那么地易上手,它在提供了大量开箱即用的功能的同时也提供了良好的性能。请继续阅读以下事例及代码片段以便更加了解Vue.js。

选择一个JavaScript框架真是太难了——因为有太多的框架可以供我们使用,并且它们之间的差距并不是很明显。如果你认为生产率(“我开发起来有多快”)和性能(“我的网页性能如何”)是最重要的两点的话,就让我展示一下为什么Vue.js是一个非常可靠的构建网页以及SPA(单页Web应用)的框架吧。

1) 组件库基于HTML/CSS和JS,使其易于入门

你需要做的第一件事就是设置你的环境。Vue.js非常容易上手,并不一定需要像Webpack这样的构建工具。你所要做的就是在标签中进行导入:

首先,我们要去创建一个简单的组件。其目的是为了展示一下你写的模版和JavaScript代码是如何连接起来的。

如何去创建你的第一个组件

你有两种方式去创建一个组件,让我们先试试简单的那个方法。它只是一个HTML和JavaScript的一种简单格式的组合。

app.jsvar app = new Vue({

el: '#app', data: {

name: 'James'

}

})

app.html

Hello 

app.css#app input {  padding: 10px;  color: #121212;  font-size: 12px;

}

这几乎就是你创建第一个应用所需的全部。

如你所见,我们通过id为app的这个元素保存了模版和JavaScript之间的对应关系。然后我们仅仅提供了数据,你就能看到这些数据在你的HTML中自动绑定并渲染。

如何连接数据和其模版?

Vue.js 设计了一个双向绑定系统,这意味着你可以通过JavaScript或者模版的其中任意一种方式改变数据。让我们考虑一下上面的代码:如果你改变了输入框中的内容,它会自动地更新你在JavaScript中对应的变量。同样的,如果你在JavaScript文件中改变了数据,它会在你的模版中渲染出改变后的数值。

一种Web组件的共享方法

Vue.js 非常依赖模版声明,这能确保你的代码在第一眼看到的时候就能被理解。

它也是你可以获得的最接近 Web自定义元素标准 的模版,并且它没有繁杂的polyfill,在老式浏览器中也没有糟糕的性能。你可以在一些Web组件实现(例如 Polymer)中找到它。

2) 路由及数据管理等基本功能已被官方库支持

Vue.js包含的核心模块可以构建我们所创建的组件,但它还包括些组由Vue.js团队自己构建/维护的自定义库,例如管理路由的vue-router,管理数据的Vuex, 可以迅速创建一个新项目的脚手架vue-cli等。

如何创建一个路由

对于任何Web APP,路由都是重点之一。你可以放心的使用vue-router,可以以非常简洁的方式声明并创建所有的路由,同时只需要在组件中使用几行代码来配置动态路由的参数。import Page from './components/page';export default new VueRouter({

[

{ path: '/page/:uid', component: Page }

]

});

组件间如何通信?

Web APP中的另一个基本功能是组件之间的通信,以及管理数据的方式。

Vuex是一个受Redux和Elm架构启发而诞生的模块。它提供了一种非常清晰的方式来处理组件中的操作并将数据传递给任何受它管辖组件。const store = new Vuex.Store({  state: {

doc: null

},

mutations: {    setDocument(state, doc) {      state.doc = doc

}

},

actions: {

async queryDocument({ commit }, { customType, uid }) {

commit('setDocument', await Prismic.getByUID(customType, uid))

}

}

})

如何创建一个将Vuex和vue-router联系起来的组件

现在,是时候去让所有功能运行在一个简单的组件中了。var app = new Vue({

el: '#page,

beforeRouteUpdate(to, from, next) {

store.dispatch('queryDocument', { customType: 'homepage', uid: to.params.uid })

.then(next)

})

beforeRouteUpdate只是一个组件声明周期钩子,用于在组件切换路由之后应执行的代码。

使用vue-cli快速创建项目

vue-cli是一个命令行工具,可以使用其已经配置好的构建工具快速创建一个简单的项目。

在扩展名为.vue的文件中书写组件的方式非常好用,它允许你将HTML,CSS和JavaScript放在同一个文件中,并且确保其在正确的作用域内。

它对你写JavaScript代码也很有用,因为你可以使用像babel这样的工具来使用JS中的新语法,比如async / await。

你可以在 Vue.js官方文档 中寻找到更多帮你起步的知识。

3) 虚拟DOM技术确保页面快速渲染,进而使得加载时间变短

30KB!

Vue.js 核心模块,路由器和Vuex,Vue.js加起来通过gzip压缩后只有大约 30 KB 。

最小的占用空间也就意味着较短的加载时间,这意味着用户可以更快地使用你的Web APP,同时也可以得到更好的Google爬虫的访问速度评估值。

虚拟 DOM!

Vue.js也从ReactJS中获得了灵感,从版本2.0开始实现了虚拟 DOM技术。虚拟DOM简单来说是一种 在每次改变状态时,将其与实际DOM进行比对,同时在内存中生成DOM更新后版本的方法,因此你只需要更新你所改变的部分而不是重新渲染整个页面。

基准测试

正如以下基准测试的数据,Vue.js在各方面都提供了非常好的性能:

运行时间(毫秒) ± 标准差

内存消耗(以MB为单位)

如何管理Vue.js项目中的文件

在Prismic,我们认为Vue.js是构建复杂Web应用程序的一种非常平易近人的框架,可以通过其API很轻松地集成外部的工具。

如果您有兴趣将内容管理系统集成到你的Vue.js项目中——以便非技术的作者和文章编辑可以在他们所熟悉的环境下编辑网站的内容的话——请查看Vue.js的官方完整文档以及插件库和启动项目等。

译文出处:https://www.zcfy.cc/article/3-reasons-to-use-vue-js-in-your-next-web-project

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/507363.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是spark的惰性计算?有什么优势?_spark——spark中常说RDD,究竟RDD是什么?

本文始发于个人公众号:TechFlow,原创不易,求个关注今天是spark专题第二篇文章,我们来看spark非常重要的一个概念——RDD。在上一讲当中我们在本地安装好了spark,虽然我们只有local一个集群,但是仍然不妨碍我…

隐私计算 2.3 基于中国剩余定理的秘密共享方案

1 简介 作者:Asmuth和Bloom;时间:1983年;理念:基于中国剩余定理(CRT)。 2 具体实现 I 秘密分割算法 (1)选择nnn个整数d1,d2,…,dnd_1, d_2, \dots, d_nd1​,d2​,…,d…

服务器基线加固脚本_Linux 基线检查,安全加固脚本

#!/bin/bash# Author:韩伟# Date: 2019-12-29# 实现对用户密码策略的设定,如密码最长有效期等datedate %Y-%m-%dread -p "是否设置密码策略[y/n]:" Yif [ "$Y" "y" ];thenread -p "设置密码最多可多少天不修改:&quo…

前端websocket获取数据后需要存本地吗_是什么让我放弃了Restful API?了解清楚后我全面拥抱GraphQL!...

背景REST作为一种现代网络应用非常流行的软件架构风格,自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史。它的简单易用性,可扩展性,伸缩性受到广大Web开发者的喜爱。REST 的 API 配合JSON格式的数据交换&#xff…

隐私计算 2.4 Brickell秘密共享方案

1 简介 作者:Brickell;时间:1989年;理念:Shamir秘密共享方案的推广,由一维方程转向多维向量。 2 具体实现 I 秘密分割算法 (1)首先确定可以掌握钥匙的人数nnn,以及模数…

fabric shim安装合约_智能合约简介_智能合约开发_Hyperledger Fabric_开发指南_区块链服务 BaaS - 阿里云...

概述在 Hyperledger Fabric 中,链码(Chaincode)又称为智能合约(下文中我们统一称为链码),是用Go,node.js或Java编写的程序,主要用于操作账本上的数据。用户的应用程序通过链码与 Fabric 账本数据进行交互,交互关系如下…

子集和问题 算法_LeetCode刷题实战90:子集 II

算法的重要性,我就不多说了吧,想去大厂,就必须要经过基础知识和业务逻辑面试算法面试。所以,为了提高大家的算法能力,这个公众号后续每天带大家做一道算法题,题目就从LeetCode上面选 !今天和大家…

隐私计算 2.5 Blakley秘密共享方案

1 简介 作者:Blakley;时间:1979年;理念:基于高斯消元法。 2 具体实现 I 秘密分割算法 II 秘密重构算法 3 实例 设秘密S(3,10,5)S (3, 10, 5)S(3,10,5),n5n 5n5, t3t 3t3。 I 秘密分割 &#xff0…

webconfig的解决方案怎么添加_解决在Web.config或App.config中添加自定义配置的方法详解...

解决在Web.config或App.config中添加自定义配置的方法详解本篇文章是对在Web.config或App.config中添加自定义配置的方法进行了详细的分析介绍,需要的朋友参考下.Net中的System.Configuration命名空间为我们在web.config或者app.config中自定义配置提供了完美的支持…

conda如何升级pytorch_Google Cloud TPUs 支持 Pytorch 框架啦!

在2019年PyTorch开发者大会上,Facebook,Google和Salesforce Research联合宣布启动PyTorch-TPU项目。项目的目标是在保持PyTorch的灵活性的同时让社区尽可能容易地利用云TPU提供的高性能计算。团队创建了PyTorch/XLA这个repo,它可以让使PyTorc…

隐私计算 2.6 秘密共享的同态特性

1 秘密共享的同态性 秘密共享的同态性:秘密份额的组合等价于组合的秘密共享份额。 假设A、B两方分别有秘密SAS^ASA和SBS^BSB;他们的值被随机拆分为S1A,…,SnAS_1^A, \dots, S_n^AS1A​,…,SnA​和S1B,…,SnBS_1^B, \dots, S_n^BS1B​,…,SnB​&#xff…

chromiumwebbrowser 使用_用Tchromium替换webbrowser

用惯了EmbeddedWB,不想换,但是IE内核一直存在内存泄漏问题,没办法,只有寻找替代品了。要把用习惯的EmbeddedWB换成完全不一样的TChromium,有点挑战,特别是在资料不多,英语没过三级的情况下。未来趋势是这样…

python是在linux系统下运行的吗_Linux系统下python代码运行shell命令的方法

方法一:os.popen #!/usr/bin/python#-*- coding: UTF-8 -*- importos, sys#使用 mkdir 命令 a lsb os.popen(a,w,1)print b 方法二:os.system #!/usr/bin/python#-*- coding: UTF-8 -*- importos, sys arg0"121.429015"arg1"31.245255&q…

隐私计算 2.7 Shamir门限秘密共享的加法同态性

1 Shamir门限秘密共享的加法同态性 Shamir门限秘密共享方案具有(,)(, )(,)同态的性质,即: SASBFI(S1A,…,StA)FI(S1B,…,StB)FI(S1AS1B,…,StAStB)\begin{array}{l} S^A S^B && F_I(S_1^A, \dots, S_t^A) F_I(S_1^B, \dots, S_t^B)\\ &&a…

pageable设置size_分页工具一Pageable与Page

import org.springframework.data.domain.Pageable;import org.springframework.data.domain.Page;1.Pageable概述Page findByAge(int age, Pageable pageable);Pageable 是Spring Data库中定义的一个接口,用于构造翻页查询,是所有分页相关信息的一个抽象…

二阶龙格库塔公式推导_带你走进最美数学公式

同学们,我们先来跟老师欣赏一下数学中最优美的式子吧?是什么魔力让以上几个似乎毫不相干的数学中最特殊的数字能如此优美的写在同一个式子呢?是欧拉,是数学。0和1——老师就不用介绍啦,e是自然常数(natural constant)&…

python如何做辅助线_角平分线如何做辅助线,学霸总结了4种模型,轻松应付中考...

角平分线2大辅助线思路4种基本模型对称形思路包括3种基本模型,思想都是为了构造全等三角形,然后转换图像中的角度和线段关系。平行线思路则是为了构造一个等腰三角形,通常是为了转移线段关系。双角平分线夹角公式记住这个结论,在选…

隐私计算 2.8 Shamir门限秘密共享的乘法同态性

1 Shamir门限秘密共享的乘法同态性 Shamir门限秘密共享方案具有(,)(\times, \times)(,)同态的性质,即: SASBFI(S1A,…,StA)FI(S1B,…,StB)FI(S1A⊗S1B,…,StA⊗StB)\begin{array}{l} S^A \times S^B && F_I(S_1^A, \dots, S_t^A) \times F_I(S_…

备份数据库的expdp语句_【ORACLE语句备份】数据库表同步 ——定时任务管理器(EXPDP导出,IMPDP导入)...

1、C:\Users\Administrator>sqlplus sys/xxxxxx as sysdba;2、SQL> create directory dbbak4 as e:\app\temp4;3、SQL> grant read,write on directory dbbak4 to xxx;--xxx:源数据库用户名4、SQL> exit;5、备注:还需手动创建目录,否则报错C…

python的setting怎么找_django项目的配置文件settings.py详解

1.2.1 ABSOLUTE_URL_OVERRIDES:默认值:{} 一个字典映射“app_label_module_name”字符串到一个函数,该函数接收一个Model对象作为参数并返回它的url,这是一个安装上覆盖get_absolute_url()方法的方式 1.2.2 ADMIN_FOR:默认值&…