vue 學習記錄

時間 2019-11-06

標籤 vue 學習記錄简体版

原文原文鏈接

模板：一般是指html模板javascript

組件component的概念：html

在 Vue 裏，一個組件本質上是一個擁有預約義選項的一個 Vue 實例,vue

將組件看做自定義的HTML元素。使用組件的前提是建立並註冊組件java

vue組件介紹：http://blog.csdn.net/xingjigongsi/article/details/54602404瀏覽器

Vue.js的組件的使用有3個步驟：app

1:建立組件構造器------- 調用Vue.extend({template:''})方法建立組件構造器 Vue.extend(html 模板）函數

2:註冊組件------調用Vue.component()方法，註冊組件spa

3:使用組件------------在Vue實例的做用範圍內使用組件.net

例如：code

 1 <!DOCTYPE html>
 2 <html>
 3     <body>
 4         <div id="app">
 5             <!-- 3. #app是Vue實例掛載的元素，應該在掛載元素範圍內使用組件-->
 6             <my-component></my-component>
 7         </div>
 8     </body>
 9     <script src="js/vue.js"></script>
10     <script>
11     
12         // 1.建立一個組件構造器
13         var myComponent = Vue.extend({
14             template: '<div>This is my first component!</div>'
15         })
16         
17         // 2.註冊組件，並指定組件的html標籤，組件的HTML標籤爲<my-component>
18         Vue.component('my-component', myComponent)
19         
20         new Vue({
21             el: '#app'
22         });
23         
24     </script>
25 </html>

咱們用如下幾個步驟來理解組件的建立和註冊：

1. Vue.extend()是Vue構造器的擴展，調用Vue.extend()建立的是一個組件構造器 (經過html模板來構造一個組件構造器---template)。
2. Vue.extend()構造器有一個選項對象，選項對象的template屬性用於定義組件要渲染的HTML。
3. 使用Vue.component()註冊組件時，須要提供2個參數，第1個參數時組件的標籤，第2個參數是組件構造器。
4. 組件應該掛載到某個Vue實例下，不然它不會生效。

　　如 id爲app的vue實例下

 　　new Vue({
             el: '#app'
  　　});

二：註冊組件分全局註冊和局部註冊
調用註冊組件時，組件的註冊是全局的，這意味着該組件能夠在任意Vue示例下使用。
若是不須要全局註冊，或者是讓組件使用在其它組件內，能夠用選項對象的components屬性實現局部註冊Vue.component()

<script src="js/vue.js"></script>
    <script>
        // 1.建立一個組件構造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        new Vue({
            el: '#app',
            components: {
                // 2. 將myComponent組件註冊到Vue實例下
                'my-component' : myComponent
            }
        });
    </script>

因爲my-component組件是註冊在#app元素對應的Vue實例下的，因此它不能在其它Vue實例下使用。　

三：父組件和子組件

咱們能夠在組件中定義並使用其餘組件，這就構成了父子組件的關係。

 1 <!DOCTYPE html>
 2 <html>
 3     <body>
 4         <div id="app">
 5             <parent-component>
 6             </parent-component>
 7         </div>
 8     </body>
 9     <script src="js/vue.js"></script>
10     <script>
11         
12         var Child = Vue.extend({
13             template: '<p>This is a child component!</p>'
14         })
15         
16         var Parent = Vue.extend({
17             // 在Parent組件內使用<child-component>標籤
18             template :'<p>This is a Parent component</p><child-component></child-component>',
19             components: {
20                 // 局部註冊Child組件，該組件只能在Parent組件內使用
21                 'child-component': Child
22             }
23         })
24         
25         // 全局註冊Parent組件
26         Vue.component('parent-component', Parent)
27         
28         new Vue({
29             el: '#app'
30         })
31         
32     </script>
33 </html>

咱們分幾個步驟來理解這段代碼：

var Child = Vue.extend(...)定義一了個Child組件構造器
var Parent = Vue.extend(...)定義一個Parent組件構造器
components: { 'child-component': Child }，將Child組件註冊到Parent組件，並將Child組件的標籤設置爲child-component。
template :'<p>This is a Parent component</p><child-component></child-component>'，在Parent組件內以標籤的形式使用Child組件。
Vue.component('parent-component', Parent) 全局註冊Parent組件
在頁面中使用<parent-component>標籤渲染Parent組件的內容，同時Child組件的內容也被渲染出來

