En tant qu'utilisateur fidèle de Vue.js, je pense qu'il est nécessaire d'écrire des articles pour louer cette belle langue. Mon évaluation globale de celle-ci est "simple mais élégante, petite mais sans manque de personnes talentueuses". Ce qui suit vous présentera Vue.js autour de cette phrase, dans l'espoir de stimuler votre intérêt pour Vue.js.
Introduction à Vue.js
L'auteur de Vue.js est Evan You (You Yuxi), qui travaille chez Google Creative Lab. Bien que Vue soit un projet personnel, je crois personnellement qu'il n'est pas inférieur aux AngularJS de Google en termes de perspectives de développement. Je ferai des comparaisons simples avec Vue (version angulaire 1.0+).
Les principales caractéristiques de Vue sont présentées sur son site officiel (http://cn.vuejs.org/):
(1) Concis (2) Lightweight (3) Fast (4) Data Data Conduct (5) Componentization conviviale du module (6)
Simple
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 = '';]);Puis 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.
Pas 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) Binding Click Event
<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) Modificateurs pratiques
<! - Empêcher les événements de clic des bulles ->
<a @ click.stop = "dosomething"> </a>
<! - Les événements sont déclenchés uniquement lorsque la touche Entrée est enfoncée ->
<entrée @ keyup.enter = "soumettre">
(4) Caractéristiques pratiques des paramètres
<! - Debounce définit un délai minimum ->
<entrée v-model = "note" Debounce = "500">
<! - Mettez à jour les données dans "Modifier" au lieu de l'événement "d'entrée" ->
<entrée v-model = "msg" paresseux>
Et cela, cela semble-t-il si élégant?
Petit
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?
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 à: http://es6.ruanyifeng.com/#docs/module
Dans les futurs articles, je vais également le présenter, y compris la configuration de WebPack.
(2) composant
La fonction de composontisation de Vue en est un point culminant. En mettant le code HTML, CSS et JS d'un 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<template> <div v-text = "note"> </div> </ template> <cript> exportant default {data () {return {note: 'Il s'agit du 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)}}})}Pour afficher la configuration et l'utilisation de routage spécifiques, veuillez visiter la documentation officielle fournie par: http://vuejs.github.io/vue-router/zh-cn/index.html
Résumer
Je crois personnellement que certaines technologies frontales sont intégrées. Apprendre une langue ou un cadre lui-même n'est pas d'apprendre sa technologie. La chose la plus importante est d'apprendre sa pensée. Seul le niveau de pensée est étendu et vous trouverez facile d'apprendre d'autres technologies. Ce que Vue nous apporte, c'est une nouvelle réflexion sur le front-end pour résoudre les problèmes.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.