Explication détaillée de l'utilisation du framework progressif vue.js-js tutoriel-php.cn

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du framework progressif vue.js. Quelles sont les précautions pour l'explication détaillée de l'utilisation du framework progressif vue.js ? cas, jetons un coup d'oeil.

Vue.js est un framework progressif pour créer des interfaces utilisateur. Contrairement à d'autres frameworks lourds, Vue Adopter fondamentalement une conception à coût minimal et progressivement adoptable. Vue La bibliothèque principale se concentre uniquement sur la couche de vue et est facile à intégrer à d'autres bibliothèques tierces ou à des projets existants. D'un autre côté, lorsqu'il est combiné avec des composants et des bibliothèques à fichier unique pris en charge par l'écosystème Vue, Vue Il est également entièrement capable de fournir des pilotes puissants pour les applications complexes d’une seule page.

Vue.js a été mis à jour vers 2.x, avec certaines mises à niveau et modifications des fonctions et de la syntaxe. Cet article présente d'abord le contenu de base.

1. Guide du débutant

L'utilisation de vue est très simple. Téléchargez vue.js ou vue.min.js et importez-le directement.

2. Introduction initiale à vue

2.1 Rendu déclaratif

Le cœur de Vue.js est que vous pouvez utiliser une syntaxe de modèle concise pour restituer les données de manière déclarative dans DOM :

<p id="app">
 {{ message }}
</p>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

Copier après la connexion

Cela entrera : Bonjour Vue !

Nous avons généré notre première application Vue ! Cela ressemble beaucoup au rendu d'un modèle de chaîne, mais Vue fait beaucoup de travail en coulisses. Maintenant les données et le DOM Déjà liés ensemble, toutes les données et le DOM sont réactifs. Comment comprendre clairement tout cela ? Activez simplement JavaScript dans votre navigateur Console (maintenant ouverte sur la page actuelle) et définissez la valeur de app.message, vous verrez que l'élément DOM rendu par l'exemple ci-dessus sera mis à jour en conséquence.

En plus de l'interpolation de texte, nous pouvons également lier les attributs des éléments DOM de cette manière :

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date().toLocaleString()  }
})

Copier après la connexion

Après avoir passé la souris pendant quelques secondes, vous pouvez voir des invites dynamiques.

Ici, nous rencontrons quelque chose de nouveau. Les attributs v-bind que vous voyez sont appelés directives. Les directives sont préfixées par v- pour indiquer qu'elles sont générées par Vue Propriétés spéciales fournies. Comme vous l'avez peut-être deviné, ils produisent un comportement réactif spécialisé sur le DOM rendu. En bref, ce que fait cette directive ici est : "faire correspondre l'attribut title de cet élément avec La propriété message de l'instance Vue reste pertinente et mise à jour."

Si vous ouvrez à nouveau la console JavaScript du navigateur et entrez app2.message = 'Some new message', vous verrez à nouveau que le HTML lié à l'attribut title a été mis à jour.

2.1 Conditions et boucles

Contrôler l'affichage d'un élément est également assez simple :

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

Copier après la connexion

ˆContinuez à taper app3.seen = false dans la console et vous devriez voir span disparaître.

Cet exemple montre que nous pouvons non seulement lier des données au texte et aux attributs, mais également lier des données aux structures DOM. De plus, Vue fournit également un puissant système Effet de transition, qui peut utiliser automatiquement des effets de transition lorsque Vue insère/met à jour/supprime des éléments.

Il existe d'autres commandes, chacune avec ses propres fonctions spéciales. Par exemple, la directive v-for peut utiliser les données d'un tableau pour afficher une liste d'éléments :

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</p>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

Copier après la connexion

3, vue instance

Chaque application Vue commence par créer une nouvelle instance Vue via la fonction Vue :

var vm = new Vue({
 // 选项
})

Copier après la connexion

Même s’il ne suit pas entièrement le modèle MVVM, le design de Vue s’en inspire toujours. Par convention, nous utilisons généralement la variable vm (abréviation de ViewModel) pour représenter une instance de Vue.

3.1données et méthodes

Lorsque vous créez une instance Vue, toutes les propriétés trouvées dans l'objet de données sont ajoutées au système réactif de Vue. Chaque fois que les valeurs de ces propriétés changent, la vue est « réactive » et se met à jour avec les nouvelles valeurs correspondantes.

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
 data: data
})
// 这里引用了同一个对象！
vm.a === data.a // => true
// 设置实例上的属性，
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

Copier après la connexion

Chaque fois que l'objet de données change, la vue sera déclenchée pour un nouveau rendu. Il est à noter que si l'instance a été créée, seules les propriétés déjà existantes dans les données sont réactives. Autrement dit, si vous ajoutez un nouvel attribut après la création de l'instance, par exemple :

vm.b = 'hi'

Copier après la connexion

然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

Copier après la connexion

除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回调函数将在 `vm.a` 改变后调用
})

Copier après la connexion

3.2vue实例的声明周期

vue实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。

看下这段代码。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p id="container">我的声明周期，大家看吧！</p>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
  //以下代码时显示vm整个生命周期的流程
  var vm = new Vue({
   el: "#container",
   data: {
    test : 'hello world'
   },
   beforeCreate: function(){
    console.log(this);
    showData('创建vue实例前',this);
   },
   created: function(){
    showData('创建vue实例后',this);
   },
   beforeMount:function(){
    showData('挂载到dom前',this);
   },
   mounted: function(){
    showData('挂载到dom后',this);
   },
   beforeUpdate:function(){
    showData('数据变化更新前',this);
   },
   updated:function(){
    showData('数据变化更新后',this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData('vue实例销毁前',this);
   },
   destroyed:function(){
    showData('vue实例销毁后',this);
   }
  });
  function realDom(){
   console.log('真实dom结构：' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data 数据：' + obj.test)
   console.log('挂载的对象：')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

Copier après la connexion

通过控制台的打印效果可以看出来，实例化 vue 对象大致分为创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！