interface Web
js tutoriel
Explication détaillée de l'installation simple et du démarrage rapide de Vue.js
Explication détaillée de l'installation simple et du démarrage rapide de Vue.js
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>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>
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>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>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>如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。
在Vue.js中，我们试着把卡片封装成一个组件。
<p id="app">
<card></card>
<card></card>
<card></card>
</p>
<script>
//注册一个名叫card的组件
Vue.component('card',{
template:`<p>
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</p>`
});
new Vue({
el:"#app"
});
</script>我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用
可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数，后面我们会有专门的章节来介绍组件的详细用法。
5 本节小结
看到这里，你已经了解了Vue.js的数据驱动和组件化两大核心了，你已经入门了。后面的章节都是围绕这两个核心点来展开讲解。
相关推荐：
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Un didacticiel sur le modèle de diffusion qui vaut votre temps, de l'Université Purdue
Apr 07, 2024 am 09:01 AM
La diffusion permet non seulement de mieux imiter, mais aussi de « créer ». Le modèle de diffusion (DiffusionModel) est un modèle de génération d'images. Par rapport aux algorithmes bien connus tels que GAN et VAE dans le domaine de l’IA, le modèle de diffusion adopte une approche différente. Son idée principale est un processus consistant à ajouter d’abord du bruit à l’image, puis à la débruiter progressivement. Comment débruiter et restaurer l’image originale est la partie centrale de l’algorithme. L'algorithme final est capable de générer une image à partir d'une image bruitée aléatoirement. Ces dernières années, la croissance phénoménale de l’IA générative a permis de nombreuses applications passionnantes dans la génération de texte en image, la génération de vidéos, et bien plus encore. Le principe de base de ces outils génératifs est le concept de diffusion, un mécanisme d'échantillonnage spécial qui surmonte les limites des méthodes précédentes.
Générez du PPT en un seul clic ! Kimi : Que les « travailleurs migrants PPT » deviennent d'abord populaires
Aug 01, 2024 pm 03:28 PM
Kimi : En une seule phrase, un PPT est prêt en seulement dix secondes. PPT est tellement ennuyeux ! Pour tenir une réunion, vous devez avoir un PPT ; pour rédiger un rapport hebdomadaire, vous devez avoir un PPT ; pour solliciter des investissements, vous devez présenter un PPT ; même pour accuser quelqu'un de tricherie, vous devez envoyer un PPT ; L'université ressemble plus à une spécialisation PPT. Vous regardez le PPT en classe et faites le PPT après les cours. Peut-être que lorsque Dennis Austin a inventé le PPT il y a 37 ans, il ne s'attendait pas à ce qu'un jour le PPT devienne aussi répandu. Parler de notre dure expérience de création de PPT nous fait monter les larmes aux yeux. "Il m'a fallu trois mois pour réaliser un PPT de plus de 20 pages, et je l'ai révisé des dizaines de fois. J'avais envie de vomir quand j'ai vu le PPT." "À mon apogée, je faisais cinq PPT par jour, et même ma respiration." était PPT." Si vous avez une réunion impromptue, vous devriez le faire
Tous les prix CVPR 2024 annoncés ! Près de 10 000 personnes ont assisté à la conférence hors ligne et un chercheur chinois de Google a remporté le prix du meilleur article.
Jun 20, 2024 pm 05:43 PM
Tôt le matin du 20 juin, heure de Pékin, CVPR2024, la plus grande conférence internationale sur la vision par ordinateur qui s'est tenue à Seattle, a officiellement annoncé le meilleur article et d'autres récompenses. Cette année, un total de 10 articles ont remporté des prix, dont 2 meilleurs articles et 2 meilleurs articles étudiants. De plus, il y a eu 2 nominations pour les meilleurs articles et 4 nominations pour les meilleurs articles étudiants. La conférence la plus importante dans le domaine de la vision par ordinateur (CV) est la CVPR, qui attire chaque année un grand nombre d'instituts de recherche et d'universités. Selon les statistiques, un total de 11 532 articles ont été soumis cette année, dont 2 719 ont été acceptés, avec un taux d'acceptation de 23,6 %. Selon l'analyse statistique des données CVPR2024 du Georgia Institute of Technology, du point de vue des sujets de recherche, le plus grand nombre d'articles est la synthèse et la génération d'images et de vidéos (Imageandvideosyn
Du bare metal au grand modèle avec 70 milliards de paramètres, voici un tutoriel et des scripts prêts à l'emploi
Jul 24, 2024 pm 08:13 PM
Nous savons que le LLM est formé sur des clusters informatiques à grande échelle utilisant des données massives. Ce site a présenté de nombreuses méthodes et technologies utilisées pour aider et améliorer le processus de formation LLM. Aujourd'hui, ce que nous souhaitons partager est un article qui approfondit la technologie sous-jacente et présente comment transformer un ensemble de « bare metals » sans même un système d'exploitation en un cluster informatique pour la formation LLM. Cet article provient d'Imbue, une startup d'IA qui s'efforce d'atteindre une intelligence générale en comprenant comment les machines pensent. Bien sûr, transformer un tas de « bare metal » sans système d'exploitation en un cluster informatique pour la formation LLM n'est pas un processus facile, plein d'exploration et d'essais et d'erreurs, mais Imbue a finalement réussi à former un LLM avec 70 milliards de paramètres et dans. le processus s'accumule
L'IA utilisée | L'IA a créé un vlog sur la vie d'une fille vivant seule, qui a reçu des dizaines de milliers de likes en 3 jours
Aug 07, 2024 pm 10:53 PM
Rédacteur du Machine Power Report : Yang Wen La vague d’intelligence artificielle représentée par les grands modèles et l’AIGC a discrètement changé notre façon de vivre et de travailler, mais la plupart des gens ne savent toujours pas comment l’utiliser. C'est pourquoi nous avons lancé la rubrique « AI in Use » pour présenter en détail comment utiliser l'IA à travers des cas d'utilisation de l'intelligence artificielle intuitifs, intéressants et concis et stimuler la réflexion de chacun. Nous invitons également les lecteurs à soumettre des cas d'utilisation innovants et pratiques. Lien vidéo : https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Récemment, le vlog de la vie d'une fille vivant seule est devenu populaire sur Xiaohongshu. Une animation de style illustration, associée à quelques mots de guérison, peut être facilement récupérée en quelques jours seulement.
A lire absolument pour les débutants en technique : Analyse des niveaux de difficulté du langage C et Python
Mar 22, 2024 am 10:21 AM
Titre : Une lecture incontournable pour les débutants en technique : Analyse des difficultés du langage C et de Python, nécessitant des exemples de code spécifiques. À l'ère numérique d'aujourd'hui, la technologie de programmation est devenue une capacité de plus en plus importante. Que vous souhaitiez travailler dans des domaines tels que le développement de logiciels, l'analyse de données, l'intelligence artificielle ou simplement apprendre la programmation par intérêt, choisir un langage de programmation adapté est la première étape. Parmi les nombreux langages de programmation, le langage C et Python sont deux langages de programmation largement utilisés, chacun ayant ses propres caractéristiques. Cet article analysera les niveaux de difficulté du langage C et Python
Compte à rebours des 12 points faibles de RAG, l'architecte senior de NVIDIA enseigne les solutions
Jul 11, 2024 pm 01:53 PM
La génération augmentée par récupération (RAG) est une technique qui utilise la récupération pour améliorer les modèles de langage. Plus précisément, avant qu'un modèle de langage ne génère une réponse, il récupère les informations pertinentes à partir d'une vaste base de données de documents, puis utilise ces informations pour guider le processus de génération. Cette technologie peut considérablement améliorer l'exactitude et la pertinence du contenu, atténuer efficacement le problème des hallucinations, augmenter la vitesse de mise à jour des connaissances et améliorer la traçabilité de la génération de contenu. RAG est sans aucun doute l’un des domaines de recherche les plus passionnants en matière d’intelligence artificielle. Pour plus de détails sur RAG, veuillez vous référer à l'article de la rubrique de ce site "Quelles sont les nouveautés de RAG, spécialisée dans le rattrapage des défauts des grands modèles ?" Cette revue l'explique clairement. Mais RAG n'est pas parfait et les utilisateurs rencontrent souvent des « problèmes » lorsqu'ils l'utilisent. Récemment, la solution avancée d'IA générative de NVIDIA
Guide de démarrage de VSCode : une lecture incontournable pour les débutants afin de maîtriser rapidement les compétences d'utilisation !
Mar 26, 2024 am 08:21 AM
VSCode (Visual Studio Code) est un éditeur de code open source développé par Microsoft. Il possède des fonctions puissantes et une prise en charge riche des plug-ins, ce qui en fait l'un des outils préférés des développeurs. Cet article fournira un guide d'introduction aux débutants pour les aider à maîtriser rapidement les compétences d'utilisation de VSCode. Dans cet article, nous présenterons comment installer VSCode, les opérations d'édition de base, les touches de raccourci, l'installation du plug-in, etc., et fournirons aux lecteurs des exemples de code spécifiques. 1. Installez d'abord VSCode, nous avons besoin
