Vue.js

Vue.js
Vue.js logo
原作者尤雨溪
首次发布2014年2月,​10年前​(2014-02[1]
当前版本
  • 3.5.13(2024年11月15日;穩定版本)[2]
編輯維基數據鏈接
源代码库 編輯維基數據鏈接
编程语言TypeScript
平台跨平台
类型JavaScript函式庫
许可协议MIT许可证[3]
网站vuejs.org/ 编辑维基数据

Vue.js/vj/,简称Vue)是一个用于创建用户界面的开源MVVM前端JavaScript框架,也是一个创建单页应用Web应用框架[4]。Vue.js由尤雨溪创建,由他和其他活跃的核心团队成员维护[5]

2016年一项针对JavaScript框架的调查表明,Vue有着89%的开发者满意度。[6]GitHub上,该项目平均每天能收获95颗星,[6][7]为GitHub有史以来星标数第3多的项目。[8]

综述

Vue.js是一款JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。

历史

在为AngularJS工作之后,Vue的作者尤雨溪开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分,构建出一款相当轻量的框架。[9]Vue最早发布于2014年2月。作者在Hacker News、Echo JS与Reddit/r/javascript版块[10]发布了最早的版本。一天之内,Vue就登上这三个网站的首页。[11]Vue是Github上最受欢迎的开源项目之一。[12]同时,在JavaScript框架/函式库中,Vue所获得的星标数已超過React,並高于Backbone.jsAngular 2、jQuery等项目。

版本名称通常来自漫画和动畫,其中大部分属于科幻小说类型。

版本

版本 发布日期 版本名称
3.4 2023年12月28日 Slam Dunk
3.3 2023年5月11日 Rurouni Kenshin
3.2 2021年8月5日 Quintessential Quintuplets[13]
3.1 2021年6月7日 Pluto[14]
3.0 2020年9月18日 One Piece[15]
2.7 2022年7月1日 Naruto[16]
2.6 2019年2月4日 Macross[17]
2.5 2017年10月13日 Level E[18]
2.4 2017年7月13日 Kill la Kill[19]
2.3 2017年4月27日 JoJo's Bizarre Adventure[20]
2.2 2017年2月26日 Initial D[21]
2.1 2016年11月22日 Hunter X Hunter[22]
2.0 2016年9月30日 Ghost in the Shell[23]
1.0 2015年10月27日 Evangelion[24]
0.12 2015年6月12日 Dragon Ball[25]
0.11 2014年11月7日 Cowboy Bebop[26]
0.10 2014年3月23日 Blade Runner[27]
0.9 2014年2月25日 Animatrix[28]
0.8 2014年1月27日 不適用 [29]
0.7 2013年12月24日 不適用 [30]
0.6 2013年12月8日 VueJS [31]

特性

组件

组件是Vue最为强大的特性之一。为了更好地管理一个大型的应用程序,往往需要将应用切割为小而独立、具有复用性的组件。在Vue中,组件是基础HTML元素的拓展,可方便地自定义其数据与行为。[32]下方的代码是Vue组件的一个示例,渲染为一个能计算鼠标点击次数的按钮。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">我被点击了 {{ count }} 次!</button>'
})

模板

Vue使用基于HTML的模板语法,允许开发者将DOM元素与底层Vue实例中的数据相绑定。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应式系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。[33]

此外,Vue允许开发者直接使用JSX英语React (JavaScript library)#JSX语言作为组件的渲染函数,以代替模板语法。[34]以下为可计算点击次数的按钮的JSX渲染版本(需配置相应Babel编译器):

