Vue.js

Vue.js

Nguyên tác giả	Vưu vũ khê
Khai phá giả	Vưu vũ khê cùng trung tâm đoàn đội
Mới bắt đầu phiên bản	2014 năm 2 nguyệt(2014-02)
Mới nhất tuyên bố	3.4.31/ 2024 năm 6 nguyệt 28 hào(2024-06-28)
Thể thức ngôn ngữ	TypeScript
Ngôi cao	Web platform
Hồ sơ đại tế	33.9 KBmin+gzip
Phần mềm phân loại	JavaScript hàm thức kho
Cho phép hiệp nghị	MIT trao quyền điều khoản
Kho	github/vuejs/core

Vue.js( thông thường tên gọi tắt vìVue;Đọc làm “view”) hệ một cái khai nguyên kháiMô hình - đồ thị hình chiếu - đồ thị hình chiếu mô hìnhĐằng trướcJavaScript dàn giáo,Dùng lê xây dựngNgười dùng giao diệnCùngĐơn trang ứng dụng thể thức.Cừ từ vưu vũ khê sáng tạo, cũng từ cừ cùng trung tâm đoàn đội khái mặt khác sinh động thành viên giữ gìn.

Tường thuật tóm lược

Vue.js khái đặc sắc hệ chọn dùng tiến dần thức giá cấu, trọng điểm phóng tịch thanh minh thức nhuộm đẫm cùng lắp ráp tổ hợp. Trung tâm kho chỉ chuyên chú tịch đồ thị hình chiếu tầng.Phức tạp ứng dụng sở cần khái tiến giai công năng, tỷ như lộ từ, trạng thái quản lý cùng xây dựng công cụ, đều hệ xuyên thấu qua phía chính phủ giữ gìn khái chi viện kho cùng bộ kiện cung cấp.

Vue.js cho phép sử dụng HTML thuộc tính mở rộng HTML, đâu 啲 thuộc tính gọi là mệnh lệnh.Mệnh lệnh vì HTMLỨng dụng thể thứcCung cấp công năng, có thể hệ nội trí hoặc là người dùng tự định nghĩa khái.

Lịch sử

Vue hệ vưu vũ khê tịchGoogleTrong lúc công tác sử dụngAngularJSLàm mấy cái hạng mục lúc sau sáng tạo khái. Cừ sau lại tổng kết tả chính mình khái ý nghĩ: “Ta thẩm, nếu ta có thể đem ta thật hệ chung ý khái Angular bộ phận rút ra lê, chỉnh một 啲 thật hệ nhẹ lượng khái dã, sẽ điểm đâu?”Hạng mục khái cái thứ nhất nguyên số hiệu đệ trình ngày hệ 2013 năm 7 nguyệt, Vue tịch cách năm 2 nguyệt lần đầu công khai tuyên bố.

Phiên bản tên thông thường nguyên tựTruyện tranhCùngĐộng họa.

Phiên bản

Phiên bản	Tuyên bố ngày	Tiêu đề	LTS kết thúc ngày	Ngưng hẳn chi viện ngày
3.4	000000002023-12-28-00002023 năm 12 nguyệt 28 hào	SLAMDUNK
3.3	000000002023-05-11-00002023 năm 5 nguyệt 11 hào	Lãng khách kiếm tâm
3.2	000000002021-08-05-00002021 năm 8 nguyệt 5 hào	Ngũ đẳng phân tân nương
3.1	000000002021-06-07-00002021 năm 6 nguyệt 7 hào	Minh Vương
3.0	000000002020-09-18-00002020 năm 9 nguyệt 18 hào	Hải tặc vương
2.7	000000002022-07-01-00002022 năm 7 nguyệt 1 hào	Naruto	000000002023-12-31-00002023 năm 12 nguyệt 31 hào	000000002023-12-31-00002023 năm 12 nguyệt 31 hào
2.6	000000002019-02-04-00002019 năm 2 nguyệt 4 hào	Siêu thời không pháo đài	000000002022-03-18-00002022 năm 3 nguyệt 18 hào	000000002023-09-18-00002023 năm 9 nguyệt 18 hào
2.5	000000002017-10-13-00002017 năm 10 nguyệt 13 hào	E ban
2.4	000000002017-07-13-00002017 năm 7 nguyệt 13 hào	Trảm phục thiếu nữ
2.3	000000002017-04-27-00002017 năm 4 nguyệt 27 hào	JoJo khái kỳ diệu mạo hiểm
2.2	000000002017-02-26-00002017 năm 2 nguyệt 26 hào	Đầu văn tự D
2.1	000000002016-11-22-00002016 năm 11 nguyệt số 22	Thợ săn
2.0	000000002016-09-30-00002016 năm 9 nguyệt 30 hào	Công xác cơ động đội
1.0	000000002015-10-27-00002015 năm 10 nguyệt 27 hào	Tân thế kỷ phúc âm chiến sĩ
0.12	000000002015-06-12-00002015 năm 6 nguyệt 12 hào	Long châu
0.11	000000002014-11-07-00002014 năm 11 nguyệt 7 hào	Tinh tế cao bồi
0.10	000000002014-03-23-00002014 năm 3 nguyệt 23 hào	Bạc cánh sát thủ
0.9	000000002014-02-25-00002014 năm 2 nguyệt 25 hào	Động họa Ma trận
0.8	000000002014-01-27-00002014 năm 1 nguyệt 27 hào	Ngô áp dụng	Lần đầu công khai tuyên bố khái phiên bản
0.7	000000002013-12-24-00002013 năm 12 nguyệt 24 hào	Ngô áp dụng
0.6	000000002013-12-08-00002013 năm 12 nguyệt 8 hào	VueJS

