Vue-components
element.eleme.io
https://element.eleme.cn/#/
tag define ourself
first component- Vue.component()
template must include a root element, as <div>
"data" in the component must be a function.
Components:{ 'my-component-name':{}} In new Vue( )
end;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<div class="demo">I will be replaced</div>
<div class="demo">this is second, it be keep</div>
<script>
var vm = new Vue({
el: "#app",
template:"<div>huge</div>"
});
var vm1 = new Vue({
el: ".demo",
template:"<div> demo from template </div>"
});
</script>
</body>
</html>
<jin>only me, I will be replace</jin>
<jin>keep </jin>
<jin>keep </jin>
<script>
var vm = new Vue({
el: "jin",
template:"<div>from in template</div>"
});
</script>
first component- Vue.component()
template must include a root element, as <div>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:` <div>
my component
<lu>first<lu>
</div> `
})
new Vue({
el:"#app"
})
</script>
"data" in the component must be a function.
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:` <div>
<button @click="increate">{{count}}</button>
</div> `
,
data:function(){
return { count:0}
},
methods:{
increate:function(){this.count++;}
}
})
new Vue({
el:"#app"
})
</script>
Components:{ 'my-component-name':{}} In new Vue( )
end;
评论
发表评论