使用 components
components
- 元件執行個體定義方式：
<script>
// 建立 Vue 執行個體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: { // 定義子元件
account: { // account 元件
template: '<div><h1>這是Account元件{{name}}</h1><login></login></div>', // 在這裡使用定義的子元件
components: { // 定義子元件的子元件
login: { // login 元件
template: "<h3>這是登入元件</h3>"
}
}
}
}
});
</script> - 引用元件：
<div id="app">
<account></account>
</div> 使用 flag
v-if
v-else
flag
v-if
v-else
- 頁面結構：
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<my-com1 v-if="flag"></my-com1>
<my-com2 v-else="flag"></my-com2>
</div> - Vue執行個體定義：
<script>
Vue.component('myCom1', {
template: '<h3>奔波霸</h3>'
})
Vue.component('myCom2', {
template: '<h3>霸波奔</h3>'
})
// 建立 Vue 執行個體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {}
});
</script> 使用 :is
:is
- 元件執行個體定義方式：
// 登入元件
const login = Vue.extend({
template: `<div>
<h3>登入元件</h3>
</div>`
});
Vue.component('login', login);
// 注冊元件
const register = Vue.extend({
template: `<div>
<h3>注冊元件</h3>
</div>`
});
Vue.component('register', register);
// 建立 Vue 執行個體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: { comName: 'login' },
methods: {}
}); - 使用
component
:is
<div id="app">
<a href="#" @click.prevent="comName='login'">登入</a>
<a href="#" @click.prevent="comName='register'">注冊</a>
<hr>
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div> <!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<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>
<script>
// 元件名稱是 字元串
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: {}
});
</script>
</body>
</html> - 添加切換樣式：
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(30px);
}
.v-enter-active,
.v-leave-active {
position: absolute;
transition: all 0.3s ease;
}
h3{
margin: 0;
}
</style> <!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="./lib/vue-2.4.0.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<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>
<script>
// 元件名稱是 字元串
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: {}
});
</script>
</body>
</html> ![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)