<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello2</title>
</head>
<body>
<div id="app">
<counter :title="msg"></counter>
<for-component :items="lessons"></for-component>
<!-- <counter></counter>
<counter></counter>-->
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
/*全局组件*/
/* Vue.component("counter", {
template: "<button @click='count++'>点击我试试,您点击了{{count}}次</button>",
data(){
return {
count:0,
}
}
});*/
/*局部组件*/
const counter = {
template:"<h1>{{title}}</h1>",
props:['title'],
//template: "<button @click='count++'>点击我试试,您点击了{{count}}次</button>",
/* data(){
return {
count:0,
}
}*/
};
const forComponent ={
template:"<ul><li v-for='item in items'>{{item}}</li></ul>",
/* props:['items']*/
props:{
items:{
type:Array,
default:['java']
}
}
}
const app = new Vue({
el:"#app",
data:{
msg: "hello,everyone,I am zmy",
lessons:["tomcat","java","ios"]
},
components:{
//counter:counter
counter,forComponent
}
});
</script>
</body>
</html>Vue局部组件和全局组件
猜你喜欢
转载自www.cnblogs.com/newcityboy/p/12081054.html
今日推荐
周排行