Vue.js經常使用開發知識簡要入門（三）

時間 2019-11-07

標籤 vue.js vue 經常使用開發知識簡要入門欄目 JavaScript 简体版

原文原文鏈接

組件的註冊與使用

例如，註冊一個Hello組件：javascript

var Hello = Vue.extend({        //返回預設選項的Vue構造器（子類）
   data: function() {
       return {
            msg: 'Hello，Vue.js'
       }
   },
   template: '<h1>{{msg}}</h1>'      
});

這樣，就建立了一個h1標籤，標籤內容爲Hello，Vue.js的Hello組件，咱們可使用全局註冊來使用這個組建：css

<body>
    <Hello></Hello>
</body>
<script>
//全局註冊
Vue.component('Hello',Hello);

new Vue({
     el: 'body',
     components: {
          // 'Hello': Hello,    //局部註冊
          'Temp': Temp
     }
});
</script>

固然，咱們也可使用局部註冊。html

template實例模版，用戶替換或插入掛載元素，元素可使用#選擇子，使用匹配元素的innerHTML做爲模板前端

<body>
    <Hello></Hello>
    <Temp></Temp>

    <template id="template-use">
        <p>{{msg}}</p>
        <p>Demos 代碼演示、代碼片斷 - 讀你 | 這世間惟有夢想和好姑娘不可辜負!</p>
    </template>
</body>
<script>
var Temp = Vue.extend({ 
   data: function() {
       return {
            msg: '組件的註冊與使用'
       }
   },
   template: '#template-use'      
});

new Vue({
     el: 'body',
     components: {
          'Hello': Hello,    //局部註冊
          'Temp': Temp
     }
});
</script>

使用 Vue 擴展構造 Vue 實例時，實例選項中的 methods 屬性會覆蓋擴展選項中的 methods 屬性？vue

Vue 擴展是一個提供了部分可複用的數據、方法……選項的 Vue 構造器，能夠直接使用 new MyVue(options) 這樣的方式來構造 Vue 實例；只要願意，能夠在一個頁面上使用 Vue 構造器或者 Vue 擴展構造器建立任意個 Vue 實例；使用 Vue 擴展構造 Vue 實例時，選項級別的屬性並非直接覆蓋.java
如 Vue 擴展選項裏包括 methods 屬性，調用該擴展構造器時也傳入了 methods，則會將兩個 methods 中的內容合併成一個新對象，僅當存在鍵名衝突時，實例選項中的方法覆蓋擴展選項中的同名方法.ajax
data 屬性的狀況相似，但更復雜，鍵名衝突時，當 data 屬性中的數據是數值時，使用實例選項中的數據覆蓋擴展選項中的數據，當 data 屬性中的數據是對象時，將兩個對象按相同規則繼續合併，此外，同名鉤子會組成數組，在生命週期中事件觸發時均會被調用.數組
使用 Vue.extend 建立 Vue 擴展時，擴展選項中的 data 和 el 必須是返回相關數據的函數，即便使用指向同一個數據對象的變量做爲函數的返回值，經過 Vue 擴展建立的 Vue 實例的數據也是不一樣的。函數

注意：
當自定義標籤所對應的模板中可能包含多個頂級元素時，因爲指令優先級的關係，不能使用 v-show 指令，而且在任何自定義標籤後的元素中，v-else 均無效；因爲 v-if 的初始化處理方式不一樣（根據綁定數據決定是否建立 DOM 元素，而不是設置 display 屬性），在自定義標籤中使用 v-if 指令是能夠的，而且容許在後續標籤中使用 v-else。ui

使用props傳遞數據

<body>
   <child title="Vue.js權威指南" author="滴滴前端" price="89"></child>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script type="text/javascript">
    //註冊組建
    var child = Vue.component('child',{
        props: [
            'title','author','price'
        ],
        template: `<span :title="title">{{title}}</span>
                <span :author="author">{{author}}</span>
                <span :price="price">{{price}}</span>`
    });

    //使用組建
    new Vue({
        el: 'body',
        components: { child }
    });
</script>

這裏使用了另外一種建立組建的方式，屬於Vue語法糖，背後會自動使用Vue.extend().

prop 校驗

type：類型
required：是否必須
towWay：是否雙向
default：默認值
validator：自定義校驗函數
coerce：轉換函數
type 爲 String、Number、Boolean、Function、Object、Array等原生構造器或自定義構造器
僅有 type 時可不適用對象語法
可設置爲構造器數組
若是設置了轉換函數，先轉換再判斷 type

單文件組建規範

單文件組建的結構

<template>
    <span>![](../img/logo.png)</span>
</template>
<script>
export default{
    props: ['componentName']
}
</script>
<style>
img.log{
    width:16px;height:16px;
}
</style>

語言塊

template塊
默認語言html，每一個文件容許最多一個template塊

script塊
默認語言js，每一個文件容許最多一個script塊

style塊
默認語言CSS，支持多個style塊

Vue.js 的單文件組件中不必定要有 template 語言塊，再者，即便確實須要 template 屬性，script 語言塊中輸出的組件選項中也能夠包含字符串形式的 template屬性。爲了更好地組織樣式，一個單文件組件中容許有多個 style 語言塊。template 語言塊的默認語言是 html，還能夠設置爲其餘預處理的模板語言如 jade。script 語言塊的默認語言是 js，也容許設置使用其餘語言如 CoffeeScript、TypeScript 等。

src引用

<template src="./template.html">
</template>
<script src="./script.js">
</script>
<style src="./style.css">
</style>

支持src引用，遵循CommonJS路徑規範。

++++++++++本人出售本人出售《Vue.js權威指南》，二手價20元！++++++++++

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。