Vue.js céntrase principalmente na parte de visualización da aplicación, tamén chamada desenvolvemento front-end. Vue.js está a ser popular día a día porque é moi sinxelo integrarse con outros proxectos e bibliotecas. É moi sinxelo de instalar e usar.
Vue.js é un marco JavaScript progresivo de código aberto usado para desenvolver interfaces de usuario web interactivas e aplicacións de páxina única (SPA). Vue.js denomínase habitualmente como Vue e pronúnciase como "view.js" ou "view".
Unha aplicación ou SPA dunha soa páxina é unha aplicación web ou sitio web que ofrece aos usuarios unha experiencia moi fluida, sensible e rápida semellante a unha aplicación de escritorio. Unha aplicación dunha soa páxina contén un menú, botóns e bloques nunha única páxina. Cando un usuario fai clic nun deles, reescribe dinámicamente a páxina actual en lugar de cargar páxinas novas enteiras desde un servidor. Esta é a razón detrás da súa velocidade de resposta.
Vue está construído basicamente para o desenvolvemento de frontend, polo que ten que xestionar moitos ficheiros HTML, JavaScript e CSS. Vue.js facilita aos usuarios estender HTML con atributos HTML chamados directivas. Vue.js ofrece directivas integradas e moitas directivas definite polo usuario para mellorar a funcionalidade das aplicacións HTML.
Abaixo está a lista das características máis importantes de Vue.js:
Os compoñentes de Vue.js son unha das características importantes deste marco. Utilízanse para estender elementos HTML básicos para encapsular código reutilizable. Podes crear elementos personalizados reutilizables en aplicacións Vue.js que posteriormente se poden reutilizar en HTML.
Vue.js ofrece modelos baseados en HTML que se poden usar para asociar o DOM renderizado cos datos de instancia de Vue. Todos os modelos de Vue son HTML válidos que poden ser analizados por navegadores e analizadores HTML compatibles coas especificacións. Vue.js compila modelos en funcións de renderizado de Virtual DOM. Vue renderiza os compoñentes na memoria DOM virtual antes de actualizar o navegador. Vue tamén pode calcular o número mínimo de compoñentes para volver renderizar e aplicar a cantidade mínima de manipulación DOM ao cambiar o estado da aplicación.
Vue ofrece un sistema de resposta que utiliza obxectos JavaScript sinxelos e optimiza a reprodución. Neste proceso, cada compoñente fai un seguimento das súas dependencias reactivas, polo que o sistema sabe exactamente cando e que compoñentes volver renderizar.
A navegación da páxina realízase coa axuda de vue-router. Podes usar a biblioteca de vue-router admitida oficialmente para a túa aplicación de páxina única.
Vue permítelle usar diferentes efectos de transición cando se insiren, actualizan ou eliminan elementos do DOM.
Hai varios métodos para usar Vue.js. Podes instalalo indo ao seu sitio oficial ou tamén podes comezar a usar o ficheiro Vue.js da biblioteca CDN. Vexamos a continuación algunhas formas de usar Vue.js no teu proxecto.
Se queres usar a etiqueta <script> de Vue.js directamente no teu ficheiro HTML, debes descargalo desde o sitio web oficial.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Imos ao sitio web oficial de Vue.js https://vuejs.org/v2/guide/installation.html para descargar vue.js segundo as túas necesidades.
Tamén podes usar o ficheiro Vue.js de CDN na túa aplicación. Use a ligazón https://unpkg.com/vue@3/dist/vue.global.js dentro do elemento <script>, como a continuación:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js é unha das últimas tecnoloxías de software moi utilizadas para o desenvolvemento web e a creación de aplicacións de páxina única (SPA). Como podes adiviñar polo nome, úsase principalmente para a interface de usuario ou o lado de visualización do proxecto.
Vexamos os beneficios de usar Vue.js no teu proxecto:
Unha das maiores vantaxes de Vue.js é que ten un tamaño moi pequeno. O éxito dun marco de JavaScript depende moito do seu tamaño e este excitante complemento de JavaScript ten só 18-21 KB, polo que podes descargalo e usalo moi facilmente en pouco tempo.
O framework Vue.js ten unha estrutura moi sinxela e é moi doado de entender. É unha das razóns da popularidade deste marco. Se estás familiarizado con HTML e JavaScript, podes codificar facilmente en Vue.js. Os usuarios poden engadir facilmente Vue.js ao seu proxecto web debido á súa estrutura sinxela e desenvolver aplicacións.
Vue.js ten moitos compoñentes para todo e pódese integrar moi rapidamente coas aplicacións existentes. Podes integralo con calquera aplicación escrita en JavaScript.
A natureza flexible de Vue.js tamén facilita a comprensión dos desenvolvedores de React.js, Angular.js e calquera outro marco JavaScript novo. Ofrece moita flexibilidade para usar nodos virtuais para escribir ficheiros HTML, ficheiros JavaScript e ficheiros JavaScript puro.
Podes crear elementos personalizados que se poidan reutilizar nas aplicacións Vue.js.
Vue.js ofrece documentación moi sinxela, completa e detallada, polo que os desenvolvedores que teñan pouca idea de HTML e JavaScript poden usala para programar.
Vue.js usa DOM virtual similar a outros marcos existentes como ReactJS, Ember, etc. O DOM virtual é unha lixeira representación en árbore en memoria do DOM HTML orixinal e actualízase sen afectar ao DOM inicial.
Vue.js ofrece comunicación bidireccional coa súa arquitectura Model View View Model (MVVM) que simplifica o manexo de bloques HTML.
O marco inclúe un sistema que nos permite renderizar datos declarativamente ao DOM usando unha sintaxe do modelo sinxela e directa.
Aquí tes un exemplo:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>O framework Vue.js permítenos defimeus atributos HTML chamados directivas, que se usan para proporcionar funcionalidade ás aplicacións HTML.
Hai dous tipos de directivas en Vue.js:
Vue.js usa chaves dobres {{}} como marcadores de posición para os datos, e as directivas Vue.js son atributos HTML que usan un prefixo v.
Unha aplicación Vue conéctase a un único elemento DOM e contrólao totalmente. No exemplo anterior, é #app.
Con Vue podemos considerar o HTML como o punto de entrada, e todo o demais ocorre dentro da instancia Vue creada.
Vexamos un exemplo onde probamos a vinculación de elementos e atributos:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> Neste caso, o novo atributo v-bind é a directiva. As directivas úsanse cun prefixo v- para indicar que son atributos únicos proporcionados por Vue e úsanse para aplicar un comportamento de resposta especial ao DOM renderizado.
O resultado do exemplo é o seguinte
Ercole Palmeri
O sector naval é unha verdadeira potencia económica mundial, que navega cara a un mercado de 150 millóns...
O pasado luns, o Financial Times anunciou un acordo con OpenAI. FT licencia o seu xornalismo de clase mundial...
Millóns de persoas pagan por servizos de streaming, pagando taxas de subscrición mensuais. É unha opinión común que vostede...
Coveware by Veeam continuará ofrecendo servizos de resposta a incidentes de extorsión cibernética. Coveware ofrecerá capacidades forenses e de remediación...