Đương tuyên bố tân khái chủ yếu phiên bản ( tức v3.y.z ) khi, thượng một cái thứ yếu phiên bản ( tức 2.x.y ) sẽ trở thành LTS phiên bản, duy trì 18 tháng ( tu chỉnh sai lầm cùng an toàn lỗ hổng ), lúc sau lại duy trì 18 tháng khái giữ gìn hình thức ( chỉ chữa trị an toàn lỗ hổng ).

Chủ yếu ứng dụng cùng trường hợp

Vue.js tịch ngô cùng lĩnh vực đều có rộng khắp ứng dụng, dưới hệ một 啲 nổi danh sử dụng Vue.js khái ứng dụng hoặc là trang web, thuyết minh kỳ thật tế ứng dụng tình huống cùng hiệu quả:

• Grammarly– một cái dùng với ngữ pháp kiểm tra cùng viết làm phụ trợ khái công cụ, Grammarly sử dụng Vue.js tới xây dựng này người dùng giao diện, cung cấp tức thời khái ngữ pháp kiến nghị cùng cải tiến kiến nghị.

• Alibaba– Trung Quốc lớn nhất khái điện thương ngôi cao chi nhất, Alibaba tịch này bên trong hạng mục cùng bộ phận đằng trước hệ thống trung sử dụng Vue.js, tăng lên tả khai phá hiệu suất cùng người dùng thể nghiệm.

• GitLab– một cái vì thể thức mã kho hàng cung cấp phiên bản khống chế khái ngôi cao, GitLab sử dụng Vue.js tới thực hiện này bộ phận đằng trước công năng, đề cao tả hệ thống khái hỗ động tính cùng người dùng giao diện khái lưu sướng độ.

• Xiaomi– Trung Quốc nổi danh khái sản phẩm điện tử công ty, Xiaomi tịch này bộ phận trang web ứng dụng trung sử dụng Vue.js, cung cấp tả nhanh chóng cùng linh hoạt khái người dùng thể nghiệm.

• Laravel Spark– một cái vì Laravel dàn giáo cung cấp SaaS ứng dụng nhanh chóng khởi động công cụ, Spark sử dụng Vue.js làm này đằng trước dàn giáo, lệnh khai phá giả có thể càng mau xây dựng phức tạp khái ứng dụng.

Đâu 啲 ứng dụng triển lãm tả Vue.js tịch thực tế hạng mục trung khái linh hoạt tính cùng hiệu suất cao tính, cũng phản ánh ra Vue.js tịch đại hình hạng mục cùng cao lưu lượng trang web trung khái ổn định biểu hiện.

Đặc tính

Lắp ráp

Vue lắp ráp mở rộng tả cơ bản kháiHTML nguyên tố,Dùng lê phong trang nhưng trọng dụng khái số hiệu. Đơn giản lê giảng, lắp ráp liền hệ có chứa dự định nghĩa lựa chọn khái Vue ví dụ thực tế. Phía dưới đâu đoạn số hiệu hệ một cái Vue lắp ráp khái ví dụ. Đâu cái lắp ráp biểu hiện một cái cái nút, cũng đóng dấu ra cái nút bị điểm đánh khái số lần:

