全局组件
可在任何实例的vm里调用
方法一
这个好用,方便.
<!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="div">
<!--调用组件-->
<demo></demo>
<demo></demo>
<demo></demo>
</div>
<div id="div2">
<demo></demo>
<demo></demo>
<demo></demo>
</div>
<!--编写组件-->
<template id="tmp">
<!--如果想在html结构中,写入多个标签,外层必须包裹容器-->
<div>
<p>{{ msg }}</p>
<h1 @click="fn()">{{ name }}</h1>
</div>
</template>
</body>
</html>
<script type="text/javascript">
// 实例组件并取名
Vue.component('demo',{
// 绑定组件
template:"#tmp",
// 设置变量
data:function(){
return{
msg:'hello',
name:'leition'
}
},
// 设置方法
methods:{
fn:function(){
alert('OK!')
}
}
});
var vm = new Vue({
el:'#div'
})
var vm2 = new Vue({
el:'#div2'
})
</script>
方法二
这个蠢,自己试试就知道了
<!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="div">
<demo></demo>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('demo',{
template:"<div><p>{{ msg }}</p><h1 @click='fn()'>{{ name }}</h1></div>",
data:function(){
return {
msg: 'hello',
name: 'leition'
}
},
methods:{
fn:function(){
alert('lala');
}
}
});
var vm = new Vue({
el:'#div'
})
</script>
组件练习地址:https://blog.csdn.net/qq_39383675/article/category/8256374