Maison interface Web js tutoriel Explication détaillée de l'utilisation du framework progressif vue.js

Explication détaillée de l'utilisation du framework progressif vue.js

Apr 17, 2018 pm 02:51 PM
javascript vue.js 特性

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中文网其它相关文章!

推荐阅读:

ajax与jsonp的使用详解

Vue 2.0内部指令

前端开发中的多列布局实现方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Maîtriser les concepts clés de Spring MVC : comprendre ces fonctionnalités importantes Maîtriser les concepts clés de Spring MVC : comprendre ces fonctionnalités importantes Dec 29, 2023 am 09:14 AM

Comprendre les fonctionnalités clés de SpringMVC : pour maîtriser ces concepts importants, des exemples de code spécifiques sont nécessaires. SpringMVC est un cadre de développement d'applications Web basé sur Java qui aide les développeurs à créer des structures flexibles et évolutives via le modèle architectural Model-View-Controller (MVC). application Web. Comprendre et maîtriser les fonctionnalités clés de SpringMVC nous permettra de développer et de gérer nos applications Web plus efficacement. Cet article présentera quelques concepts importants de SpringMVC

Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

Existe-t-il des fonctionnalités orientées objet de type classe dans Golang ? Existe-t-il des fonctionnalités orientées objet de type classe dans Golang ? Mar 19, 2024 pm 02:51 PM

Il n'y a pas de concept de classe au sens traditionnel dans Golang (langage Go), mais il fournit un type de données appelé structure, à travers lequel des fonctionnalités orientées objet similaires aux classes peuvent être obtenues. Dans cet article, nous expliquerons comment utiliser les structures pour implémenter des fonctionnalités orientées objet et fournirons des exemples de code concrets. Définition et utilisation des structures Examinons d'abord la définition et l'utilisation des structures. Dans Golang, les structures peuvent être définies via le mot-clé type, puis utilisées si nécessaire. Les structures peuvent contenir des attributs

Choisissez la version Go applicable, en fonction des besoins et des fonctionnalités Choisissez la version Go applicable, en fonction des besoins et des fonctionnalités Jan 20, 2024 am 09:28 AM

Avec le développement rapide d'Internet, les langages de programmation évoluent et se mettent à jour constamment. Parmi eux, le langage Go, en tant que langage de programmation open source, a attiré beaucoup d'attention ces dernières années. Le langage Go est conçu pour être simple, efficace, sûr et facile à développer et à déployer. Il présente les caractéristiques d'une concurrence élevée, d'une compilation rapide et d'une sécurité de la mémoire, ce qui le rend largement utilisé dans des domaines tels que le développement Web, le cloud computing et le big data. Cependant, il existe actuellement différentes versions du langage Go disponibles. Lors du choix d’une version linguistique Go appropriée, nous devons prendre en compte à la fois les exigences et les fonctionnalités. tête

Maîtriser les fonctionnalités clés et les scénarios d'application du middleware Golang Maîtriser les fonctionnalités clés et les scénarios d'application du middleware Golang Mar 20, 2024 pm 06:33 PM

En tant que langage de programmation rapide et efficace, Golang est également largement utilisé dans le domaine du développement Web. Parmi eux, le middleware, en tant que modèle de conception important, peut aider les développeurs à mieux organiser et gérer le code, et à améliorer la réutilisabilité et la maintenabilité du code. Cet article présentera les principales fonctionnalités et scénarios d'application du middleware dans Golang, et illustrera son utilisation à travers des exemples de code spécifiques. 1. Le concept et la fonction du middleware En tant que composant plug-in, le middleware se situe dans la chaîne de traitement requête-réponse de l'application.

Le langage Go est-il compatible avec les fonctionnalités du langage C ? Le langage Go est-il compatible avec les fonctionnalités du langage C ? Mar 07, 2024 pm 03:24 PM

Le langage Go est un langage de programmation développé par Google. Il présente les caractéristiques de simplicité, d'efficacité et de prise en charge de la concurrence, et a progressivement attiré une attention et une application généralisées. Dans de nombreux cas, les développeurs peuvent avoir besoin d'interagir avec le langage C ou de tirer parti des fonctionnalités du langage C. À ce stade, ils doivent se demander si le langage Go est compatible avec les fonctionnalités du langage C. Cet article présentera la compatibilité entre le langage Go et le langage C et fournira des exemples de code spécifiques pour illustrer la relation entre eux. Caractéristiques du langage Go Le langage Go est un langage de programmation typé statiquement, compilé et pris en charge par la concurrence.

Que sont les joyaux de Linux ? En savoir plus sur la définition et les caractéristiques de Linux Gem Que sont les joyaux de Linux ? En savoir plus sur la définition et les caractéristiques de Linux Gem Mar 14, 2024 pm 02:18 PM

LinuxGem est un terme courant dans le domaine informatique, qui fait référence à des logiciels ou des applications qui fonctionnent bien sur le système d'exploitation Linux. Le système d'exploitation Linux lui-même est un système d'exploitation open source bénéficiant du soutien de nombreux développeurs et communautés. Il est donc facile de trouver des logiciels puissants et de haute qualité sous Linux. Cependant, même parmi tant de logiciels de haute qualité, il existe encore des logiciels appelés « LinuxGem », qui sont populaires sous Linux grâce à leur excellente conception, leurs performances et leurs fonctions.

See all articles