Vue學習-組件的基本使用（局部組件）

目錄

• 示例代碼
• 1.建立組件（構造器對象建立-Vue.extend）
• 2.註冊組件
• 3.使用組件
• 4.語法糖建立並註冊組件

示例代碼

http://jsrun.net/H8vKp/edit

1.建立組件（構造器對象建立-Vue.extend）

const cpnC=Vue.extend({
      template:`
            <div>
                  <h2>我是標題</h2>  
                  <p>這裏是內容</p>      
            </div>` 
})

ES6定義字符器用"`"定義的字符串，能夠換行

2.註冊組件

//這種是全局註冊的，在多個vue實例中均可以使用
//Vue.component('my-cpn',cpnC);

//經過components局部註冊組件
const app=new Vue({
         el:"#app",
         components:{
               myCpn:cpnC   //myCpn爲標籤名，在html使用時要轉換爲my-cpn命名法
            },
         data:{
            
            }
      })

3.使用組件

<div id="app">
    <my-cpn></my-cpn>
</div>

4.語法糖建立並註冊組件

• 示例代碼：http://jsrun.net/kTvKp/edit

//語法糖建立並註冊組件（內部仍是調用了Vue.extend函數）
Vue.component('my-cpn', {
 template: `
        <div>
            <h2>我是標題</h2>
            <p>這裏是內容</p>
        </div> 
        `
}) //這種爲全局註冊組件


const app = new Vue({
    el: "#app",
    data: {
        message: "我是message"
    },
    components:{
        cnp1:{
            template:`
                <div>
                    <h1>局部註冊</h1>
                    <p>這裏是語法糖局部註冊</p>
                </div>
            `
        }
    }
})