Vue:全局组件与局部组件
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="seg1">
<alert></alert>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
Vue.component(
'alert',{
template:
'<button @click="on_click">弹弹弹</button>'
,
methods:{
on_click:function () {
alert('Yo.');
}
}
}
);
new Vue({
el:"#seg1"
})
</script>
</body>
</html>
局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="seg1">
<alert></alert>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
var alert_component={
template:
'<button @click="on_click">弹弹弹</button>'
,
methods:{
on_click:function () {
alert('Yo.');
}
}
};
new Vue({
el:"#seg1",
componets:{
alert:alert_component
}
})
</script>
</body>
</html>
