组件的作用,方便代码进行服用.
单个内容定义组件方式1:
//js中定义
vue.component('组件名称',{template:'组件内容'})
//另外仍然需要定义该组件所在的vue对象,否则,组件应用到html的标签中式不会生效的!!!!!!
new vue({el:'组件所在父级标签id或类之类的'})
//html中使用:
<父级标签> <!--:必须是已定义过vue对象的标签>
<组件名称>***</组件名称>
</父级标签>
多个内容需要组件循环加载的定义方式
vue.component('组件名称',{
template:'<标签>{{绑定属性1}},{{绑定属性2}}</标签>'', //将绑定的多个属性显示到标签里面
props:['自定义属性名1','自定义属性名2'] //通过自定义的属性来便于html的vue对象标签绑定,已便传递多个值到组件中
}
//多个属性值具体应用到html的方法如下:
<组件名称 v-band:自定义属性1=''传递值1'' v-band:自定义属性2='传递值2' ></组件名称>
关于template的说明:
组件里面的template 可以包含标签样式,里面的标签并且可以绑定属性,数据,事件,方法
//-----------------------本次测试所用代码-------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zuj">
<myzj v-for="(ite,idx) in szz" v-bind:shuxin='ite' v-bind:sindex='idx'></myzj>
<!-- 循环度szz数字里面的元素和索引 同时绑定 shuxin 及sinex 两个自定义属性 -->
</div>
</body>
<script type ='text/javascript'>
// 定义一个新组件
Vue.component('myzj',{
template:'<p>下标{{sindex}}内容是{{shuxin}}</p>',
props:['shuxin','sindex'] //用props关键字自定义shuxin sindex两个属性
})
new Vue({el:'#zuj',
data:{
szz:['1111','22222','3333']
}
})
</script>
</html>