1. Introducción a Vue.js
1. Las características principales de VUE: (1) Conciso (2) Ligero (3) Rápido (4) Data Driver (5) Componente del módulo (6)
(1) Conciso
Aquí hay una parte del código de Angular para implementar la vinculación bidireccional
// html<body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-model="note"> </div></body>// jsvar myModule = angular.module('myApp', []); mymodule.controller ('myctrl', ['$ scopp', function ($ scope) {$ scope.note = '';]);Luego mira el código de Vue:
// html <body> <div id = "app"> <p> {{nota}} </p> <input type = "text" v-model = "nota"> </div> </body> // jsvar vm = new Vue ({el: '#App', Data: {nota: ''}})En comparación, personalmente creo que el estilo de escritura de código de Vue es más conciso y fácil de entender.
(2) No sin elegancia
Aunque Vue es un marco relativamente liviano, es simple y liviano y muy fácil de usar. La API que proporciona también es muy fácil de entender, y también proporciona algunas instrucciones y atributos muy convenientes.
Por ejemplo:
1) BIND Evento de clics
<a v-on: click = "dosomething"> </a>
Se puede abreviar como:
<a @click = "dosomething"> </a>
2) Atar atributos dinámicos
<a v-bind: href = "url"> </a>
Se puede abreviar como:
<a: href = "url"> </a>
3) Modificador conveniente
<
4) Características de los parámetros prácticos
<
¿Qué tal si se siente tan elegante?
(3) Pequeños consejos
Hablando de pequeñez, primero debemos prestar atención al tamaño del código fuente de Vue. El código fuente de la versión de producción de Vue (es decir, la versión min) es de solo 72.9kb. El sitio web oficial dice que GZIP tiene solo 25.11 kb después de la compresión, que es medio menor que los 144 kb de Angular.
Una ventaja de la compacidad es que permite a los usuarios elegir las soluciones correspondientes más libremente, y brinda a los usuarios más espacio en términos de coincidir con otras bibliotecas.
Por ejemplo, el núcleo de VUE no incluye las funciones de enrutamiento y AJAX de forma predeterminada, pero si necesita enrutamiento y AJAX en su proyecto, puede usar directamente el Router Vue Oficial y el recurso de Vue de terceros proporcionado por Vue. Al mismo tiempo, también puede usar otras bibliotecas o complementos que desea usar, como el AJAX de JQuery, etc.
¿No se siente muy flexible?
(4) Hay muchos grandes maestros
Aunque Vue es pequeño, es "Sparrow es pequeño y tiene todos los órganos internos", y también es fácil construir aplicaciones a gran escala.
1) modular
Combinado con algunas herramientas de construcción de módulos de terceros, como CommonJS, RequestJ o SEAJS, la modularidad del código se puede lograr fácilmente.
Sin embargo, aquí no recomiendo usar las herramientas de construcción mencionadas anteriormente. Actualmente es la solución más popular para usar directamente la función modular de ES6 y luego empaquetarla en consecuencia con Webpack.
Si no comprende las funciones del módulo ES6, consulte la dirección de enlace para obtener más detalles:
En futuros artículos, también lo presentaré, incluida la configuración de Webpack.
2) componente
La función de componentización de Vue es lo más destacado de la misma. Al poner el código HTML, CSS y JS de un determinado componente en la página en un archivo .Vue para la administración, el mantenimiento del código puede mejorarse enormemente.
Por ejemplo:
// app.vue <template> <div v-xext = "nota"> </div> </template> <script> export a default {data () {return {nota: 'Esta es la plantilla HTML de un componente! '}}} </script> <style Scoped> .Box {Color: #000;} </style>También podemos escribir algunos idiomas de preprocesamiento en el componente:
// App.vue <Template lang = 'jade'> div (class = "box" v-text = "text") </template> <script> Exportar default {data () {return {nota: 'Esta es la plantilla HTML de un componente! '}}} </script> <style lang = "Styles">. Color de caja: #000 </syle>Por supuesto, necesitamos empaquetarlo a través de Webpack. Se recomienda usar WebPack + Vue-Loader y usar la sintaxis ES6 al mismo tiempo. Babel necesita ser instalado para su conversión. Debido a que el artículo es una breve discusión de Vue.js, no daré una introducción en profundidad aquí.
3) Enrutamiento
Al igual que Angular, Vue tiene sus capacidades de enrutamiento. A través de la función de enrutamiento, podemos realizar la carga a pedido de cada componente y construir fácilmente una aplicación de una sola página. Aquí hay un archivo de configuración de enrutamiento simple:
// router.js'use strict'Export Function predeterminado (router) {router.map ({'/': {componente: function (resolve) {request (['./ components/foo.vue'], resolve)}}, '/foo': {componente: function (resolve) {require (['./ componentes/foo.vue'], resolve '], resuelve'], resuelve '], resuelve'], resuelve '], resuelve'], resuelve '], resuelve'], resuelve '], resuelve'], resuelve '] }, '/bar': {componente: function (resolve) {require (['./ componentes/bar.vue'], resolve)}}})}2. Introducción a los componentes de la página de arranque
En realidad, no es un componente de alta gama. Por el contrario, en realidad es solo un componente simple de paginación de tabla. Es principalmente porque necesito un componente de paginación de tabla en mi proyecto reciente. Los componentes de paginación de la biblioteca de componentes oficiales de VUE son demasiado poderosos o no adecuados para mí, así que escribí uno yo mismo para confiar con eso. Tal vez alguien como yo necesita un componente de paginación tan simple para implementar funciones de paginación simples. Lo compartiré aquí, y todos completarán los pozos.
Si necesita componentes de alta gama, puede pasar a la biblioteca oficial de componentes VUE
(1) Cómo usar
En el archivo del componente .Vue, escribimos una plantilla como esta, es decir, código HTML:
<Table> <thead> <tr> <th> id </th> <th> name </th> <th> content </th> <th> observar </th> </tr> </thead> <tbody> <ttr v-for = "data en tablelist"> <td v-text = "data.num"> </td> <td v-text = "data.author"> <<td tde v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> </td> </tr> </tfoot> </table>
En la etiqueta <RoT-Page> async se refiere a si se debe obtener datos del lado del servidor, el falso es no; Los datos son una matriz de datos tabulares estáticas; La lente es una matriz de filas que se muestran por página; Page-Len es el número de páginas que se pueden mostrar;
Código JavaScript que usa datos estáticos, es decir, los contenidos en la etiqueta de script son los siguientes:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per pageLen: 5, // Number of pages that can be displayed: [ {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'LUOZH', Contenido: '123', Observación: 'BootPage'}, {num: 1, autor: 'lUozh', contenido: '123', observación: 'bootpage'}, {num: 1, autor: 'lUoZh', contenido: '123', observación: 'bootpage'}, {num: 1, autor: 'lUozh', contenido: '123'. 'Bootpage'}], // Tabla de datos sin procesar, no es necesario usar TableList al usar datos del servidor: [] // datos post-PAGING devueltos por el componente de paginación}}, componentes: {bootpage}, eventos: {// datos de tabla devueltos por el componente de paginación 'datos' (datos) {this.En general, rara vez usamos datos tabulares estáticos, y la mayoría de los datos de las aplicaciones se obtienen del lado del servidor, por lo que aquí hay un método para obtener datos de paginación del servidor:
El componente HTML que usa datos del servidor es el siguiente:
<Boot-Page: async = "true": lens = "Lenarr": url = "url": page-len = "pagelen": param = "param"> </ boot-page>
donde la URL es la dirección de solicitud del servidor; Param es el objeto de parámetro que debe enviarse al servidor;
El código que usa datos del servidor JavaScript es el siguiente:
<script> Importar una página de arranque desde './Components/BootPage.vue' Exportar predeterminado {data () {return {Lenarr: [10, 50, 100], // Longitud de visualización de la longitud por pagelen: 5, // número de páginas que se pueden mostrar url: '/bootpagepage/', // parámetro de ruta de solicitud: {}, // pase parámetro de pase a la decisión: [] Pagination Component}}, Métodos: {refresh () {this. $ Broadcast ('Refresh') // Se proporciona una función de actualización de tabla aquí}}, componentes: {bootpage}, events: {// the table data devuelto por el componente de paginación (aquí es el datos devueltos por el servidor) 'data' (data)Nota: Además del contenido de la matriz pasada a la tabla de componentes, el servidor también necesita un nombre clave del número total de páginas, llamado Page_Num
(2) Código fuente de componentes
En cuanto a la implementación de la paginación, el código fuente aquí no se mostrará. Subí todo el código fuente a mi github, dirección
Permítanme recordarle de antemano: debido a que tardé varias horas en expulsar este componente, debo haber sido inadecuado en los formatos de escritura y las especificaciones de los componentes VUE y no he sido completamente independiente, por lo que consciente completo el pozo. Solo lo compartiré aquí.
Por supuesto, también puede modificar el código del componente a voluntad para adaptarse al uso de su proyecto. Después de todo, es bastante complicado implementar componentes de paginación grandes y completos.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.