Explication détaillée de l'installation simple et du démarrage rapide de Vue.js-js tutoriel-php.cn

Explication détaillée de l'installation simple et du démarrage rapide de Vue.js

小云云

Libérer： 2018-01-15 13:04:34

original

1387 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'installation simple et le démarrage rapide de Vue.js. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Nous avons présenté le framework Vue.js dans la section précédente, dans cette section, nous pouvons essayer d'écrire du petit code.

1 Installation facile

Pour utiliser Vue.js, nous devons d'abord l'installer dans notre projet. L'installation simple est certainement la plus simple. Oubliez les méthodes d'installation compliquées et fastidieuses, introduisez directement un fichier js et tapez d'abord le code.

<head>
    <meta charset="UTF-8">
    <title>简易安装 Vue.js</title>
    <script src="vue.js"></script>
</head>

Copier après la connexion

Le site officiel propose un endroit pour télécharger le code source de Vue.js : https://cdn.jsdelivr.net/vue/2.1. 3/vue.js

Si vous ne souhaitez pas le télécharger localement, vous pouvez directement utiliser CDN pour introduire des ressources en ligne, la même chose peut être faite :

<script src="https://xx/vue.js"></script>

Copier après la connexion

De cette façon, nous avons réussi à introduire Vue.js dans notre projet de la manière la plus simple. Quant à ces méthodes d'installation sophistiquées telles que npm et Bower, nous les examinerons plus tard.

2 Une fois la vue basée sur les données

introduite, nous pouvons l'utiliser. J'ai entendu dire que la chose la plus impressionnante est la vue basée sur les données, qui libère les opérations DOM afin que vous n'ayez plus besoin d'effectuer des opérations DOM complexes et gourmandes en performances. Alors voyons comment ça se passe !

Supposons que nous souhaitions maintenant restituer la valeur d'une variable dans l'objet js sur la page. L'approche traditionnelle consiste d'abord à utiliser getElementById pour obtenir l'objet nœud DOM, puis à définir son contenu avec innerHTML. .

Maintenant, dans Vue.js, vous devez faire ceci :

<p id="app">
  公众号：{{ name }}
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       name:"web前端教程",
     }
   });
 </script>

Copier après la connexion

Nous créons une instance vm via new Vue(), les paramètres sont un objet json, l'attribut el fournit un élément DOM (id='app') qui existe sur la page, indiquant que cette instance est associée au nœud DOM spécifié.

Sur le nœud DOM, nous pouvons utiliser la syntaxe des doubles accolades {{ }} pour restituer les valeurs d'attribut qui existent déjà dans les données de l'objet de l'instance Vue, comme la valeur du nom attribut dans le cas ci-dessus." "Tutoriel Web front-end" sera rendu dans la page, remplacez {{ name }} et l'affichage sera : "Tutoriel Web front-end".

Dans ce processus, nous n'avons pas écrit de code pour faire fonctionner les nœuds DOM. De plus, comme nous l'avons mentionné dans la section précédente, le viewModel en mode MVVM agit comme un moniteur. Si le rôle surveille que les données du modèle ont été modifiées, il informera la vue de les mettre à jour. Ce processus ne nécessite pas votre participation.

(revue mvvm)

Essayons-le, changeons la valeur du nom en : « bonjour mot » sans ajouter de code, que ce soit la page. la vue sera automatiquement mise à jour.

Regardez le gif ci-dessous, démontrons-le via le navigateur Chrome :

(Ralentissez, attendez que le gif soit chargé)

Comme le montre l'image ci-dessus, une fois la valeur de name modifiée, la page change immédiatement, sans que vous ayez besoin d'écrire innerHTML pour mettre à jour la vue.

Il s'agit de la vue basée sur les données de Vue.js.

3 Liaison bidirectionnelle

Plus pratique, Vue.js fournit également des instructions de syntaxe pratiques pour réaliser une liaison bidirectionnelle de vues et de données dans d'autres. En d'autres termes, non seulement les modifications des données peuvent piloter la vue, mais les données de la couche modèle peuvent également être facilement mises à jour lorsque l'utilisateur effectue certaines opérations sur la page.

Exemple : Surveillez le contenu saisi par l'utilisateur dans la zone de saisie de la page, puis mettez-le à jour sur la page en temps réel.

Dans Vue, nous pouvons facilement implémenter cela en utilisant la directive v-model. (Ne vous inquiétez pas de ce qu'est le modèle V, il sera présenté en détail dans les chapitres suivants).

<p id="app">
   <input v-model="number">
   <p>数字:{{ number }}</p>
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       number:"",
     }
   });
 </script>

Copier après la connexion

L'effet est le suivant :

(Ralentissez et attendez que le gif termine le chargement )

Dans ce cas, nous n'avons pas besoin d'écrire de code pour surveiller les changements de contenu du contrôle d'entrée. Le contenu saisi par l'utilisateur mettra à jour la valeur du numéro d'attribut de données dans l'instance vm en temps réel. . Une fois le numéro mis à jour, la vue suivra. Parce que tout cela est fait pour vous par Vue.js.

4 composants

Ci-dessus, nous avons démontré le pilote de données de Vu.jse. N'oubliez pas, nous avons mentionné Vue.js dans la section précédente. le noyau important est : Componentisation.

La composantisation consiste à extraire indépendamment des blocs spécifiques de la page et à les encapsuler dans un composant qui peut être facilement réutilisé.

Exemple : Supposons qu'il y ait plusieurs cartes identiques sur la page :

传统的办法，我们可以要写三份同样的HTML布局：

 <p id="app">
  <!--第1个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第2个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第3个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
 </p>

Copier après la connexion

如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。

在Vue.js中，我们试着把卡片封装成一个组件。

<p id="app">
   <card></card>
   <card></card>
   <card></card>
 </p>

 <script>
  //注册一个名叫card的组件
 Vue.component(&#39;card&#39;,{
    template:`<p>
      <img src="logo.png" alt="">
      <h2>web前端教程</h2>
      <p>这里是描述，很长的描述</p>
      <button>我是按钮</button>
    </p>`
  });

  new Vue({
    el:"#app"
  });
 </script>

Copier après la connexion

我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高。

可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数，后面我们会有专门的章节来介绍组件的详细用法。

5 本节小结

看到这里，你已经了解了Vue.js的数据驱动和组件化两大核心了，你已经入门了。后面的章节都是围绕这两个核心点来展开讲解。