Syncfusion Vue 구성 요소는 버전 2.7과 호환됩니다.

45542 단어 whatsnewwebdevdevelopmentvue
많은 사용자가 종속성 호환성, 브라우저 지원 요구 사항 및 기본 버전인 Vue 3으로 업그레이드하기 위한 대역폭 부족으로 인해 Vue 2에 머물기를 원합니다.

Vue.js는 2022년 7월 1일에 릴리스Vue 2.7하여 Vue 3의 가장 중요한 기능 중 일부를 백포트하여 Vue 2 사용자도 사용할 수 있도록 했습니다.

Syncfusion은 항상 최신 플랫폼 및 프레임워크 릴리스를 따라잡으며 Syncfusion Vue components이 이제 Essential Studio 2022 Volume 3 릴리스부터 Vue 2.7과 호환됨을 발표하게 되어 매우 기쁩니다.

참고: Syncfusion Vue 구성 요소는 최신 버전의 Vue 3도 지원합니다.

먼저 버전 3의 Vue 2.7에 추가된 백포트 기능을 살펴보겠습니다.

백포트된 기능



구성 API



Composition API는 더 적은 코드로 Options API의 대안입니다. 가져온 함수로 사용하십시오. 자세한 내용은 Composition API in Vue documentation을 참조하십시오.

SFC 스크립트 설정



스크립트 설정은 변수를 정의하는 데 도움이 되며 단일 파일 구성 요소(SFC)에서 기본 또는 명명된 내보내기 없이 사용할 수 있습니다. 자세한 내용은 script setup documentation을 참조하십시오.

SFC CSS v-바인드



이를 통해 단일 파일 구성 요소(SFC)의 스타일 섹션에서 데이터 변수, 속성 또는 계산된 속성을 직접 사용할 수 있습니다. 자세한 내용은 CSS v-bind documentation을 참조하십시오.

참고: Vue 2.7에서는 vue-template-compiler 종속성이 더 이상 필요하지 않습니다. 자세한 내용은 Vue documentation을 참조하십시오.

Syncfusion Vue 구성 요소



SyncfusionVue components은 이제 Vue 2.7과 호환되므로 Vue 2.7 애플리케이션에서 사용할 수 있으며 문제 없이 해당 기능을 사용할 수 있습니다.

앱에 Syncfusion 구성 요소를 추가하는 방법에 대한 자세한 내용은 getting started 설명서를 참조하십시오.

다음 코드 예제를 참조하십시오. 여기에서는 스크립트 설정 개념을 사용하여 Vue 2.7 기능으로 SyncfusionVue Button 및 Data Grid 구성 요소를 렌더링했습니다.

CSS v-bind 및 Composition API 개념을 사용하여 토글 버튼을 클릭하는 동안 데이터 그리드 테두리를 변경했습니다.

<template>
 <div id="app">
   Change the border color of Grid: <ejs-button cssClass="e-primary" v-on:click.native="changeColor">Toggle
   </ejs-button>
   <div>
    <ejs-grid :dataSource="data" cssClass="custom">
     <e-columns>
      <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
      <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
      <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column>
      <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
      <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column>
      <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
     </e-columns>
    </ejs-grid>
   </div>
 </div>
</template>

