Vue系列之 => vue元件建立
阿新 • • 發佈：2018-12-31
建立方式 一
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9<script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="app"> 16 <!-- 如果要使用元件，直接把元件的名稱以HTML標籤的形式，引入到頁面中即可 --> 17<!-- 註冊元件使用的駝峰命名，在引用的時候要用 - 分開並轉換成小寫 --> 18 <my-com1></my-com1> 19 </div> 20 <script> 21 // 1.1 使用Vue.extend來建立全域性的Vue元件。 22 var com1 = Vue.extend({ 23 template : '<h1>這是元件化的</h1>' 24 }) 25 //1.2 使用Vue.component('元件的名稱,創建出來的元件模板物件)26 Vue.component('myCom1',com1) 27 28 //另一種寫法 29 // Vue.component('myCom1',Vue.extend({ 30 // template : '<h1>這是元件化的</h1>' 31 // })) 32 33 var vm = new Vue({ 34 el: '#app', 35 data: {}, 36 methods: { 37 38 }, 39 }) 40 </script> 41 </body> 42 43 </html>
建立方式二
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="app"> 16 <!-- 使用標籤形式引入元件 --> 17 <mycom2></mycom2> 18 </div> 19 <script> 20 Vue.component('mycom2',{ 21 // 任何方式建立的元件必須只能有一個根元素 22 // 錯誤 ：-> template : '<h1>這是元件化的</h1><span>123</span>' 23 template : '<div><h1>這是元件化的</h1><span>123</span></div>' 24 }) 25 26 var vm = new Vue({ 27 el: '#app', 28 data: {}, 29 methods: { 30 31 }, 32 }) 33 </script> 34 </body> 35 36 </html>
建立方式三
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="app"> 16 <!-- 以標籤的形式 引用元件 --> 17 <mycom3></mycom3> 18 </div> 19 20 <!-- 在被VUE控制的app外層，使用template元素定義元件的模板結構 --> 21 <template id="tmp"> 22 <div> 23 <h1>這是通過template元素在外部定義的元件結構，這個方式有程式碼的智慧提示和高亮</h1> 24 <h4>這是一個h4標籤</h4> 25 </div> 26 </template> 27 28 <script> 29 Vue.component('mycom3',{ 30 template : '#tmp' 31 }) 32 var vm = new Vue({ 33 el: '#app', 34 data: {}, 35 methods: { 36 37 }, 38 }) 39 </script> 40 </body> 41 42 </html>
之前三種方式都是全域性建立的
私有化元件建立方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="app1"> 16 <login></login> 17 </div> 18 19 <div id="app"> 20 <!-- 以標籤的形式 引用元件 --> 21 <mycom3></mycom3> 22 </div> 23 24 <!-- 在被VUE控制的app外層，使用template元素定義元件的模板結構 --> 25 <template id="tmp"> 26 <div> 27 <h1>這是通過template元素在外部定義的元件結構，這個方式有程式碼的智慧提示和高亮</h1> 28 <h4>這是一個h4標籤</h4> 29 </div> 30 </template> 31 <template id="tmp1"> 32 <div> 33 <h1>這是私有元件template渲染的</h1> 34 </div> 35 </template> 36 <script> 37 Vue.component('mycom3',{ 38 template : '#tmp' 39 }) 40 var vm = new Vue({ 41 el: '#app', 42 data: {}, 43 methods: { 44 45 }, 46 }) 47 48 var vm2 = new Vue({ 49 el : '#app1', 50 data : {}, 51 methods : {}, 52 filters : {}, //過濾器 53 directives : {}, //指令 54 components : { //私有元件 55 // login 元件名 56 login : { 57 template : '#tmp1' 58 } 59 }, 60 61 // 鉤子函式 62 beforeCreate() {}, 63 created(){}, 64 beforeMount(){}, 65 mounted(){}, 66 beforeUpdate(){}, 67 updated(){}, 68 beforeDestroy(){}, 69 destroyed(){}, 70 }) 71 </script> 72 </body> 73 74 </html>