一.组件基础
1.全局组件
<div class='nr'>
<my-component><.my-conmponent>
</div>
<script scr:"js链接"></script>
<script>
Vue.component('my-component',{ ('my-component' 引号中的内容由自己定，但格式必须为‘xx-xx’)
template:`
<li>这是组件部分</li>
`
})
new Vue({
el:".nr"
})
</script>
2.局部组件
<div class='nr'>
<my-component><.my-conmponent>
</div>
<script scr:"js链接"></script>
<script>
new Vue({
el:".nr",
components:{
"my-component":{
template:`
<li>这是组件部分</li>
`
}
}
})
二.组件进阶
1.组件中加入点击事件(点击按钮页面弹出数字“123456”)
<div class='nr'>
<my-first><.my-first>
</div>
<script scr:"js链接"></script>
<script>
Vue.component('my-first',{
template:`
<div>
<li>{{msg}}</li>
<button @click='fun'>按钮</button>
</div>
`,
data:function(){
return{
msg:'这是一个组件'
}
},
methods:{
fun:function(){
alert(123456)
}
}
})
new Vue({
el:'.nr'
})
</script>
2.元素属性--父传子(属性传递)
<div class='nr'>
<my-one><.my-one>
</div>
<script scr:"js链接"></script>
<script>
Vue.component('my-one',{
template:`
<div>
<h1>这是my-one标签</h1>
<my-two v-bind:msg='mas'></my-two>
</div>
`,
data:function(){
return{
mas:'这是一个p标签'
}
}
}),
Vue.component('my-two',{
props:['msg'], （‘props’是父传子组件的关键属性）
template:`
<div>
<h2>这是my-two标题</h2>
<p>{{msg}}</p>
</div>
`
})
new Vue({
el:'.nr'
})
</script>
3.元素属性--子传父(事件传递)
<div class='nr'>
<my-first><.my-first>
</div>
<script scr:"js链接"></script>
<script>
Vue.component('my-first',{
template:`
<div>
<h1>{{asd}}</h1>
<my-second @chuan="di"></my-second>
</div>
`,
data:function(){
return{
asd:''
}
},
methods:{
di:function(text){
this.asd=text
}
}
});
Vue.component('my-second',{
template:`
<button @click='fun'>传递</button>
`,
data:function(){
return{
txt:'组件子传父'
}
}，
methods:{
fun:function(){
this.$emit('chuan',this.txt)
（‘’，this._ 引号中为自定义的函数名）
}
}
})
new Vue({
el:'.nr'
})
</script>
4.元素属性--非父子传递(同级传递)
<div class='nr'>
<my-first><.my-first>
<my-one></my-one>
</div>
<script scr:"js链接"></script>
<script>
var low=new Vue();
Vue.component('my-first',{
template:`
<div>
<h1>这是first事件</h1>
<button @click="fun">传递</button>
</div>
`,
data:function(){
return{
txt:"将内容传给one"
}
},
methods:{
fun:function(){
low.$emit('show',this.txt)
}
}
});
Vue.component('my-one',{
template:`
<div>
<h1>这是one组件</h1>
<p>{{text}}</p>
</div>
`,
data:function(){
return{
text:''
}
},
mounted:function(){
low.$on('show',txt=>{
this.text=txt
})
}
});
new Vue({
el:'.nr'
})
</script>
练习1.添加列表项
<div class="nr">
<my-first></my-first>
</div>
<script src="js文档/vue.js"></script>
<script>
Vue.component('my-first',{
template:`
<div>
<input type="text" v-model="kong">
<button @click="fun">添加</button>
<my-second v-bind:txt="arr"></my-second>
</div>
`,
data:function(){
return{
arr:['吃饭','睡觉','打豆豆'],
kong:''
}
},
methods:{
fun:function(){
this.arr.push(this.kong);
this.kong=''
}
}
});
Vue.component('my-second',{
props:['txt'],
template:`
<ul>
<li v-for="(value,index) in txt">
{{value}}<button @click="shan(index)">删除</button>
</li>
</ul>
`,
methods:{
shan:function(ind){
this.txt.splice(ind,1)
}
}
});
new Vue({
el:'.nr'
})
</script>
练习2.计算总价
<div class="nr">
<my-first></my-first>
</div>
<script src="js文档/vue.js"></script>
<script>
Vue.component('my-first',{
template:`
<my-second v-bind:list="arr" v-bind:zj="he"></my-second>
`,
data:function(){
return{
arr:[
{name:'香蕉'，price:1,count:0,sub:0},
{name:'苹果'，price:2,count:0,sub:0},
{name:'梨'，price:3,count:0,sub:0}
],
he:0
}
}
});
Vue.component('my-second',{
props:['list','zj'],
template:`
<div>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{index+1}}</td>
<td>{{fruit.name}}</td>
<td>{{fruit.price}}</td>
<td>
<button @click="jian(index)">-</button>
<span>{{fruit.count}}</span>
<button @click="jia(index)">+</button>
</td>
<td>{{fruit.sub}}</td>
</tr>
<tr>
<td colspan="5">总价:{{zj}}元</td>
</tr>
</tbody>
</table>
</div>
`,
methods:{
jian:function(ind){
if(this.list[ind].count>0){
this.list[ind].count--;
}
this.list[ind].sub=this.list[ind].price*this.list[ind].count;
this.zong()
},
jia:function(ind){
this.list[ind].count++;
this.list[ind].sub=this.list[ind].price*this.list[ind].count;
this.zong()
},
zong:function(){
for(var i=0;tota=0;i<this.list.length;i++){
tota+=this.list[i].sub
}
this.zj=tota
}
}
});
new Vue({
el:'.nr'
})
</script>
网友评论