组件之全局注册
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button-counter title="title1: "></button-counter>
<button-counter title="title2: "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
props:['title'],
data: function(){
return{
count: 0
}
},
template:'<button v-on:click="count++">{{title}}You clicked me {{ count }}times</button>'
});
var vm = new Vue({
el: '#vm',
data:{
}
});
</script>
</body>
</html>
使用div标签将两个组件包裹起来，达到在同一个模板内使用多个html标签的效果
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button-counter title="title1: "></button-counter>
<button-counter title="title2: "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
props:['title'],
data: function(){
return{
count: 0
}
},
template:'<div><h1>hi</h1><button v-on:click="count++">{{title}}You clicked me {{ count }}times</button></div>'
});
var vm = new Vue({
el: '#vm',
data:{
}
});
</script>
</body>
</html>
定义函数监听
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button-counter title="title1: "></button-counter>
<button-counter title="title2: "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
props:['title'],
data: function(){
return{
count: 0
}
},
template:'<div><h1>hi</h1><button v-on:click="clickfun">{{title}}You clicked me {{ count }} times</button></div>',
methods:{
clickfun: function(){
this.count++;
}
}
});
var vm = new Vue({
el: '#vm',
data:{
}
});
</script>
</body>
</html>
$emit标签在组件内部传递数据
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button-counter title="title1: " @clicknow="clicknow"></button-counter>
<button-counter title="title2: "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
props:['title'],
data: function(){
return{
count: 0
}
},
template:'<div><h1>hi</h1><button v-on:click="clickfun">{{title}}You clicked me {{ count }} times</button></div>',
methods:{
clickfun: function(){
this.count++;
this.$emit('clicknow',this.count);
}
}
});
var vm = new Vue({
el: '#vm',
data:{
},
methods:{
clicknow: function(e){
console.log(e);
}
}
});
</script>
</body>
</html>
slot插槽标签
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button-counter title="title1: " @clicknow="clicknow">
<h2>hi...h2</h2>
</button-counter>
<button-counter title="title2: "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
props:['title'],
data: function(){
return{
count: 0
}
},
template:
'<div><h1>hi</h1><button v-on:click="clickfun">{{title}}You clicked me {{ count }} times</button><slot></slot></div>',
methods:{
clickfun: function(){
this.count++;
this.$emit('clicknow',this.count);
}
}
});
var vm = new Vue({
el: '#vm',
data:{
},
methods:{
clicknow: function(e){
console.log(e);
}
}
});
</script>
</body>
</html>
组件之局部注册【变量怎么传递？？？】
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<test></test>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{},
methods:{
clicknow: function(e){
console.log(e);
}
},
components:{
test: {
template: "<h2>h2....</h2>"
}
}
});
</script>
</body>
</html>
