1.概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<msg></msg>
</div>
<script src="js/vue.js"></script>
<script>
/* 组件：组件化开发（component）扩展HTML元素，封装可用的代码，
可以连续被调用，注意：组件命名不可以使用已经存在的标签名，有同级元素
时候，必须要有一个父集元素，*/
/* 全局组件 Vue.component("msg（组件名）",{
template:`
<ul>
<li>首页</li>
<li>导航</li>
<li>信息</li>
</ul>
`
})*/
new Vue({
el:"#app",
/*局部组件*/ components:{
"msg":{
template:`
<div>
<h1>我是组件</h1>
<a>我也是</a>
</div>
`
}
}
})
</script>
</body>
</html>
2.组件的补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--组件中data数据是一个函数，并有一个返回值，组件中的方法和newvue中相同-->
<!--组件的data的数据是一个函数，并有一个返回值，-->
<div id="app">
<msg></msg>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("msg",{
template:`
<div>
<p>{{num}}</p>
<button @click="atl">你好</button>
</div>
`,
data:function(){
return{
num:"我是组件"
}
},
methods:{
atl:function(){
alert("你好")
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
3.组件的嵌套
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--讲组件嵌套到父组件中-->
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>我是父组件</h1>
<my-child></my-child>
</div>
`
}),
Vue.component("my-child",{
template:`
<ul>
<li>子组件1的内容</li>
<li>子组件2的内容</li>
<li>子组件3的内容</li>
</ul>
`
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
4.父给子传值，用属性值，（父集元素在子集中显示，在整体传给父集在HTML中显示）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 父组件给子组件传值，用属性传，（父组件中的元素在子组件中显示）-->
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>我是父组件</h1>
<my-child v-bind:num="msg"></my-child>
<my-child1 v-bind:num1="list"></my-child1>
</div>
`,
data:function(){
return{
msg:"我是父组件中的内容",
list:["电视剧","电影","游戏"]
}
}
})
Vue.component("my-child",{
props:["num"],
template:`
<ul>
<li>子组件1的内容</li>
<li>子组件2的内容</li>
<li>子组件3的内容</li>
<a herf="#">{{num}}</a>
</ul>
`
})
Vue.component("my-child1",{
props:["num1"],
template:`
<ul>
<li v-for="value in num1">{{value}}</li>
</ul>
`
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
4.运用组件制作购物车方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-father',{
template:`
<div class='container'>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th class='text-center'>编号</th>
<th class='text-center'>名称</th>
<th class='text-center'>单价</th>
<th class='text-center'>数量</th>
<th class='text-center'>小计</th>
</tr>
</thead>
<my-child v-bind:product='goods'></my-child>
</table>
</div>
`,
data:function(){
return{
goods:[
{pname:'apple',price:3,count:3,sub:9},
{pname:'pear',price:4,count:4,sub:16},
{pname:'orange',price:5,count:5,sub:25}
]
}
}
})
Vue.component('my-child',{
props:['product'],
template:`
<tbody>
<tr v-for="(value,index) in product">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{value.count}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{value.sub}}</td>
</tr>
<tr>
<td colspan=5>总价:{{sum}}</td>
</tr>
</tbody>
`,
data:function(){
return{
sum:0
}
},
methods:{
add:function(ind){
this.product[ind].count++;
//小计、
this.product[ind].sub=this.product[ind].count*this.product[ind].price;
this.countSum();
},
redu:function(ind){
if(this.product[ind].count>1){
this.product[ind].count--;
}
//小计
this.product[ind].sub=this.product[ind].count*this.product[ind].price;
this.countSum();
},
countSum:function(){
for(var i=0,total=0;i<this.product.length;i++){
total+=this.product[i].sub;
}
this.sum=total;
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
5.用组件制作购物车方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#app td{
width: 300px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
}
#app{
margin-left: 3%;
margin-top: 100px;
}
#app p{
width: 1510px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<father></father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("father",{
template:`
<div>
<child v-bind:num="list"></child>
<child1 v-bind:num1="fruit"></child1>
</div>
`,
data:function(){
return{
list:["编号","名称","单价","数量","总价"],
fruit:[
{name:"香蕉",priec:1,num:0,add:0},
{name:"苹果",priec:2,num:0,add:0},
{name:"鸭梨",priec:3,num:0,add:0},
],
}
}
})
Vue.component("child",{
props:["num"],
template:`
<table cellspacing=0>
<thead>
<tr>
<td v-for="(val,index) in num">{{val}}</td>
</tr>
</thead>
</table>
`,
})
Vue.component("child1",{
props:["num1"],
template:`
<div>
<tbody>
<tr v-for="(val,index) in num1">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.priec}}</td>
<td><button v-on:click="add(index)"> + </button>{{val.num}}<button v-on:click="redu(index)"> - </button></td>
<td>{{val.add}}</td>
</tr>
</tbody>
<p>$:{{total}}</p>
</div>
`,
data:function(){
return{
total:0
}
},
methods:{
add:function(ind){
this.num1[ind].num++;
this.num1[ind].add=this.num1[ind].num*this.num1[ind].priec;
this.total+=this.num1[ind].priec
},
redu:function(ind){
if(this.num1[ind].num>1){
this.num1[ind].num--;
}
this.num1[ind].add=this.num1[ind].num*this.num1[ind].priec;
this.total-=this.num1[ind].priec
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
6.子组件向父组件传值（子组件中的值在父组件中显示用方法传值{事件传值}，）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<father></father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("father",{
template:`
<div>
<child @send="messever"></child>
<a href="#">{{mess}}</a>
</div>
`,
data:function(){
return{
mess:""
}
},
methods:{
messever:function(txt){
this.mess=txt
}
}
})
Vue.component("child",{
template:`
<button @click="msgever">按钮</button>
`,
data:function(){
return{
msg:"锦觅"
}
},
methods:{
msgever:function(){
this.$emit("send",this.msg)
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
7.子组件向父组件传值例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<father></father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("father",{
template:`
<div>
<h1>这是父组件</h1>
<p>这是子组件传来的值：{{mess}}</p>
<child @send="e"></child>
</div>
`,
data:function(){
return{
mess:""
}
},
methods:{
e:function(txt){
this.mess=txt
}
}
})
Vue.component("child",{
template:`
<div>
<h1>这是子组件传</h1>
<input type="text" v-model="msg">
<button @click="add">向父组件中添加</button>
</div>
`,
data:function(){
return{
msg:""
}
},
methods:{
add:function(){
this.$emit("send",this.msg)
this.msg=""
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
8.同级之间传值（用中间量传值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<borenth></borenth>
<borenth1></borenth1>
</div>
<script src="js/vue.js"></script>
<script>
var bus=new Vue();
Vue.component("borenth",{
template:`
<button @click=chuan>发送数据</button>
`,
data:function(){
return{
msg:"香蜜沉沉"
}
},
methods:{
chuan:function(){
bus.$emit("send",this.msg)
}
}
})
Vue.component("borenth1",{
template:`
<h1>{{mess}}</h1>
`,
data:function(){
return{
mess:""
}
},
mounted:function(){
bus.$on("send",msg=>{
this.mess=msg
})
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
9.子传父的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<chat></chat>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('chat',{
template:`
<div>
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
<user @send='rcMsg' userName='jack'></user>
<user @send='rcMsg' userName='rose'></user>
</div>
`,
data:function(){
return{
arr:[]
}
},
methods:{
rcMsg:function(txt){
this.arr.push(txt)
}
}
})
Vue.component('user',{
props:['userName'],
template:`
<div>
<label>{{userName}}</label>
<input type='text' v-model='inputVal'>
<button @click='sendMsg'>发送</button>
</div>
`,
data:function(){
return{
inputVal:''
}
},
methods:{
sendMsg:function(){
this.$emit('send',this.userName+":"+this.inputVal)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
网友评论