目錄

第一章:元件化與模組的區別

第二章:元件的建立

2.1 建立元件的方式

2.1.1 第一種方式

2.1.2 第二種方式

2.1.3 第三種方式

2.2 使用定義私有元件

2.3 元件中的data

2.4 不同元件之間的切換

2.4.1 使用v-if與v-else切換元件

2.4.2 使用Vue提供的component元素切換元件

2.5 總結

第三章 元件的傳值

3.1 父元件向子元件傳值

3.2 父元件向子元件傳遞方法

3.3 子元件向父元件傳值

第四章:使用ref獲取DOM元素和元件引用

4.1 基本應用

4.2 利用ref引入元件

---

 

第一章:元件化與模組的區別

第二章:元件的建立

2.1 建立元件的方式

2.1.1 第一種方式

用extend建立template再用component加入元件

也可以直接加入元件

 

 

2.1.2 第二種方式

 

2.1.3 第三種方式

模板字串的書寫有點麻煩,在字串裡容易漏

2.2 使用定義私有元件

所謂全域性就是不只是用在app中,還能用在別的地方.

 

2.3 元件中的data

下圖的元件應用會相互影響

進行如下修改後便不會了,每次建立新的元件例項的時候,都會呼叫一下data函式,會return一個新開闢的物件,這樣就保證了每個物件都是獨有的.

2.4 不同元件之間的切換

2.4.1 使用v-if與v-else切換元件

2.4.2 使用Vue提供的component元素切換元件

component後的is,因為加上了is,所以是要繫結一個值,如果要繫結的值是字串的話要加上''.

2.5 總結

公有:

私有:

應用:

第三章 元件的傳值

3.1 父元件向子元件傳值

                             

                              

3.2 父元件向子元件傳遞方法

模板:

 

繫結:

應用:

 

3.3 子元件向父元件傳值

模板:

 

繫結:

 

應用:

第四章:使用ref獲取DOM元素和元件引用

因為在Vue.js中不推薦操作DOM元素,所以Vue提供了一個ref.

4.1 基本應用

在h3中放置一個ref

可以看到在ref中引用了DOM元素

通過this即可應用

如果放置兩個ref,則會

4.2 利用ref引入元件

 通過ref可以訪問子元件中的值與方法