<template>
<divid="tuto">
<button-clickedv-bind:initial-count="0"></button-clicked>
</div>
</template>

<script>
Vue.component('button-clicked',{
props:['initialCount'],
data:()=>({
count:0,
}),
template:'<button v-on:click= "onClick" > khấm tả {{ count }} thứ </button>',
computed:{
countTimesTwo(){
returnthis.count*2;
}
},
watch:{
count(newValue,oldValue){
console.log(`count khái giá trị từ${oldValue}Sửa vì${newValue}.`);
}
},
methods:{
onClick(){
this.count+=1;
}
},
mounted(){
this.count=this.initialCount;
}
});

newVue({
el:'#tuto',
});
</script>

Khuôn mẫu

Vue sử dụng lấyHTMLLàm cơ sở khái khuôn mẫu ngữ pháp, cho phép đem nhuộm đẫm kháiDOMTrói định đến tầng dưới chót Vue ví dụ thực tế khái số liệu. Sở hữu Vue khuôn mẫu đều hệ hữu hiệu khái HTML, có thể tí phù hợp quy phạm khái trình duyệt cùng HTMLPhân tích khíPhân tích. Vue đem khuôn mẫu biên dịch thànhGiả thuyết DOMNhuộm đẫm hàm số. Giả thuyết hồ sơ đối tượng mô hình ( hoặc là kêu “DOM” ) cho phép Vue tịch đổi mới trình duyệt phía trước, tịch cừ khái ký ức thể trung nhuộm đẫm lắp ráp. Kết hợp phản ứng hệ thống, Vue có thể tính toán ra yêu cầu một lần nữa nhuộm đẫm khái ít nhất lắp ráp số lượng, cũng tịch ứng dụng trạng thái thay đổi khi ứng dụng ít nhất khái DOM thao tác. Vue người dùng có thể sử dụng khuôn mẫu ngữ pháp, hoặc là nhặt dùng hyperscript trực tiếp viết nhuộm đẫm hàm số, có thể thông qua hàm số thuyên chuyển hoặc là dùngJSX.Nhuộm đẫm hàm số cho phép ứng dụng trình tự từPhần mềm lắp rápXây dựng.

Reactivity

Vue có một cái sử dụng bình thườngJavaScriptĐồ vật cùng ưu hoá trọng nhuộm đẫm khái phản ứng hệ thống. Mỗi cái lắp ráp tịch nhuộm đẫm khái thời điểm sẽ truy tung này phản ứng tính ỷ lại, cho nên hệ thống có thể chuẩn xác biết bao lâu trọng nhuộm đẫm, cùng chôn biên 啲 lắp ráp muốn trọng nhuộm đẫm.

Transitions

Vue cung cấp nhiều loại phương pháp đi ứng dụng quá độ hiệu quả, đương hạng mục cắm vào, đổi mới hoặc là tịchDOMTrung di trừ khái thời điểm. Đâu 啲 công cụ bao gồm:

• Tự động ứng dụngCSSQuá độ cùng động họa khái class
• Tổng thể kẻ thứ ba CSS động họa kho, tỷ như Animate.css
• Dùng JavaScript tịch quá độ móc trong lúc trực tiếp thao tác DOM
• Tổng thể kẻ thứ ba JavaScript động họa kho, tỷ nhưVelocity.js

Đương một cái bao vây tịch quá độ lắp ráp khái nguyên tố bị cắm vào hoặc là di trừ khi, sẽ phát sinh dưới tình huống:

1. Vue sẽ tự động kiểm tra đo lường mục tiêu nguyên tố có mão ứng dụng CSS quá độ hoặc là động họa. Nếu có, CSS quá độ loại sẽ tịch thích hợp khái thời gian điểm bị tăng thêm hoặc là di trừ.
2. Nếu quá độ lắp ráp cung cấp tả JavaScript móc, đâu 啲 móc sẽ tịch thích hợp khái thời gian điểm bị thuyên chuyển.
3. Nếu mão kiểm tra đo lường đến CSS quá độ / động họa cùng mão cung cấp JavaScript móc, cắm vào cùng / hoặc là di trừ khái DOM thao tác sẽ tịch tiếp theo bức lập tức chấp hành.

Routing

