Vuejs學習筆記(二)-3.使用語法糖建立元件，節省程式碼
阿新 • • 發佈：2021-07-02
之前建立元件的程式碼略顯繁瑣，可以簡化，使用到語法糖。
1.未使用語法糖建立全域性元件
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-vue元件的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/2 14:43 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15<title>01-vue元件的基本使用</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <!-- 3.使用元件--> 21 <cpn1></cpn1> 22 </div> 23 24 <script src="../js/vue.js"></script> 25 <script> 26 27 // 1.建立元件構造器物件28 const cpn = Vue.extend({ 29 template: ` 30 <div> 31 <h2>我是標題</h2> 32 <p>我是內容</p> 33 </div> 34 ` 35 }) 36 37 // 2.註冊元件 38 Vue.component('cpn1', cpn1) 39 const app = new Vue({ 40 el: '#app', 41 data: { 42 message: 'hello' 43}, 44 }) 45 </script> 46 </body> 47 </html>
2.使用語法糖建立全域性元件
<!-- @author:invoker @project:project_lianxi @file: 01-vue元件的基本使用.html @contact:invoker2021@126.com @descript: @Date:2021/7/2 14:43 @version: html5 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-vue元件的基本使用</title> </head> <body> <div id="app"> <h2>{{ message }}</h2> <!-- 3.使用元件--> <cpn1></cpn1> </div> <script src="../js/vue.js"></script> <script> // 1.建立元件構造器物件 // const cpn1 = Vue.extend({ // template: ` // <div> // <h2>我是標題</h2> // <p>我是內容</p> // </div> // ` // }) // 2.註冊元件 Vue.component('cpn1', { template: ` <div> <h2>我是標題</h2> <p>我是內容</p> </div> ` }) const app = new Vue({ el: '#app', data: { message: 'hello' }, }) </script> </body> </html>
3.使用語法糖建立區域性元件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05 註冊元件的語法糖</title> 6 </head> 7 <body> 8 9 <div id="app3"> 10 <h1>{{message}}</h1> 11 <cpn3></cpn3> 12 </div> 13 </body> 14 <script src="../js/vue.js"></script> 15 <script> 16 17 // case3.使用元件語法糖-區域性元件 18 const app3 = new Vue({ 19 el: '#app3', 20 data:{ 21 message:'case3.使用元件語法糖-區域性元件' 22 }, 23 components:{ 24 'cpn3':{ 25 template:` 26 <div> 27 <h1>元件3-區域性元件</h1> 28 </div> 29 ` 30 } 31 } 32 33 }) 34 35 36 </script> 37 </html>