コンポーネントアプリケーション
コンポーネントの内部構造
コンポーネントはVueインスタンスに似ており、独自のデータとメソッドの属性がありますが、コンポーネントのデータはインスタンスのデータとは少し異なります。
インスタンス内のデータが対象とすることができる。成分のデータに加えなければならない方法で、この方法は、また戻らなければならないオブジェクト。
<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>
コンポーネント内のテンプレート属性バインディングテンプレートとデータ属性バインディングデータに加えて、イベントメソッドをバインドするためのメソッド属性もあります。
<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>
「+1」ボタンをクリックすると、クリック数に応じて増加します。
ボタンをクリックして、対応するページを表示します
特定の宝のログインと登録ページの効果を実現するには、クリックしてログインするとログインの内容が表示され、クリックして登録すると登録の内容が表示されます。レンダリングせずに次の効果を簡単に実現します。ページ。
<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>
クリックして登録
分析：Vueインスタンスにフラグを設定します。flagの値がtrueの場合はログインページにジャンプし、flagの値がfalseの場合は登録ページにジャンプします。v-ifまた、v-else命令は変換条件を制御します。これはタグのハイパーリンクである.preventため、クリック後にデフォルトのイベント（ジャンプ）が発生しないようにイベント修飾子を使用する必要があります。