Discussion sur les composants et les modèles dans Vue.js
Résumé : La directive
est une fonctionnalité importante de Vue.js. Elle fournit principalement un mécanisme pour mapper les modifications des données au comportement du DOM. Alors, quels changements dans les données sont mappés aux comportements du DOM ? Vue.js est piloté par les données , nous ne modifierons donc pas directement la structure du DOM, et il n'y aura pas de $('ul').append( similaire) '
Instructions intégrées de Vue
v-bind
v-bind Il est principalement utilisé pour lier les attributs d'élément DOM.
signifie que la valeur réelle de l'attribut d'élément est fournie par l'attribut data dans l'instance vm.
Par exemple :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的指令</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo">
<span v-bind:cutomId="id">{{message}}</span>
</p>
<script>
//数据
let obj ={
message:"Hello World",
id:'123'
};
//声明式渲染
var vm = new Vue({
el:'#demo',
data:obj });
</script>
</body>
</html>v-bind peut être abrégé en ":",
L'exemple ci-dessus peut être abrégé en <span :cotomId="id">
L'effet est le suivant ：
2.v-on
Lier l'écouteur d'événement, en abrégé @.
Nous l'avons également utilisé hier, regardons l'effet en abréviation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的指令</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo">
<span @click="clickHandle">{{message}}</span>
</p>
<script>
//数据
let obj = {
message:"hello Vue"
};
//声明式渲染
var vm = new Vue({
el:"#demo",
data:obj,
methods:{
clickHandle(){
alert("click")
}
}
});
</script>
</body>
</html>L'effet est le suivant :
3. v-html
v-html, le type de paramètre est une chaîne,
est utilisé pour mettre à jour innerHTML, et la
stringest acceptée. par n'effectuera pas la compilation et d'autres opérations,
le traitera comme du HTML normal
Le code est le suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的指令</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo" v-html="HTML"></p>
<script>
//数据
let obj = {
HTML:"<p>Hello World</p>"
};
var vm = new Vue({
el:"#demo",
data:obj })
</script>
</body>
</html>Le l'effet est le suivant
Pour plus d'instructions intégrées, veuillez consulter le site officiel : Instructions Vue.js
Modèle
modèle HTML
modèle basé sur DOM, les modèles sont tous analysables et valides html
interpolation
texte : utilisez la syntaxe "Moustache" (double accolades) {{value}}
Fonction : remplacer sur l'instance Valeur de l'attribut,
Lorsque la valeur change, le contenu interpolé sera automatiquement mis à jour
HTML natif : les doubles accolades génèrent du texte et n'analyseront pas l'attribut HTML
: utilisez v-bind pour la liaison, qui peut répondre aux modifications
Utilisez JavaScriptexpression : vous pouvez écrire des expressions simples
caractères Modèle de chaîne
chaîne de modèle
L'attribut de l'objet d'option de modèle
Le Le modèle remplacera l'élément suspendu. Le contenu suspendu à l'élément sera ignoré.
Le code est le suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板</title>
<script src="../vue.js"></script>
</head>
<body>
<!--HTML模板-->
<p id="demo"></p>
<script>
//数据
let obj = {
html:"<p>String</p>",
abc:1
};
var str = "<p>Hello</p>";
var vm = new Vue({
el:"#demo",
data:obj,
template:str })
</script>
</body>
</html>Avez-vous remarqué des changements surprenants
Le nœud racine ne peut en avoir qu'un.
Écrivez la structure html dans une paire de balises de script et définissez type="X-template"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板</title>
<script src="../vue.js"></script>
</head>
<body>
<!--HTML模板-->
<p id="demo">
<span>vue</span>
</p>
<script type="x-template" id="temp">
<p>
Hello,{{abc}},
<span>sunday</span>
</p>
</script>
<script>
//数据
let obj = {
html:"<p>String</p>",
abc:1
};
var vm = new Vue({
el:"#demo",
data:obj,
template:"#temp"
});
</script>
</body>
</html>pour obtenir l'effet suivant :
est encore relativement limité lorsqu'il est écrit dans des balises de script
Si d'autres fichiers ont également cette structure,
ne peut pas être réutilisé.
Fonction de rendu de modèle
fonction de rendu
Attributs de l'objet d'option de rendu
createElement(tag name, {data object}, [child element]);
Les sous-éléments sont du texte ou des tableaux
Utilisons un morceau de code pour démontrer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render函数</title>
<script src="../vue.js"></script>
<style type="text/css">
.bg{
background: #ee0000;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
//数据
let obj = {
};
var vm = new Vue({
el:"#demo",
data:obj,
render(createElement){
return createElement(
//元素名
"ul",
//数据对象
{
class:{
bg:true
}
},
//子元素
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
}
})
</script>
</body>
</html>L'effet est le suivant
Résumé
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
1393
52
1209
24
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
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
Analyse approfondie : qu'est-ce que le framework Django ?
Jan 19, 2024 am 09:23 AM
Le framework Django est un framework Python pour applications Web qui fournit un moyen simple et puissant de créer des applications Web. En fait, Django est devenu l'un des frameworks de développement Web Python les plus populaires et est devenu le premier choix de nombreuses entreprises, notamment Instagram et Pinterest. Cet article approfondira ce qu'est le framework Django, y compris les concepts de base et les composants importants, ainsi que des exemples de code spécifiques. Concepts de base de DjangoDjan
Vue.js vs react: Considérations spécifiques au projet
Apr 09, 2025 am 12:01 AM
Vue.js convient aux projets de petite et moyenne taille et aux itérations rapides, tandis que React convient aux applications grandes et complexes. 1) Vue.js est facile à utiliser et convient aux situations où l'équipe est insuffisante ou l'échelle du projet est petite. 2) React a un écosystème plus riche et convient aux projets avec des performances élevées et des besoins fonctionnels complexes.
Vue.js est-il difficile à apprendre?
Apr 04, 2025 am 12:02 AM
Vue.js n'est pas difficile à apprendre, en particulier pour les développeurs avec une fondation JavaScript. 1) Sa conception progressive et son système réactif simplifient le processus de développement. 2) Le développement basé sur les composants rend la gestion du code plus efficace. 3) Les exemples d'utilisation montrent une utilisation de base et avancée. 4) Les erreurs courantes peuvent être déboguées via Vuedevtools. 5) L'optimisation des performances et les meilleures pratiques, telles que l'utilisation des attributs V-IF / V et clés, peuvent améliorer l'efficacité de l'application.
Vue est-elle utilisée pour le frontend ou le backend?
Apr 03, 2025 am 12:07 AM
Vue.js est principalement utilisé pour le développement frontal. 1) Il s'agit d'un cadre JavaScript léger et flexible axé sur la construction d'interfaces utilisateur et d'applications à une seule page. 2) Le cœur de Vue.js est son système de données réactif, et la vue est automatiquement mise à jour lorsque les données changent. 3) Il prend en charge le développement des composants et l'interface utilisateur peut être divisée en composants indépendants et réutilisables.
Comment mettre en œuvre un système de signature électronique en ligne à l'aide de WebSocket et JavaScript
Dec 18, 2023 pm 03:09 PM
Présentation de l'utilisation de WebSocket et de JavaScript pour mettre en œuvre un système de signature électronique en ligne : Avec l'avènement de l'ère numérique, les signatures électroniques sont largement utilisées dans divers secteurs pour remplacer les signatures papier traditionnelles. En tant que protocole de communication full-duplex, WebSocket peut effectuer une transmission de données bidirectionnelle en temps réel avec le serveur. En combinaison avec JavaScript, un système de signature électronique en ligne peut être mis en œuvre. Cet article expliquera comment utiliser WebSocket et JavaScript pour développer un outil en ligne simple.
Une plongée approfondie dans les caractères spéciaux courants sous Linux
Mar 14, 2024 pm 02:54 PM
En tant que système d'exploitation open source couramment utilisé, le système d'exploitation Linux offre une forte personnalisation et flexibilité. Lors de l'utilisation de systèmes Linux, nous rencontrons souvent le traitement de divers caractères spéciaux. Ces caractères spéciaux ont des significations particulières dans la ligne de commande et peuvent implémenter de nombreuses fonctions avancées. Cet article approfondira les caractères spéciaux courants sous Linux et présentera leur utilisation en détail avec des exemples de code spécifiques. Caractères génériques : les caractères génériques sont des caractères spéciaux utilisés pour correspondre aux noms de fichiers. Les caractères génériques courants incluent *, ?, [], etc. En voici plusieurs
