<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父组件与子组件之间通信练习</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<my-login></my-login>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('my-label',{
props:["myLabel"],
template:`
<div>
<label for="">{{myLabel}}</label>
</div>
`
});
Vue.component('my-input',{
template: `
<div>
<input type="text">
</div>
`
});
Vue.component('my-button',{
props: ["myButton"],
template:`
<span>
<button>{{myButton}}</button>
</span>
`
});
Vue.component('my-login',{
data:function () {
return {
uname:'用户名',
upwd:'密码',
login:'登录',
register:'注册'
}
},
template:`
<div>
<my-label v-bind:myLabel="uname"></my-label>
<my-input></my-input><br>
<my-label v-bind:myLabel="upwd"></my-label>
<my-input></my-input><br>
<my-button v-bind:myButton="login"></my-button>
<my-button v-bind:myButton="register"></my-button>
</div>
`
});
let vm = new Vue({
el:'#app',
data:{
msg:"Hello Vue.js"
}
});
</script>
</body>
</html>
vue-例5-20习题.html
原创
©著作权归作者所有:来自51CTO博客作者虾米大王的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue-例5-21习题.html
【代码】vue-例5-21习题.html。
javascript 前端 html Vue vue.js -
vue-例2-5属性绑定.html
【代码】vue-例2-5属性绑定.html。
javascript vue.js 前端 html Vue -
vue-例5-10props验证.html
【代码】vue-例5-10props验证.html。
javascript 前端 html vue.js Vue -
vue-例5-8命名约定.html
【代码】vue-例5-8命名约定.html。
html css css3 bc ci -
vue-例5-6演示嵌套组件.html
【代码】vue-例5-6演示嵌套组件.html。
vue.js javascript 前端 Vue html -
vue-例3-13v-model5.html
【代码】vue-例3-13v-model5.html。
javascript vue.js 前端 html Vue -
vue-例5-11单slot插槽.html
【代码】vue-例5-11单slot插槽.html。
javascript vue.js 前端 html 插槽 -
vue-例9-5演示命名视图.html
【代码】vue-例9-5演示命名视图.html。
javascript 前端 vue.js html ide -
vue-例4-5Vue事件修饰符.html
【代码】vue-例4-5Vue事件修饰符.html。
vue.js javascript 前端 Vue html -
vue-例2-5属性绑定4.html
【代码】vue-例2-5属性绑定4.html。
javascript vue.js 前端 html 百度 -
vue-例5-15组件实战.html
【代码】vue-例5-15组件实战.html。
html css 前端 bc ci -
vue-例5-15组件通信.html
【代码】vue-例5-15组件通信.html。
javascript vue.js 前端 html Vue -
vue-例5-10props验证2.html
【代码】vue-例5-10props验证2.html。
javascript 前端 html Boo vue.js -
vue-例7-5多组件的过渡.html
【代码】vue-例7-5多组件的过渡.html。
css javascript html vue.js -
vue-例2-5属性绑定3.html
【代码】vue-例2-5属性绑定3.html。
javascript vue.js 前端 html Vue -
vue-例5-1自定义组件.html
【代码】vue-例5-1自定义组件.html。
vue.js javascript 前端 html Vue -
vue-例2-5属性绑定2.html
【代码】vue-例2-5属性绑定2.html。
vue.js javascript 前端 html Vue