　Child組件是在Parent組件中註冊的，它只能在Parent組件中使用，確切地說：子組件只能在父組件的template中使用。

<div id="app"> <parent-component> <child-component></child-component> </parent-component> </div> 錯誤

<div id="app"> <parent-component> </parent-component> <child-component> </child-component> </div> 錯誤  確切地說：子組件只能在父組件的template中使用。

三：組件註冊語法糖

使用Vue.component()直接建立和註冊組件

// 全局註冊，my-component1是標籤名稱
Vue.component('my-component1',{ template: '<div>This is the first component!</div>' })

var vm1 = new Vue({
    el: '#app1'
})

Vue.component()的第1個參數是標籤名稱，第2個參數是一個選項對象，使用選項對象的template屬性定義組件模板。
使用這種方式，Vue在背後會自動地調用Vue.extend()。

在選項對象的components屬性中實現局部註冊：

var vm2 = new Vue({
    el: '#app2',
    components: {
        // 局部註冊，my-component2是標籤名稱
        'my-component2': {
            template: '<div>This is the second component!</div>'
        },
        // 局部註冊，my-component3是標籤名稱
        'my-component3': {
            template: '<div>This is the third component!</div>'
        }
    }
})

四：使用script或template標籤

template選項如今再也不是HTML元素，而是一個id，Vue.js根據這個id查找對應的元素，而後將這個元素內的HTML做爲模板進行編譯。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
        
注意：使用<script>標籤時，type指定爲text/x-template，意在告訴瀏覽器這不是一段js腳本，瀏覽器在解析HTML文檔時會忽略<script>標籤內定義的內容。

 　　　　<script type="text/x-template" id="myComponent"> <div>This is a component!</div> </script>

        <template id="myComponent">
            <div>This is a component!</div>
        </template>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        Vue.component('my-component',{
            template: '#myComponent'
        })
        
        new Vue({
            el: '#app'
        })
        
    </script>
</html>

這使得HTML代碼和JavaScript代碼是分離的，便於閱讀和維護。
另外，在Vue.js中，可建立.vue後綴的文件，在.vue文件中定義組件。

五：組件的el和data選項

傳入Vue構造器（即new vue({})）的多數選項也能夠用在 Vue.extend() 或Vue.component()中，不過有兩個特例： data 和el。
Vue.js規定：在定義組件的選項時，data和el選項必須使用函數。

Vue.component('my-component', {
    data: {
        a: 1 } }) 報錯，在定義組件的選項時，data和el選項必須使用函數。

另外，若是data選項指向某個對象，這意味着全部的組件實例共用一個data。
咱們應當使用一個函數做爲 data 選項，讓這個函數返回一個新對象：

Vue.component('my-component', {
   data: function(){ return {a : 1} } })

六：使用props

組件實例的做用域是孤立的。這意味着不能而且不該該在子組件的模板內直接引用父組件的數據。可使用 props 把數據傳給子組件。

組件的props選項，它用於將父組件的數據傳遞給子組件,prop 是父組件用來傳遞數據的一個自定義屬性

注意：在子組件中定義prop時，使用了camelCase命名法。因爲HTML特性不區分大小寫，camelCase的prop用於特性時，須要轉爲 kebab-case（短橫線隔開）。例如，在prop中定義的myName，在用做特性時須要轉換爲my-name。

js中用駝峯式寫法，html中由於不區分大小寫，須要用短線-隔開。

var vm = new Vue({
    el: '#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']
        }
    }
})
爲了便於理解，你能夠將這個Vue實例看做my-component的父組件。
若是咱們想使父組件的數據，則必須先在子組件中定義props屬性，也就是props: ['myName', 'myAge']這行代碼。

定義子組件的HTML模板：
<template id="myComponent">
    <table>
        <tr>
            <th colspan="2">
                子組件數據
            </th>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myName }}</td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myAge }}</td>
        </tr>
    </table>
</template>

將父組件數據經過已定義好的props屬性傳遞給子組件：
<div id="app">
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>