1. Introduction à Vue.js
1. Les principales caractéristiques de Vue: (1) Concise (2) Lightweight (3) Fast (4) Data Conducteur (5) MODULE FAMILLE (6) Componentialisation
(1) concis
Voici un morceau du code d'Angular pour implémenter la liaison bidirectionnelle
// html <body ng-app = "myApp"> <div ng-controller = "myctrl"> <p> {{note}} </p> <input type = "text" ng-model = "note"> </div> </ body> // jsvar mymodule = angeary.module ('myApp', []); myModule.Controller ('myctrl', ['$ sopp', fonction ($ scope) {$ scope.note = '';]);Ensuite, regardez le code de Vue:
// html <body> <div id = "app"> <p> {{note}} </p> <input type = "text" v-model = "note"> </div> </ body> // jsvar vm = new Vue ({el: '#app', data: {note: ''}})En comparaison, je pense personnellement que le style d'écriture de code de Vue est plus concis et facile à comprendre.
(2) non sans élégance
Bien que Vue soit un cadre relativement léger, il est simple et léger et très convivial. L'API qu'il fournit est également très facile à comprendre, et elle fournit également des instructions et des attributs très pratiques.
Par exemple:
1) Événement de clic de lier
<a v-on: click = "dosomething"> </a>
Il peut être abrégé comme:
<a @ click = "dosomething"> </a>
2) lier les attributs dynamiques
<a V-Bind: href = "URL"> </a>
Il peut être abrégé comme:
<a: href = "url"> </a>
3) Modificateur pratique
<! - Empêchez l'événement de clic de Bubbled -> <a @ click.stop = "Dosomething"> </a> <! - Les événements sont déclenchés uniquement lorsque la touche Entrée est appuyée sur -> <entrée @ keyup.enter = "soumission">
4) Caractéristiques pratiques des paramètres
<! - Debounce définit un retard minimum -> <entrée v-model = "note" Debounce = "500"> <! - Mettez à jour les données dans "Changer" au lieu d'événements "entrée" -> <entrée V-model = "msg" Lazy>
Et cela, cela semble-t-il si élégant?
(3) petits conseils
En parlant de petitesse, nous devons d'abord prêter attention à la taille du code source de Vue. Le code source de la version de production de Vue (c'est-à-dire la version min) n'est que de 72,9 Ko. Le site officiel indique que GZIP n'est que 25,11 Ko après la compression, ce qui est à moitié plus petit que 144 Ko d'Angular.
Un avantage de la compacité est qu'il permet aux utilisateurs de choisir plus librement les solutions correspondantes, et il donne aux utilisateurs plus de place en termes de correspondance d'autres bibliothèques.
Par exemple, le noyau de Vue n'inclut pas les fonctions de routage et AJAX par défaut, mais si vous avez besoin de routage et d'Ajax dans votre projet, vous pouvez directement utiliser la bibliothèque officielle Vue-Router et le plug-in tiers Plug-in Vue-Resource fourni par Vue. Dans le même temps, vous pouvez également utiliser d'autres bibliothèques ou plug-ins que vous souhaitez utiliser, comme l'ajax de jQuery, etc.
Cela ne semble-t-il pas très flexible?
(4) Il y a beaucoup de grands maîtres
Bien que Vue soit petite, il est "Sparrow est petit et a tous les organes internes", et il est également facile de créer des applications à grande échelle.
1) modulaire
Combiné avec certains outils de construction de modules tiers, tels que CommonJS, requirejs ou SeaJS, la modularité du code peut être facilement réalisée.
Cependant, ici, je ne recommande pas d'utiliser les outils de construction mentionnés ci-dessus. Il s'agit actuellement de la solution la plus populaire pour utiliser directement la fonction modulaire d'ES6, puis l'emballer en conséquence avec WebPack.
Si vous ne comprenez pas les fonctions du module ES6, veuillez vous référer à l'adresse du lien pour plus de détails:
Dans les futurs articles, je vais également le présenter, y compris la configuration de WebPack.
2) Componentiisation
La fonction de composontisation de Vue en est un point culminant. En mettant le code HTML, CSS et JS d'un certain composant sur la page dans un fichier .vue pour la gestion, la maintenance du code peut être considérablement améliorée.
Par exemple:
// app.vue <mpelate> <div v-text = "note"> </ div> </ template> <cript> exporter default {data () {return {note: 'Il s'agit d'un modèle HTML d'un composant! '}}} </ script> <style SCOPED> .box {Color: # 000;} </ style>Nous pouvons également écrire des langages de prétraitement dans le composant:
// app.vue <template lang = 'jade'> div (class = "box" v-text = "text") </ template> <script> exportant default {data () {return {note: 'Il s'agit du modèle HTML d'un composant! '}}} </ script> <style lang = "Styles">. Couleur de la boîte: # 000 </ style>Bien sûr, nous devons l'emballer via WebPack. Il est recommandé d'utiliser WebPack + Vue-chargedeur et d'utiliser la syntaxe ES6 en même temps. Babel doit être installé pour la conversion. Parce que l'article est une brève discussion de Vue.js, je ne donnerai pas une introduction approfondie ici.
3) routage
Comme Angular, Vue a ses capacités de routage. Grâce à la fonction de routage, nous pouvons réaliser un chargement à la demande de chaque composant et construire facilement une application à une seule page. Voici un fichier de configuration de routage simple:
// router.js'use strict'export function default (router) {router.map ({'/': {composant: function (résolve) {require (['./ Components / foo.vue'], résolve)}}, '/ foo': {composant: function (résolve) {exiger) }, '/ bar': {composant: fonction (résoudre) {require (['./ composants / bar.vue'], résolve)}}})}2. Introduction aux composants de la page de démarrage
En fait, ce n'est pas un composant haut de gamme. Au contraire, ce n'est vraiment qu'un simple composant de pagination de table. C'est principalement parce que j'ai besoin d'un composant de pagination de table dans mon projet récent. Les composants de pagination de la bibliothèque officielle de Vue sont trop puissants ou ne me conviennent pas, alors j'en ai écrit un moi-même pour en faire. Peut-être que quelqu'un comme moi a besoin d'un composant de pagination aussi simple pour implémenter des fonctions de pagination simples. Je le partagerai ici et tout le monde remplira les stands.
Si vous avez besoin de composants haut de gamme, vous pouvez passer à la bibliothèque officielle des composants Vue
(1) comment utiliser
Dans le fichier de composant .vue, nous écrivons un modèle comme celui-ci, c'est-à-dire le code html:
<Bile> <THEAD> <TR> <TH> ID </ TH> <TH> NAME </ TH> <TH> CONTENU </ TH> <TH> Remarque </th> </tr> </ thead> <tbody> <ttr v-for = "Data in TableLlist"> <Td V-Text = "Data.NUM"> </td> <td vext = "Data.Author"> </ Td> v-text = "data.contents"> </ td> <td v-text = "data.remark"> </td> </ tbody> <tfoot> <tr> <td colspan = "4"> <v> <boot-page: async = "false": data = "lists": Lens = "Lenarr": Page-Len = "PageLen"> </ boot-page> </page> </td> </tr> </ tfoot> </s table
Dans la balise <oot-page>, asynchronisé fait référence à l'opportunité d'obtenir des données du côté serveur, FALSE est non; Les données sont un tableau de données tabulaire statique; l'objectif est un tableau de lignes affichées par page; Page-Len est le nombre de pages qui peuvent être affichées;
Code JavaScript qui utilise des données statiques, c'est-à-dire que le contenu de la balise de script est le suivant:
<Script> Importer la page de démarrage à partir de './components/bootpage.vue' Export Default {data () {return {Lenarr: [10, 50, 100], // Afficher la durée par Pagen: 5, // Nombre de pages qui peuvent être affichées: [{num: 1, auteur: 'Luozh', contenu: '123', remarque: 'Bootpage'}, {}, 1, 1, "123 ', remarque:' Bootpage '}, {auteur: 1," 123', remarque: ' 'luozh', contenu: '123', remarque: 'bootpage'}, {num: 1, auteur: 'luozh', contenu: '123', remarque: 'botpage'}, {num: 1, auteur: 'Luozh', contenu: '123', remarque: 'BootPage'}, {num: 1, auteur: 'Luozh', contenu: '123, {num: 1, auteur:' 'bootpage'}], // Tableau Raw Data, pas besoin d'utiliser Tablelist lors de l'utilisation de données de serveur: [] // Données post-paginage renvoyées par le composant de pagination}}, composants: {bootpage}, événements: {// Table Data Retourné par le composant de pagination 'Data' (Data) {this.tableList = Data}}} </ Script>Généralement, nous utilisons rarement des données tabulaires statiques, et la plupart des données des applications sont obtenues du côté serveur, voici donc une méthode pour obtenir des données de pagination du serveur:
Le composant HTML qui utilise les données du serveur est la suivante:
<boot-page: async = "true": Lens = "Lenarr": url = "url": page-len = "pagelen": param = "param"> </ boot-page>
où l'URL est l'adresse de demande du serveur; Param est l'objet de paramètre qui doit être envoyé au serveur;
Le code utilisant le serveur JavaScript est le suivant:
<Script> Importer BootPage à partir de './components/bootpage.vue' Export Default {data () {return {Lenarr: [10, 50, 100], // Afficher la longueur par Pagen: 5, // Nombre de pages qui peuvent être affichées URL: '/ bootPage /', // PATH PATH: {}, // PASS PARAMET Composant de pagination}}, méthodes: {refresh () {this. $ Broadcast ('Refresh') // Une fonction de refroidissement de table est fournie ici}}, composants: {bootpage}, événements: {// les données de la table renvoyées par le composant de pagination (ici sont les données renvoyées par le serveur) 'Data' (data) {this.tableLelist = Data}} </ Script>) otRemarque: En plus du contenu du tableau transmis à la table des composants, le serveur a également besoin d'un nom de clé du nombre total de pages, nommé page_num
(2) Code source des composants
Quant à l'implémentation de la pagination, le code source ici ne sera pas affiché. J'ai téléchargé tout le code source sur mon github, adresse
Permettez-moi de vous rappeler à l'avance: parce que j'ai pris plusieurs heures pour chasser ce composant, je dois avoir été inadéquat dans les formats d'écriture et les spécifications des composants Vue et je n'ai pas été complètement indépendant, alors je remplit consciemment la fosse. Je ne le partagerai que ici.
Bien sûr, vous pouvez également modifier le code du composant à volonté en fonction de l'utilisation de votre projet. Après tout, il est assez compliqué de mettre en œuvre des composants de pagination importants et complets.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.