<!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"/ * Vue.component ( "counter", {/ * global components * /<Script>> </ Script>
template: "<button @ click = 'count ++'> Click I try, you click {{count}} times </ the Button>",
the Data () {
return {
COUNT: 0,
}
}
}); * /
/ * local component * / const counter = { Template: "<h1 of> {{title}} </ h1 of>" , The props: [ 'title'] , // Template: "<Button @ the click = 'COUNT ++'> click I try, you click {{count}} times </ the Button> ", / * the Data () { return { COUNT: 0, } } * / } ; const forComponent = { Template: " <ul> <li V- = for 'in Item items'> Item {} {} </ Li> </ UL> " , / * The 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>Local and global components assembly Vue
Guess you like
Origin www.cnblogs.com/newcityboy/p/12081054.html
Recommended
Ranking