組件 組件的創建方式 第一種 第二種 第三種 組件中的data和method 一個計數器 組件切換 方式一 方式二 動畫切換 ...
組件
組件的創建方式
第一種
<div id="app">
<!-- 如果要使用組件，直接，把組件的名稱，以 HTML 標簽的形式，引入到頁面中，即可 -->
<mycom1></mycom1>
</div> // 1.1 使用 Vue.extend 來創建全局的Vue組件
// var com1 = Vue.extend({
// template: '<h3>這是使用 Vue.extend 創建的組件</h3>' // 通過 template 屬性，指定了組件要展示的HTML結構
// })
// 1.2 使用 Vue.component('組件的名稱', 創建出來的組件模板對象)
// Vue.component('myCom1', com1)
// 如果使用 Vue.component 定義全局組件的時候，組件名稱使用了 駝峰命名，則在引用組件的時候，需要把 大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈接；
// 如果不使用駝峰,則直接拿名稱來使用即可;
// Vue.component('mycom1', com1)
// Vue.component 第一個參數:組件的名稱,將來在引用組件的時候,就是一個 標簽形式 來引入 它的
// 第二個參數: Vue.extend 創建的組件 ,其中 template 就是組件將來要展示的HTML內容
Vue.component('mycom1', Vue.extend({
template: '<h3>這是使用 Vue.extend 創建的組件</h3>'
}))
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});第二種
<div id="app">
<!-- 還是使用 標簽形式,引入自己的組件 -->
<mycom2></mycom2>
</div> // 註意:不論是哪種方式創建出來的組件,組件的 template 屬性指向的模板內容,必須有且只能有唯一的一個根元素
Vue.component('mycom2', {
template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3><span>123</span></div>'
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});第三種
<div id="app">
<mycom3></mycom3>
<!-- <login></login> -->
</div>
<div id="app2">
<mycom3></mycom3>
<login></login>
</div>
<!-- 在 被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結構 -->
<template id="tmpl">
<div>
<h1>這是通過 template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1>
<h4>好用,不錯!</h4>
</div>
</template>
<template id="tmpl2">
<h1>這是私有的 login 組件</h1>
</template> Vue.component('mycom3', {
template: '#tmpl'
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
var vm2 = new Vue({
el: '#app2',
data: {},
methods: {},
filters: {},
directives: {},
components: { // 定義實例內部私有組件的
login: {
template: '#tmpl2'
}
},
beforeCreate() { },
created() { },
beforeMount() { },
mounted() { },
beforeUpdate() { },
updated() { },
beforeDestroy() { },
destroyed() { }
})組件中的data和method
<div id="app">
<mycom1></mycom1>
</div> // 1. 組件可以有自己的 data 數據
// 2. 組件的 data 和 實例的 data 有點不一樣,實例中的 data 可以為一個對象,但是 組件中的 data 必須是一個方法
// 3. 組件中的 data 除了必須為一個方法之外,這個方法內部,還必須返回一個對象才行;
// 4. 組件中 的data 數據,使用方式,和實例中的 data 使用方式完全一樣!!!
Vue.component('mycom1', {
template: '<h1>這是全局組件 --- {{msg}}</h1>',
data: function () {
return {
msg: '這是組件的中data定義的數據'
}
}
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});一個計數器
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>var dataObj = { count: 0 }
// 這是一個計數器的組件, 身上有個按鈕,每當點擊按鈕,讓 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
// return dataObj
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});組件切換
方式一
<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> Vue.component('login', {
template: '<h3>登錄組件</h3>'
})
Vue.component('register', {
template: '<h3>註冊組件</h3>'
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});方式二
<div id="app">
<a href="" @click.prevent="comName='login'">登錄</a>
<a href="" @click.prevent="comName='register'">註冊</a>
<!-- Vue提供了 component ,來展示對應名稱的組件 -->
<!-- component 是一個占位符, :is 屬性,可以用來指定要展示的組件的名稱 -->
<component :is="comName"></component>
<!-- 總結:當前學習了幾個 Vue 提供的標簽了??? -->
<!-- component, template, transition, transitionGroup -->
</div> // 組件名稱是 字元串
Vue.component('login', {
template: '<h3>登錄組件</h3>'
})
Vue.component('register', {
template: '<h3>註冊組件</h3>'
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
},
methods: {}
});動畫切換
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}<div id="app">
<a href="" @click.prevent="comName='login'">登錄</a>
<a href="" @click.prevent="comName='register'">註冊</a>
<!-- 通過 mode 屬性,設置組件切換時候的 模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
// 組件名稱是 字元串
Vue.component('login', {
template: '<h3>登錄組件</h3>'
})
Vue.component('register', {
template: '<h3>註冊組件</h3>'
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
},
methods: {}
});
