Maison >interface Web >Questions et réponses frontales >Le composant vue se compose de plusieurs parties
Le composant vue se compose de plusieurs parties
- 青灯夜游original
- 2022-12-20 15:08:054566parcourir
Le composant vue se compose de 3 parties : 1. modèle, qui définit la structure du modèle du composant ; 2. script, qui définit le comportement JavaScript du composant ; 3. style, qui définit le style du composant. Chaque composant doit contenir une structure de modèle de modèle, et le comportement et le style du script sont des composants facultatifs ; "" est une balise de conteneur fournie par Vue, qui fonctionne uniquement comme un wrapper et ne sera pas rendue en tant qu'éléments Real DOM. " est une balise conteneur fournie par vue. Elle ne joue qu'un rôle d'emballage. Elle ne sera pas rendue comme un véritable élément DOM.
L'environnement d'exploitation de ce tutoriel : système Windows7, version vue3, DELL G3 ordinateur.
vue est un framework qui prend entièrement en charge le développement de composants. Le nom du suffixe du composant dans vue est .vue. Le fichier App.vue que nous avons rencontré auparavant est essentiellement un composant vue.
Template - & gt; eux, chaque composant doit contenir une structure de modèle de modèle, et le comportement et le style du script sont des composants facultatifs. Vue stipule que la structure de modèle correspondant à chaque composant doit être définie dans le nœud ; est une balise de conteneur fournie par vue. Elle fonctionne uniquement comme un wrapper. Elle ne sera pas rendue comme un véritable élément DOM.Utilisez les instructions dans le modèle
-
. le composant, la syntaxe d'instruction apprise précédemment est prise en charge pour aider les développeurs à restituer la structure DOM du composant actuel. L'exemple de code est le suivant :
<template> <!-- 当前组件的DOM结构，需要定义到template 标签的内部 </ template>
Définissez le nœud racine dans le modèle
<template>
<h1>这是App根组件</h1>
<!--使用{{ }}插值表达式-->
<p>生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}</p>
<!-- 使用v-bind 属性绑定-->
<p :title="new Date(). tol ocaleTimeString()">我在黑马程序员学习vue. js</p>
<!--属性v-on事件绑定
<button @click=”showInfo">按钮</button>
</template>
<template>
<!-- vue 2.x 中，template 节点内的所有元素，最外层"必须有“唯一的根节点进行包裹，否则报错-->
<div>
<h1>这是App根组件</h1>
<h2>这是副标题</h2>
</div>
</ template>
nœud de script du composant
vue Règlements : Le nœud <script> ; script > La structure de base du nœud est la suivante : Le nœud de nom dans <p><span style="font-size:16px;"><pre class="line-numbers language-js"><template> <!--这是包含多个根节点的template 结构，因为h1标签和h2标签外层没有包裹性质的根元素--> <h1>这是App根组件</h1> <h2>这是副标题</h2> </template></pre><p>script peut définir un nom pour le composant actuel via le nœud de nom : <strong><span style="font-size:16px;"><pre class="line-numbers language-js"><script> //今后，组件相关的data 数据、methods 方法等， //都需要定义到export default 所导出的对象中。 export default {} </script></pre>Quand. en utilisant vue -devtools Lors du débogage du projet, le nom du composant personnalisé peut clairement distinguer chaque composant : <p><span style="font-size:16px;"><p><span style="font-size:16px;"><p><strong><span style="font-size:16px;">le nœud de données dans le script <p><span style="font-size:16px;">vue est nécessaire lors du rendu du composant Les données peuvent. être défini dans le nœud de données : <pre class="line-numbers language-js"><script> export default { // name 属性指向的是当前组件的名称(建议:每个单词的首字母大写) name: &#39;MyApp&#39;， } </script></pre><p><strong>Les données du composant doivent être une fonction. Vue stipule que les données du composant doivent être une fonction et ne peuvent pas pointer directement vers un objet de données. Par conséquent, lors de la définition du nœud de données dans le composant, la méthode suivante est erronée : le nœud de méthodes dans le <span style="font-size:16px;"><pre class="line-numbers language-js"><script> export default { //组件的名称 name: &#39;MyApp&#39;， //组件的数据(data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象) data() { return { username: &#39;哇哈哈 &#39;, } }, } </script></pre><p>script <span style="font-size:16px;"><p><span style="font-size:16px;">La fonction de traitement des événements dans le composant doit être définie dans le nœud de méthodes. L'exemple de code est le suivant ：<br/><pre class="line-numbers language-js">data: { //组件中，不能直接让data 指向一个数据对象(会报错) count: 0 }</pre><br/><p style="text-align:center">Le noeud de style du composant<span style="font-size:16px;"><img alt="Le composant vue se compose de plusieurs parties" border="0" style="max-width:90%" src="http://www.itheima.com/images/newslistPIC/1635153282142_31.png" style="width: 646px; height: 158px;" title="Le composant vue se compose de plusieurs parties" vspace="0" style="max-width:90%"/><p>vue stipule : Le noeud <style> pour embellir la structure de l'interface utilisateur du composant actuel. La structure de base du nœud <script> est la suivante : <strong><span style="font-size:16px;"><pre class="line-numbers language-js">export default { name :&#39; MyApp&#39;, //组件的名称 data() { //组件的数据 return { count: 0, } }, methods: { //处理函数 addCount() { this . count++ }, }, }</pre>where<style> <="" font=""> langage stylistique. Par défaut, seule la syntaxe CSS courante est prise en charge et les valeurs facultatives incluent less, scss, etc. <p><span style="font-size:16px;"> Apprenez encore une astuce : supportez moins de syntaxe avec style<p><span style="font-size:16px;"><p><span style="font-size:16px;">如果希望使用less 语法编写组件的style 样式，可以按照如下两个步骤进行配置<span style="font-size: 16px;">：<p><span style="font-size:16px;">①运行npm install less -D 命令安装依赖包，从而提供less 语法的编译支持<p><span style="font-size:16px;">②在<style> <="" font="">标签上添加lang="less" 属性，即可使用less 语法编写组件的样式<pre class="line-numbers language-js"><style> h1{ font-weight: normal; i { color: red; font-style: normal; } </style></pre><p>【相关推荐：<a href="https://www.php.cn/course/list/18.html" target="_blank" textvalue="vuejs视频教程">vuejs视频教程、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端开发】</script>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!
Articles Liés
Voir plus- Cet article parle des trois étapes du cycle de vie des composants Vue (création, exécution et destruction)
- Le projet vue n'a-t-il qu'une seule instance de vue ?
- Vue est-elle adaptée aux applications multipages ?
- A quoi sert vue encapsulant axios ?
- Quelles optimisations ont été faites dans la compilation vue3 ?