single-page application(SPA) khái truyền thống hoàn cảnh xấu hệ mão biện pháp chia sẻ chỉ hướng riêng trang web nội "Tử" giao diện khái liên kết. Bởi vì SPA chỉ hướng người dùng cung cấp một cái dựa vào URL khái hầu phục khí hưởng ứng ( thông thường hệ cung cấp index.html hoặc index.vue ), cho nên thông thường hảo khó hoặc là ngô khả năng thẻ kẹp sách mỗ 啲 hình ảnh hoặc là chia sẻ liên kết đi riêng bộ phận. Vì tả giải quyết đâu cái vấn đề, thật nhiều bản cài đặt bộ định tuyến dùng "hashbang"(#!) phân cách này động thái URL, tỷ nhưpage /#!/.Nhưng mà, tùy trụ HTML5 khái phổ cập, đại đa số hiện đại trình duyệt duy trì vô hashbang khái lộ từ.

Vue cung cấp tả một cái tiếp lời, căn cứ trước mặt khái URL đường nhỏ lê thay đổi giao diện thượng biểu hiện khái nội dung —— vô luận cừ hệ điểm thay đổi ( vô luận hệ thông qua điện bưu liên kết, đổi mới vẫn là ở giao diện liên kết ). Ngoài ra, sử dụng đằng trước bộ định tuyến cho phép tịch mỗ 啲 trình duyệt sự kiện ( tỷ như điểm đánh ) phát sinh khi có ý thức cám quá độ trình duyệt đường nhỏ. Vue bản thân ngô mang thêm đằng trước hash lộ từ, nhưng khai nguyên khái "vue-router" bộ kiện cung cấp tả một cái API lê đổi mới ứng dụng khái URL, duy trì phản hồi cái nút ( hướng dẫn lịch sử ký lục ), cũng thông qua thân phận nghiệm chứng URL tham số duy trì điện bưu mật mã trọng giả dụ giả điện bưu nghiệm chứng liên kết. Cừ duy trì đem khảm kịch bản từ chiếu rọi đến khảm bộ lắp ráp, cũng cung cấp tế viên độ khái quá độ khống chế. Dùng Vue, khai phá nhân viên đã tịch dùng loại nhỏ xây dựng khối tổ hợp ứng dụng lê xây dựng lớn hơn nữa khái lắp ráp. Tùy trụ vue-router khái gia nhập, lắp ráp chỉ cần chiếu rọi đến cừ địa tương ứng khái lộ từ, phụ / căn lộ từ cần thiết chỉ thị tử lắp ráp hẳn là tịch biên độ nhuộm đẫm.

<divid="app">
<router-view></router-view>
</div>
...

<script>
...
constUser={
template:'<div>User {{ $route.params.id }}</div>'
};

constrouter=newVueRouter({
routes:[
{path:'/user/:id',component:User}
]
});
...
</script>

Mặt trên khái số hiệu:

1. Thiết trí một cái đằng trước lộ từ tịchwebsitename /user/<id>.
2. Sẽ tịch User lắp ráp trung nhuộm đẫm ( định nghĩa tịch const User... ).
3. Cho phép User lắp ráp sử dụng $route đồ vật khái params kiện lê truyền lại đưa vào URL khái riêng id:$route.params.id.
4. Đâu cái khuôn mẫu ( căn cứ truyền lại đến lộ từ khái tham số mà biến hóa ) sẽ nhuộm đẫm đến DOM khái div#app nội khái<router-view></router-view>Trung.
5. Cuối cùng sinh thành khái HTML đối với đưa vào:websitename /user/1Khái người lê giảng sẽ hệ:

<divid="app">
<div>
<div>User 1</div>
</div>
</div>

Hệ thống sinh thái

Trung tâm kho bao gồm từ trung tâm đoàn đội cùng cống hiến giả khai phá khái công cụ cùng kho.

Phía chính phủ giá sinh

Vite tiêu chí

• Devtools– dùng lê điều chỉnh thử Vue.js ứng dụng khái trình duyệt khai phá giả công cụ mở rộng
• Vite– nhanh chóng khai phá Vue.js khái tiêu chuẩn công cụ
• Vue Loader– một cái webpack loader, cho phép lấy đơn văn kiện lắp ráp ( SFC ) cách thức viết Vue lắp ráp

Phía chính phủ kho

• Vue Router– phía chính phủ bộ định tuyến
• Vuex– chịu Flux dẫn dắt khái tập trung thức trạng thái quản lý
• Vue Server Renderer– hầu phục khí đoan nhuộm đẫm
• Pinia– tân đơn giản trạng thái quản lý