vue復(fù)合組件實現(xiàn)注冊表單功能
更新時間：2017年11月06日 11:08:05 作者：匿名的girl
這篇文章主要為大家詳細(xì)介紹了vue復(fù)合組件實現(xiàn)注冊表單功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue注冊表單的具體代碼，供大家參考，具體內(nèi)容如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-article></my-article>
</div>
<script>
//要采用組件化的方式來編寫頁面，
// 把任何一個可被重用的元素封裝成組件
// everything is component
Vue.component("my-title",{
template:`<div>
<h1>清風(fēng)手紙</h1>
<h4>原木</h4>
</div>`
})
Vue.component("my-content",{
//一個就可以用引號或者``
template:'<p>源于純凈，歸于健康</p>'
})
Vue.component("my-article",{
//當(dāng)調(diào)用多個組件時要用``符號,而且要用頂層標(biāo)簽包含
template:`
<div>
<my-title></my-title>
<my-content></my-content>
</div>
`
})
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>
<div id="container">
<p>{{msg}}</p>
<!--調(diào)用根組件 -->
<my-form></my-form>
</div>
<script>
//創(chuàng)建組件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>
`
})
//復(fù)合組件作為根組件名字必須是烤串式的,駝峰的會報錯
Vue.component("my-form",{
//可以用table、form、div等……
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目中實現(xiàn)圖片裁剪功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要給大家介紹了關(guān)于對vue生命周期的深入理解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue中使用echarts以及簡單關(guān)系圖的點擊事件方式
這篇文章主要介紹了vue中使用echarts以及簡單關(guān)系圖的點擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了記錄vue做微信自定義分享的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue的Router是一個用于實現(xiàn)頁面跳轉(zhuǎn)和路由管理的插件,它可以幫助我們根據(jù)不同的URL請求加載不同的組件,以及實現(xiàn)前端路由功能,本文給大家介紹vue中的Router基本配置命令,感興趣的朋友跟隨小編一起看看吧2024-02-02
本篇文章主要介紹了詳解vue2.0組件通信各種情況總結(jié)與實例分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了優(yōu)化Vue項目編譯文件大小的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue下使用nginx刷新頁面404的問題解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
基于vue-upload-component封裝一個圖片上傳組件的示例
這篇文章主要介紹了基于vue-upload-component封裝一個圖片上傳組件的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
在前后端的開發(fā)中總是難免會遇到前后端的跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue2中vue.config.js簡單配置代理跨域的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01