<script setup>
 import Vue, { ref } from 'vue';
 import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
 import { GridPlugin } from '@syncfusion/ej2-vue-grids';
 import { enableRipple } from '@syncfusion/ej2-base';

 enableRipple(true);
 Vue.use(GridPlugin);
 Vue.use(ButtonPlugin);

 let color = ref('blue');
 let data = [
 {
   "OrderID": 10248,
   "CustomerID": "VINET",
   "CustomerName": "Maria",
   "OrderDate": new Date("7/4/1996"),
   "ShippedDate": new Date("7/16/1996"),
   "Freight": 32.38,
   "ShipName": "Vins et alcools Chevalier",
   "ShipAddress": "59 rue de l'Abbaye",
   "ShipCity": "Reims",
   "ShipRegion": null,
   "ShipCountry": "France",
   "Verified": true
 },
 {
   "OrderID": 10249,
   "CustomerID": "TOMSP",
   "CustomerName": "Ana Trujillo",
   "OrderDate": new Date("7/5/1996"),
   "ShippedDate": new Date("7/10/1996"),
   "Freight": 11.61,
   "ShipName": "Toms Spezialitäten",
   "ShipAddress": "Luisenstr. 48",
   "ShipCity": "Münster",
   "ShipRegion": null,
   "ShipCountry": "Germany"
 },
 {
   "OrderID": 10250,
   "CustomerID": "HANAR",
   "CustomerName": "Antonio Moreno",
   "OrderDate": new Date("7/8/1996"),
   "ShippedDate": new Date("7/12/1996"),
   "Freight": 65.83,
   "ShipName": "Hanari Carnes",
   "ShipAddress": "Rua do Paço, 67",
   "ShipCity": "Rio de Janeiro",
   "ShipRegion": "RJ",
   "ShipCountry": "Brazil",
   "Verified": true
 },
 {
   "OrderID": 10251,
   "CustomerID": "VICTE",
   "CustomerName": "Thomas Hardy",
   "OrderDate": new Date("7/8/1996"),
   "ShippedDate": new Date("7/15/1996"),
   "Freight": 41.34,
   "ShipName": "Victuailles en stock",
   "ShipAddress": "2, rue du Commerce",
   "ShipCity": "Lyon",
   "ShipRegion": null,
   "ShipCountry": "France",
   "Verified": true
 },
 {
   "OrderID": 10252,
   "CustomerID": "SUPRD",
   "CustomerName": "Christina Berglund",
   "OrderDate": new Date("7/9/1996"),
   "ShippedDate": new Date("7/11/1996"),
   "Freight": 51.3,
   "ShipName": "Suprêmes délices",
   "ShipAddress": "Boulevard Tirou, 255",
   "ShipCity": "Charleroi",
   "ShipRegion": null,
   "ShipCountry": "Belgium"
 },
 {
   "OrderID": 10253,
   "CustomerID": "HANAR",
   "CustomerName": "Hanna Moos",
   "OrderDate": new Date("7/10/1996"),
   "ShippedDate": new Date("7/16/1996"),
   "Freight": 58.17,
   "ShipName": "Hanari Carnes",
   "ShipAddress": "Rua do Paço, 67",
   "ShipCity": "Rio de Janeiro",
   "ShipRegion": "RJ",
   "ShipCountry": "Brazil",
   "Verified": true
 },
 {
   "OrderID": 10254,
   "CustomerID": "CHOPS",
   "CustomerName": "Frédérique Citeaux",
   "OrderDate": new Date("7/11/1996"),
   "ShippedDate": new Date("7/23/1996"),
   "Freight": 22.98,
   "ShipName": "Chop-suey Chinese",
   "ShipAddress": "Hauptstr. 31",
   "ShipCity": "Bern",
   "ShipRegion": null,
   "ShipCountry": "Switzerland",
   "Verified": true
 },
 {
   "OrderID": 10255,
   "CustomerID": "RICSU",
   "CustomerName": "Martín Sommer",
   "OrderDate": new Date("7/12/1996"),
   "ShippedDate": new Date("7/15/1996"),
   "Freight": 148.33,
   "ShipName": "Richter Supermarkt",
   "ShipAddress": "Starenweg 5",
   "ShipCity": "Genève",
   "ShipRegion": null,
   "ShipCountry": "Switzerland"
 },
 {
   "OrderID": 10256,
   "CustomerID": "WELLI",
   "CustomerName": "Laurence Lebihan",
   "OrderDate": new Date("7/15/1996"),
   "ShippedDate": new Date("7/17/1996"),
   "Freight": 13.97,
   "ShipName": "Wellington Importadora",
   "ShipAddress": "Rua do Mercado, 12",
   "ShipCity": "Resende",
   "ShipRegion": "SP",
   "ShipCountry": "Brazil"
 },
 {
   "OrderID": 10257,
   "CustomerID": "HILAA",
   "CustomerName": "Elizabeth Lincoln",
   "OrderDate": new Date("7/16/1996"),
   "ShippedDate": new Date("7/22/1996"),
   "Freight": 81.91,
   "ShipName": "HILARION-Abastos",
   "ShipAddress": "Carrera 22 con Ave. Carlos Soublette #8-35",
   "ShipCity": "San Cristóbal",
   "ShipRegion": "Táchira",
   "ShipCountry": "Venezuela"
 }
];

function changeColor() {
  color.value = color.value == 'blue' ? 'green' : 'blue';
}
</script>

<style>
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

 .custom {
   margin: 10px 0;
   overflow: auto;
   border: 1px solid;
   border-color: v-bind(color);
 }
</style>


위의 코드 예제를 실행하면 다음 이미지와 같은 출력이 표시됩니다.



결론



읽어 주셔서 감사합니다! 자세한 내용은 당사Vue 2.7 demos를 참조하십시오.

또한 Essential Studio 2022 Volume 3 및 Release Notes 페이지에서 What’s New의 다른 업데이트를 확인하시기 바랍니다.

기존 고객의 경우 Essential Studio의 새 버전을 License and Downloads 페이지에서 다운로드할 수 있습니다. 아직 Syncfusion 고객이 아닌 경우 30일free trial을 사용해 사용 가능한 기능을 확인할 수 있습니다.

또한 support forum , support portal 및 feedback portal 을 통해 당사에 연락할 수 있습니다. 기꺼이 도와드리겠습니다!

관련 블로그


  • Syncfusion Essential Studio 2022 Volume 3 Is Here!
  • Vue Composition API vs. React Hooks
  • Can the Composition API Replace Vue Mixins?
  • Introducing Slot Template Support for Syncfusion Vue Components
    • .NET MAUI 차트의 새로운 기능: 2022 볼륨 3
    Cryptopals 챌린지 #33: Diffie-Hellman 구현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage