<!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"> <!-- 如果要使用組件，直接，把組件的名稱，以 HTML 標簽的形式，引入到頁面中，即可 --> <mycom1></mycom1> </div> <script> // 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: {} }); </script> </body> </html>
<div id="app">
<!-- 還是使用 標簽形式,引入自己的組件 -->
<mycom2></mycom2>
</div>
<script>
// 注意:不論是哪種方式創建出來的組件,組件的 template 屬性指向的模板內容,必須有且只能有唯一的一個根元素
Vue.component('mycom2', {
template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3><span>123</span></div>'
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
<!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"> <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> <script> 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() { } }) </script> </body> </html>