Le composant vue se compose de plusieurs parties-Questions et réponses frontales-php.cn

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 :

Copier après la connexion Définissez le nœud racine dans le modèle

Dans le vue 2.x, la structure DOM au sein du nœud ne prend en charge qu'un seul nœud racine : 这是App根组件 生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}

我在黑马程序员学习vue. js

按钮 Copier après la connexion

Cependant, dans la version vue 3.x, le prend en charge la définition de plusieurs nœuds racine : 这是App根组件 这是副标题 Copier après la connexion

nœud de script du composant

vue Règlements : Le nœud ; script > La structure de base du nœud est la suivante : Le nœud de nom dans 这是App根组件 这是副标题 Copier après la connexion

script peut définir un nom pour le composant actuel via le nœud de nom : //今后，组件相关的data 数据、methods 方法等， //都需要定义到export default 所导出的对象中。 export default {} Copier après la connexion Quand. en utilisant vue -devtools Lors du débogage du projet, le nom du composant personnalisé peut clairement distinguer chaque composant :

le nœud de données dans le script

vue est nécessaire lors du rendu du composant Les données peuvent. être défini dans le nœud de données :

export default { // name 属性指向的是当前组件的名称(建议:每个单词的首字母大写) name: 'MyApp'， } Copier après la connexion 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 export default { //组件的名称 name: 'MyApp'， //组件的数据(data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象) data() { return { username: '哇哈哈 ', } }, } Copier après la connexion

script

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 ： data: { //组件中，不能直接让data 指向一个数据对象(会报错) count: 0 } Copier après la connexion

Le noeud de style du composant

vue stipule : Le noeud pour embellir la structure de l'interface utilisateur du composant actuel. La structure de base du nœud est la suivante : export default { name :' MyApp', //组件的名称 data() { //组件的数据 return { count: 0, } }, methods: { //处理函数 addCount() { this . count++ }, }, } Copier après la connexion where langage stylistique. Par défaut, seule la syntaxe CSS courante est prise en charge et les valeurs facultatives incluent less, scss, etc.

Apprenez encore une astuce : supportez moins de syntaxe avec style 如果希望使用less 语法编写组件的style 样式，可以按照如下两个步骤进行配置 ：

①运行npm install less -D 命令安装依赖包，从而提供less 语法的编译支持

②在 标签上添加lang="less" 属性，即可使用less 语法编写组件的样式

h1{ font-weight: normal; i { color: red; font-style: normal; } Copier après la connexion 【相关推荐： vuejs视频教程 、 web前端开发 】