Vue.component('buttonclicked', {
  props: [ 'initial_count' ],
  data() {
    return { count: 0 };
  },
  render(h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    onclick() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

响应式设计

响应式是指MVC模型中的视图随着模型变化而变化。在Vue中,开发者只需将视图与对应的模型进行绑定,Vue便能自动观测模型的变动,并重绘视图。这一特性使得Vue的状态管理变得相当简单直观。[35]

过渡效果

Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。包括以下工具:

  • CSS过渡和动画中自动应用class;
  • 可以配合使用第三方CSS动画库,如Animate.css;
  • 在过渡钩子函数中使用JavaScript直接操作DOM;
  • 可以配合使用第三方JavaScript动画库,如Velocity.js。[36]

单文件组件(SFC)

为了更好地适应复杂的项目,Vue支持以.vue为扩展名的文件来定义一个完整组件,用以替代使用Vue.component注册组件的方式。开发者可以使用ViteWebpack等构建工具来打包单文件组件。[37]

生态系统

核心库附带由核心团队和贡献者开发的工具和库。

官方工具

  • Devtools:用于调试Vue.js应用程序的浏览器开发人员工具扩展
  • Vue CLI和Vite:用于快速开发Vue.js的标准工具
  • Vue Loader:一个webpack的加载器(loader),允许以SFC格式编写Vue组件

官方库

  • Vue Router:Vue.js的官方路由,允许开发者编写在多个视图中切换的单网页应用程序
  • Pinia和Vuex:Vue.js的状态管理库
  • Vue Server Render:Vue.js的服务器端渲染(Server Side RenderingSSR

参见

参考文献

  1. ^ First Week of Launching Vue.js. Evan You. [2017-09-19]. (原始内容存档于2019-02-05). 
  2. ^ Release 3.5.13. 2024年11月15日 [2024年11月27日]. 
  3. ^ vue/LICENSE. GitHub. [2017-04-17]. (原始内容存档于2019-03-22). 
  4. ^ Introduction — Vue.js. [2017-03-11]. (原始内容存档于2019-03-09) (英语). 
  5. ^ Meet the Team — Vue.js. vuejs.org. [2019-09-23]. (原始内容存档于2022-01-15) (英语). 
  6. ^ 6.0 6.1 State Of JavaScript Survey Results: Front-end Frameworks. [2017-03-11]. (原始内容存档于2017-04-17) (英语). 
  7. ^ Trending JavaScript Frameworks. [2017-05-18]. [永久失效連結]
  8. ^ Most Starred Repositories. GitHub. [2020-02-17]. (原始内容存档于2022-02-18). 
  9. ^ Between the Wires interview with Evan You. Between the Wires. 2016-11-03 [2017-08-26]. (原始内容存档于2017-06-03) (英语). 
  10. ^ r/javascript - Vue.js - MVVM made simple. reddit. [2019-04-17]. (原始内容存档于2021-05-06) (英语). 
  11. ^ First Week of Launching Vue.js. Evan You. [2017-03-11]. (原始内容存档于2017-04-12) (英语). 
  12. ^ GitHub 排行榜 Top 200,热门开源项目推荐 - GitHub中文社区. 2023-02-17. (原始内容存档于2023-02-17) (中文(中国大陆)). 
  13. ^ v3.2.0 Quintessential Quintuplets. GitHub. 2021-08-05 [2021-08-10]. (原始内容存档于2021-08-10). 
  14. ^ v3.1.0 Pluto. GitHub. 2021-06-07 [2021-07-18]. (原始内容存档于2021-07-18). 
  15. ^ v3.0.0 One Piece. GitHub. 2020-09-18 [2020-09-23]. (原始内容存档于2020-09-19). 
  16. ^ v2.7.0 Naruto. GitHub. 2022-07-01 [2022-07-01]. (原始内容存档于2022-07-01). 
  17. ^ v2.6.0 Macross. GitHub. 2019-02-04 [2020-09-23]. (原始内容存档于2020-11-11). 
  18. ^ v2.5.0 Level E. GitHub. 2017-10-13 [2020-09-23]. (原始内容存档于2020-09-18). 
  19. ^ v2.4.0 Kill la Kill. GitHub. 2017-07-13 [2020-09-23]. (原始内容存档于2020-11-09). 
  20. ^ v2.3.0 JoJo's Bizarre Adventure. GitHub. 2017-04-27 [2020-09-23]. (原始内容存档于2020-11-11). 
  21. ^ v2.2.0 Initial D. GitHub. 2017-02-26 [2020-09-23]. (原始内容存档于2021-04-13). 
  22. ^ v2.1.0 Hunter X Hunter. GitHub. 2016-11-22 [2020-09-23]. (原始内容存档于2020-11-08). 
  23. ^ v2.0.0 Ghost in the Shell. GitHub. 2016-09-30 [2020-09-23]. (原始内容存档于2020-10-27). 
  24. ^ 1.0.0 Evangelion. GitHub. 2015-10-27 [2020-09-23]. (原始内容存档于2021-04-13). 
  25. ^ 0.12.0: Dragon Ball. GitHub. 2015-06-12 [2020-09-23]. (原始内容存档于2021-04-13). 
  26. ^ v0.11.0: Cowboy Bebop. GitHub. 2014-11-07 [2020-09-23]. (原始内容存档于2021-04-13). 
  27. ^ v0.10.0: Blade Runner. GitHub. 2014-03-23 [2020-09-23]. (原始内容存档于2021-04-13). 
  28. ^ v0.9.0: Animatrix. GitHub. 2014-02-25 [2020-09-23]. (原始内容存档于2021-04-13). 
  29. ^ v0.8.0. GitHub. 2014-01-27 [2020-09-23]. (原始内容存档于2021-04-13). 
  30. ^ v0.7.0. GitHub. 2013-12-24 [2020-09-23]. (原始内容存档于2021-04-13). 
  31. ^ 0.6.0: VueJS. GitHub. 2013-12-08 [2020-09-23]. (原始内容存档于2021-04-13). 
  32. ^ Components — Vue.js. [2017-03-11]. (原始内容存档于2021-06-06) (英语). 
  33. ^ 模板语法 - Vue.js. [2017-09-19]. (原始内容存档于2022-05-05) (中文(中国大陆)). 
  34. ^ Template Syntax — Vue.js. [2017-03-11]. (原始内容存档于2021-11-04) (英语). 
  35. ^ Reactivity in Depth — Vue.js. [2017-03-11]. (原始内容存档于2021-05-06) (英语). 
  36. ^ 进入/离开 & 列表过渡 - Vue.js. [2017-09-19]. (原始内容存档于2022-04-03) (中文(中国大陆)). 
  37. ^ 单文件组件 - Vue.js. [2017-09-19]. (原始内容存档于2022-04-03) (中文(中国大陆)). 

外部链接

Read other articles:

Artikel ini sebatang kara, artinya tidak ada artikel lain yang memiliki pranala balik ke halaman ini.Bantulah menambah pranala ke artikel ini dari artikel yang berhubungan atau coba peralatan pencari pranala.Tag ini diberikan pada Oktober 2022. Logo Kompetisi INCREFEST Industry Creative Festival (INCREFEST) adalah merupakan sebuah kompetisi bidang Teknologi Informasi Komunikasi (TIK) yang digagas oleh Direktorat Elektronika dan Telematika, Direktorat Jenderal IUBTT Kementerian Perindustrian (...

 

American digital streaming subscription service Dove ChannelIndustryEntertainmentFoundedSeptember 2015HeadquartersLos Angeles, California, U.S.Area servedNorth AmericaServicesdigital streamingNumber of employees20ParentCineverseWebsitewww.dovechannel.com Dove Channel is a direct-to-consumer, over-the-top digital streaming subscription service. Dove Channel offers a library of family-friendly and Christian-based programming.[1][2] The channel is a partnership between Cineverse ...

 

Penghargaan FFI untuk Penyutradaraan TerbaikDeskripsiPenyutradaraan (Sutradara) Terbaik tahun iniNegaraIndonesiaDipersembahkan olehFestival Film IndonesiaDiberikan perdana1955Pemegang gelar saat iniJeremias Nyangoen untuk Women from Rote Island (2023) Penghargaan Sutradara Terbaik diberikan dalam Festival Film Indonesia yang diselenggarakan sejak tahun 1955. Di bawah ini adalah daftar penerima penghargaan sutradara terbaik dalam Festival Film Indonesia sejak tahun 1955. Mulai tahun 1979, nama...

Nikte redirects here. For the district headquarters of Lower Siang district, Arunachal Pradesh, India, see Lower Siang district. 2009 Mexican filmNiktéDirected byRicardo ArnaizWritten byAntonio GarciOmar MustreProduced bySoco AguilarStarringSherlynPierre AngeloPedro Armendáriz JrAlex LoraMaya ZapataRegina OrozcoJorge ArvizuSilverio PalaciosRegina TornéEnrique GarayEdited byRicardo ArnaizGabriel VillarMusic byGabriel VillarProductioncompanyAnimex ProduccionesDistributed byUniversal Pictures...

 

Agent pathogèneLe champignon Hortaea-werneckii, cause de la teigne noire (Tinea-nigra).Sous-classe desource de risque, Agent (Médecine) A pour effetmaladie Affecteplante, animal  Un agent pathogène est un facteur biologique capable d'engendrer une lésion ou de causer une maladie, aussi bien chez les humains que chez les animaux ou chez les plantes. On peut les regrouper en bactéries, virus, parasites et champignons[1], auxquels on adjoint parfois les prions[2]. Référence...

 

† Человек прямоходящий Научная классификация Домен:ЭукариотыЦарство:ЖивотныеПодцарство:ЭуметазоиБез ранга:Двусторонне-симметричныеБез ранга:ВторичноротыеТип:ХордовыеПодтип:ПозвоночныеИнфратип:ЧелюстноротыеНадкласс:ЧетвероногиеКлада:АмниотыКлада:Синапсиды�...

National civil order of Portugal For the Ukrainian order of the similar name, see Order of Liberty (Ukraine). Order of LibertyOrdem da Liberdade Star of The Order of LibertyAwarded by Portuguese RepublicTypeOrderEstablished1976EligibilityPortuguese and foreign citizens; military or civilianAwarded forDistinguished and important services rendered to the cause of democracy and freedom.[1]StatusCurrently constitutedGrand MasterPresident of the Portuguese RepublicChancellorManuela Ferreir...

 

Recipient of the Victoria Cross Cecil D'ArcyUlundi burningBorn11 August 1850 (1850-08-11)Wanganui, New ZealandDied1881 (aged 30/31)Amatola Forest Cape Colony (now South Africa)BuriedKing William's Town cemeteryAllegianceCape ColonyService/branchSouth African ForcesRankCaptainUnitCape Frontier Light HorseBattles/wars Anglo-Zulu War Battle of Ulundi Battle of Kambula Basuto Gun War AwardsVictoria Cross Henry Cecil Dudgeon D'Arcy VC (11 August 1850 – 1881) was a New Zealand-born recipient...

 

HariaLeawaka AmapatiNegeriNegara IndonesiaProvinsiMalukuKabupatenMaluku TengahKecamatanSaparuaKodepos97584Luas12,93 km²Jumlah penduduk7.374 jiwaKepadatan570,30 jiwa/km²RajaN.J Sahuleka Haria adalah salah satu dari tujuh negeri yang termasuk ke dalam wilayah kecamatan Saparua, Maluku Tengah, Maluku, Indonesia.[1] Negeri Haria juga merupakan tempat kelahiran dari seorang pejuang pra-kemerdekaan Indonesia Thomas Matulessy dan tempat asal dari Presiden Ke-8 Negara Federasi Mikrones...

Questa voce sull'argomento calciatori olandesi è solo un abbozzo. Contribuisci a migliorarla secondo le convenzioni di Wikipedia. Segui i suggerimenti del progetto di riferimento. Elson Hooi Hooi nel 2018. Nazionalità  Curaçao Altezza 169 cm Calcio Ruolo Attaccante Squadra svincolato CarrieraGiovanili ????-2007 Willemstad2007-2012 NAC BredaSquadre di club1 2012-2015 NAC Breda62 (8)2015→  Viborg11 (1)2015-2016 NAC Breda13 (1)2016→  Volendam14 (3)...

 

西維珍尼亞 美國联邦州State of West Virginia 州旗州徽綽號:豪华之州地图中高亮部分为西維珍尼亞坐标:37°10'N-40°40'N, 77°40'W-82°40'W国家 美國加入聯邦1863年6月20日(第35个加入联邦)首府(最大城市)查爾斯頓政府 • 州长(英语:List of Governors of {{{Name}}}]]) • 副州长(英语:List of lieutenant governors of {{{Name}}}]])吉姆·賈斯蒂斯(R)米奇·卡邁克爾(...

 

This article needs additional citations for verification. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed.Find sources: Miramar, Havana – news · newspapers · books · scholar · JSTOR (January 2021) (Learn how and when to remove this message) District of Havana in CubaMiramar DistrictDistrict of Havana Distrito del MiramarAvenida de las Americas / Carretera a el Aeropuerto Interna...

هنودمعلومات عامةنسبة التسمية الهند التعداد الكليالتعداد قرابة 1.21 مليار[1][2]تعداد الهند عام 2011ق. 1.32 مليار[3]تقديرات عام 2017ق. 30.8 مليون[4]مناطق الوجود المميزةبلد الأصل الهند البلد الهند  الهند نيبال 4,000,000[5] الولايات المتحدة 3,982,398[6] الإمار...

 

Частина серії проФілософіяLeft to right: Plato, Kant, Nietzsche, Buddha, Confucius, AverroesПлатонКантНіцшеБуддаКонфуційАверроес Філософи Епістемологи Естетики Етики Логіки Метафізики Соціально-політичні філософи Традиції Аналітична Арістотелівська Африканська Близькосхідна іранська Буддій�...

 

American physicist (1917–2000) Herman FeshbachBorn2 February 1917New York City, U.S.Died22 December 2000 (aged 83)Cambridge, Massachusetts, U.S.Alma materCity College of New York, Massachusetts Institute of TechnologyKnown forFeshbach resonanceAwardsGuggenheim Fellowship, National Medal of Science, Tom W. Bonner Prize in Nuclear Physics, Fellow of the American Physical SocietyScientific careerInstitutionsMassachusetts Institute of TechnologyThesisThe theory of hydrogen three ...

سفارة البرتغال في اليابان البرتغال اليابان   الإحداثيات 35°41′08″N 139°44′21″E / 35.685602°N 139.7391°E / 35.685602; 139.7391 البلد اليابان  المكان طوكيو الاختصاص اليابان  تعديل مصدري - تعديل   سفارة البرتغال في اليابان هي أرفع تمثيل دبلوماسي[1] لدولة البرتغال لدى الياب...

 

United States historic placeLa Casa BlancaU.S. National Register of Historic Places La Casa Blanca in 1991.Location17 José I. Quintón Street Coamo, Puerto RicoCoordinates18°4′48″N 66°21′22″W / 18.08000°N 66.35611°W / 18.08000; -66.35611Built1865ArchitectRaymundo CamprubiArchitectural styleCriolloNRHP reference No.92000379Added to NRHPApril 28, 1992 La Casa Blanca (Spanish for 'white house'), also known as the Efrén Bernier Residence,[1...

 

Good-Feel Co., Ltd.JenisPrivateIndustriVideo game developer[1]Didirikan10 Maret 2005; 19 tahun lalu (2005-03-10)Kantor pusatKobe, Hyogo, JepangCabang2Tokoh kunciShigeharu Umezaki, PresidentEtsunobu Ebisu, Managing DirectorIsono Yoshikazu, DirectorProdukPermainan videoKaryawan96 (2017)Situs webwww.good-feel.co.jp Good-Feel Co., Ltd. (株式会社グッド・フィールcode: ja is deprecated , Kabushiki-Gaisha Guddo Fīru) adalah sebuah perusahaan pengembangan permainan video asal...

17th-century warship of the English Navy For other ships with the same name, see Sovereign of the Seas, HMS Royal Sovereign, and HMS Sovereign. 'The true portrait of His Majesty's royal ship the Sovereign of the Seas', a contemporaneous engraving by J. Payne History England NameSovereign of the Seas BuilderPeter Pett, Woolwich Dockyard Launched13 October 1637 Renamed Sovereign, 1651 Royal Sovereign, 1660 FateBurnt, 1697 Notes Participated in: Battle of Kentish Knock Battle of Beachy Head Batt...

 

Amphora showing Dionysos and bystanders (Rijksmuseum van Oudheden, the Netherlands). The Painter of Berlin 1686 was a Greek black-figure vase-painter from Athens who was active from about 550 to 530 BC. Like many other Greek vase painters his real name is unknown, but John Beazley named him after his Amphora F 1686 in the Antikensammlung Berlin.[1] Consistent individual characteristics of style suggest the existence of a unique artistic personality. Beazley called him the Painter of B...