Comment écrire un composant personnalisé en utilisant vue
May 25, 2018 pm 02:52 PMCette fois, je vais vous montrer comment écrire un composant défini personnalisé avec vue. Quelles sont les précautions pour écrire un composant personnalisé avec vue. jetons un coup d'oeil ensemble.
Écrire un composant vue
Ce que j'écris ci-dessous est comment écrire un seul composant de fichier se terminant par .vue, qui est un projet construit basé sur webpack. Si vous ne savez toujours pas comment utiliser webpack pour créer un projet vue, vous pouvez passer à vue-cli.
Un composant vue complet comprendra les trois parties suivantes :
template: template
-
js: logic
css : Style
Chaque composant a son propre modèle, js et style. Si une page est comparée à une maison, les composants sont le salon, la chambre, la cuisine et les toilettes de la maison. Si la cuisine est démontée séparément, les composants peuvent être des couteaux, des hottes...etc. C'est-à-dire que les pages sont constituées de composants, et les composants peuvent également être constitués de composants. Cela le rend très flexible et présente un couplage très faible.
Regardons d'abord comment un composant est écrit dans un fichier .vue :
Vue.component('simple-counter', { template: '<p id="inputBox"><input type="text"></p>', data () { // 数据 return { counter: 0 } }, methods: { // 写点方法 }, created () { // 生命钩子 }, computed: { // 计算属性 } })
À quoi sert le modèle ?
<template> <p id="inputBox"> <input type="text"> </p> </template> <!-- template就是这个组件的html,也就是下面部分(vue-loader会将template标签下的内容解析出来): --> <p id="inputBox"> <input type="text"> </p> <!-- 对应原生写法的话,就是template内的dom字符串 -->
partie js
export default { data () { return { counter: 0 } }, methods: { // 方法 }, created () { // 生命钩子 }, computed: { // 计算属性 } } // 在这里很明显js部分就是对应的原生写法内的非template部分了。 // export default这个是es6的模块写法,不懂的可以先去了解es6的模块化
partie css
<style lang="scss" scoped> ...样式 </style>
<!--Ici, vous pouvez utiliser scss (langage d'extension CSS) tant qu'il est installé" Les deux packages npm "sass-loader" et "node-sass" conviennent très bien, et vue-cli a déjà été configuré avec les paramètres pertinents. Si vous souhaitez utiliser less ou d'autres CSS pour étendre la parole, installez simplement les packages de compilation respectifs. Et scoped signifie que la portée du CSS se situe uniquement sous ce fichier. --->
Introduction
Comment référencer ce composant dans d'autres composants ?
Composant un (button.vue)
<template> <p class="button"> <button @click="onClick">{{text}}</button> </p> </template> <script> export default { props: ['text'], // 获取父组件的传值 data () { return { } }, methods: { onClick () { console.log('点击了子组件') } } } </script> <style lang="scss" scoped> .button { button { width: 100px; } } </style>
Composant deux (box.vue)
<template> <p class="box"> <v-button :text="text"></v-button> <!--使用组件并传值(text)--> </p> </template> <script> import Button from './button.vue' // 引入子组件 export default { components: { 'v-button': Button }, data () { return { text: '按键的name' } }, methods: { } } </script>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture recommandée :
Explication détaillée des étapes pour utiliser scss dans les projets angulaires
Comment utiliser vue2.0 +koa2+mongodb pour implémenter S'inscrire et se connecter
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

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

Comment configurer rapidement un avatar personnalisé dans Netflix

Comment personnaliser l'image d'arrière-plan dans Win11

Comment installer le composant DirectPlay de l'ancienne version de Windows 10

Comment créer et personnaliser des diagrammes de Venn en Python ?

Comment implémenter un middleware personnalisé dans CodeIgniter

Comment activer et personnaliser les fondus enchaînés dans Apple Music sur iPhone avec iOS 17

Comment personnaliser les paramètres des touches de raccourci dans Eclipse

Comment implémenter le composant de calendrier à l'aide de Vue ?
