Component application
The internal structure of the component
Components are similar to Vue instances and have their own data and methods attributes, but the data in the component is a bit different from the data of the instance:
The data in the instance can be an object. In addition to the data in the component must be a method , the method must also return an object.
<div id="app">
<mycom1/>
</div>
<script>
Vue.component('mycom1',{
template:'<h1>这是全局组件----{
{msg}}</h1>',
data:function(){
return {
msg:'这是组件中的data定义的数据'
}
}
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
In addition to the template attribute binding template and data attribute binding data inside the component, there can also be methods attribute to bind event methods:
<div id="app">
<counter/>
</div>
<template id="tmp">
<div>
<input type="button" value="+1" @click='btn'>
<span>{
{count}}</span>
</div>
</template>
<script>
Vue.component('counter',{
template:'#tmp',
data:function(){
return{
count:0
}
},
methods:{
btn(){
this.count++;
}
}
})
new Vue({
el:'#app',
data:{
}
})
</script>
Click the "+1" button, and it will increase according to the number of clicks.
Click the button to display the corresponding page
To achieve the effect of a certain treasure login and registration page, click to log in and the content of the login appears, and click to register, and the content of the registration appears. Here is a simple realization of the following effect, without rendering the page.
<div id="app">
<a href="#" @click.prevent='flag=true'>登录</a>
<a href="#" @click.prevent='flag=false'>注册</a>
<login v-if='flag'></login>
<register v-else='flag'></register>
</div>
<template id="tmp1">
<div>
<h1>登录的界面</h1>
</div>
</template>
<template id="tmp2">
<div>
<h1>注册的界面</h1>
</div>
</template>
<script>
Vue.component('login',{
template:'#tmp1',
})
Vue.component('register',{
template:'#tmp2'
})
new Vue({
el:'#app',
data:{
flag:true,
}
})
</script>
Click to register.
Analysis: Set the flag in the Vue instance. When the value of flag is true, jump to the login page; when the value of flag is false, jump to the registration page. v-ifAnd v-elseinstructions control the conversion conditions; because it is a hyperlink a tag, it is necessary to use an event modifier .preventto prevent the default event (jump) from occurring after clicking.