Maison > Article > interface Web > Exemple détaillé de composant composite Vue pour implémenter la fonction de formulaire d'inscription
Cet article présente principalement le composant composite Vue pour réaliser la fonction de formulaire d'inscription en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <my-article></my-article> </p> <script> //要采用组件化的方式来编写页面, // 把任何一个可被重用的元素封装成组件 // everything is component Vue.component("my-title",{ template:`<p> <h1>清风手纸</h1> <h4>原木</h4> </p>` }) Vue.component("my-content",{ //一个就可以用引号或者`` template:'<p>源于纯净,归于健康</p>' }) Vue.component("my-article",{ //当调用多个组件时要用``符号,而且要用顶层标签包含 template:` <p> <my-title></my-title> <my-content></my-content> </p> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <!--调用根组件 --> <my-form></my-form> </p> <script> //创建组件my-user Vue.component("my-user",{ template:` <label>用户名:</label> ` }) Vue.component("user-input",{ template:` <input type="text" placeholder="请输入用户名"/> ` }) Vue.component("my-pwd",{ template:` <label>密码:</label> ` }) Vue.component("pwd-input",{ template:` <input type="text" placeholder="请输入密码"/> ` }) Vue.component("my-login",{ template:` <button>登录</button> ` }) Vue.component("my-resign",{ template:` <button>注册</button> ` }) //复合组件作为根组件名字必须是烤串式的,驼峰的会报错 Vue.component("my-form",{ //可以用table、form、p等…… template:` <form> <my-user></my-user> <user-input></user-input> <br> <my-pwd></my-pwd> <pwd-input></pwd-input> <br> <my-resign></my-resign> <my-login></my-login> //写法或者 <my-login/> </form> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
Recommandations associées :
Comment utiliser le HTML et css Pour implémenter un exemple simple de formulaire d'inscription
Utiliser jQuery validate pour vérifier l'inscription Exemple de formulaire demonstration_jquery
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!