示例一代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件</title>
<style>
h2{color: blue;}
.box{
border:1px solid #ccc;
padding: 10px;
margin: 10px;
}
.box>div{
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="app">
<xue></xue>
<xue></xue>
<xue></xue>
<hai></hai>
<hai></hai>
</div>
<script src="./vue.js"></script>
<script>
//全局组件
// template:模板，一个组件的html，html用反引号包含(es6语法)，
// 可拥有自己独立的Html，css
// 数据:data加return,放return里
Vue.component("xue",{
template: `<h2 @click="add">计数 {{count}}</h2>` ,
data(){
return{
count:1
}
},
methods:{
add(){
this.count++;
}
}
})
//局部组件
// components:定义若干个在这个网页用到的组件，
// 第一个属性也是template,用法同上
var vm=new Vue({
el:"#app",
components:{
"hai":{
template:`
<div class="box">
<div v-for="(v,i) in nlist">
<span>{{i+1}}</span>
<span>{{v.title}}</span>
<button @click="del(i)">删除</button>
</div>
</div>
`,
data:function(){
return{
nlist:[
{id:1,title:"这里是标题"},
{id:2,title:"这里是标题"},
{id:3,title:"这里是标题"},
{id:4,title:"这里是标题"},
{id:5,title:"这里是标题"}
]
}
},
methods:{
del(index){
this.nlist.splice(index,1);
}
}
}
}
})
</script>
</body>
</html>
-
预览效果image.png
示例二：父子组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h2{ border:1px solid #ccc; box-shadow: 5px 5px 5px #ccc; padding: 10px; } </style> </head> <body> <div id="app"> <h2>{{msg}}</h2> <com title="父组件的数据" @xxevent="getc">Xue Hai</com> <com :title="msg">slot的内容</com> </div> <script src="./vue.js"></script> <script> var template=`<h2 @click="send">hello <slot></slot> {{title}}</h2>`; Vue.component("com",{ //template:`<h2 @click="send">hello <slot></slot> {{title}}</h2>`, template, props:['title'], methods:{ send(){ this.$emit("xxevent","xxxxxxxxxx"); } } }); var vm=new Vue({ el:"#app", data:{ msg:"来自父子组件的变量￥￥￥￥" }, methods:{ getc(val){ this.msg=val; } } }) </script> </body> </html> -
预览效果image.pngimage.png
