Vue官方文檔——詳解

Vue官方文檔——詳解 ( Vue 2.*版本 )

〇、Vue中不能使用箭頭函數地方

一、生命週期函數中不能使用箭頭函數

二、data函數不能使用箭頭函數

三、watch中不能使用箭頭函數

四、methods中不能使用箭頭函數

五、computed不能使用箭頭函數

1、全局配置

Vue.config 是一個對象，包含 Vue 的全局配置，vue.config的配置所有在在main.js中設置的，以下：

官網中給出的經常使用配置以下：

(1)、devtools

//用法
// 務必在加載 Vue 以後，當即同步設置如下內容
Vue.config.devtools = true

//devtools能夠經過開發環境配置
Vue.config.devTools = process.env.NODE_ENV !== 'production'

配置是否容許 vue-devtools 檢查代碼。開發版本默認爲 true，生產版本默認爲 false。生產版本設爲 true 能夠啓用檢查。

(2)、errorHandler

//用法
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的錯誤信息，好比錯誤所在的生命週期鉤子
  // 只在 2.2.0+ 可用
}

實例以下：

首先在全局中配置errorHandler，並輸出所有參數項。

而後，在組件中的beforeCreate週期時調用methods中的方法，這樣操做確定會報錯

最後，獲得的報錯信息以下：（這樣是咱們經過errorHandler抓到的錯誤信息啦，so easy ~~~）

注意：info 是 Vue 特定的錯誤信息，好比錯誤所在的生命週期鉤子，即控制檯中顯示的：「@@@ beforeCreate hook"

(3)、productionTip

對於開發版本，會默認向控制檯打印：

//設置爲false就不會提示了
Vue.config.productionTip = false;

(4)、performance

//經過環境配置 performance是否可用
Vue.config.performance = process.env.NODE_ENV !== 'production'

Chrome須要安裝插件：

經過插件Vue performance能夠看到每一個組件的時間分配：

描述：

Init：在beforeCreate和created週期花費的總時長。
Render: 在js中建立實例的時長。
Patch: 頁面渲染的時長。

2、全局API

定義：
全局API並不在構造器裏，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，簡而言之就是，在構造器外部用Vue提供給咱們的API函數來定義新的功能。

一、Vue.extend用於建立一個子類Vue,用$mount來掛載

注意：Vue.extend()中的data是函數。

二、Vue.nextTick([callback,context])在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的DOM。

三、Vue.set( target, key, value) :設置對象的屬性，確保屬性被建立後是響應式的，同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。

Vue.set爲何存在？緣由：因爲Javascript的限制，Vue不能自動檢測如下變更的數組。改變下標的時候vue不能再檢測到。所以Vue.set能夠檢測到並更新視圖。

注意：（1）、普通方式直接改屬性值，數據並不會更新，DOM也不會更新。

//普通方式以下
methods：{
    setFunction (){
        //這種修改方式,控制檯經過Vue擴展工具不能獲得最新的data.
        this.arr[0] = '北京紫禁城'
    }
}

（2）、Vue 不容許在已經建立的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上。
即Vue.set 不能直接在給data添加新的屬性，只能在data已有屬性上進行嵌套。

四、Vue.delete(target,key):刪除對象的屬性。若是對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用於避開 Vue 不能檢測到屬性被刪除的限制。

五、Vue.delete(target,key):刪除對象的屬性。若是對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用於避開 Vue 不能檢測到屬性被刪除的限制。

六、Vue. directive :註冊全局指令

定義的指令中 "el" 屬性指所綁定的元素，能夠用來直接操做DOM。

bind：只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做。

inserted:被綁定元素插入父節點是調用（父節點存在便可調用，沒必要存在於document中）。【插入完以後調用】

update:被綁定元素所在模板更新時調用，而不管綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新。【經常使用】

componentUpdated：被綁定元素所在模板完成一次更新週期時調用。

unbind: 只調用一次， 指令與元素解綁時調用。

七、Vue.filter註冊全局過濾器

過濾器能夠管道式連接過濾，管道符："|"

八、Vue.component註冊全局組件

全局註冊的組件能夠在多個構造器中使用，可是局部註冊的組件只能在組件註冊的做用域裏進行使用，其餘做用域使用無效。

從代碼中你能夠看出，局部註冊其實就是寫在構造器。可是須要注意，構造器裏的components 是加s的，而全局註冊是不加s的。

九、Vue.use安裝Vue插件

好比：使用vue-router,首先npm install vue-router --save-dev,而後在main.js文件中經過import引入vue,vue-router模塊和須要使用的組件，必須經過Vue.use()安裝相應功能，如：Vue.use(VueRouter)。

十、Vue.version獲取安裝的Vue版本號

十一、Vue.compile
十二、Vue.mixin

3、選項/數據

一、data 數據

//直接建立一個實例
var vm = new Vue({
    //data爲對象
    data:{a:1}
})

//Vue.extend中data是函數
var myVue = Vue.extend({
    data:function(){
        return{a:1}
    }
})

//vue-cli搭建的項目中單個組件的data是函數
<template>
    <div class="one">
        <h1>我是：{{msg}}</h1>
    </div>
</template>
<script>
export default {
  name: "One",
  data() {
    return {
      msg: "One"
    };
  }
};
</script>
<style scoped>
    *{ margin:0; }
</style>

二、props : 父傳子信息

三、propsData

propsData在實際開發中咱們使用的並很少，咱們在後邊會學到Vuex的應用，他的做用就是在單頁應用中保持狀態和數據的。

四、computed

computed有 get和 set屬性

五、methods

定義方法

六、watch

watch 監聽data屬性變化

4、選項/DOM

一、el

爲實例提供掛載元素

二、template

模版三種方法:

(1)、直接在構造器的template中編寫，其中，模板的標識符使用的是tab鍵上的鍵：``

var app=new Vue({
 el:'#app',
 data:{
     message:'hello Vue!'
  },
 template:`<h1 style="color:red">我是選項模板</h1>`
})

(2)、寫在<Template>標籤裏的模板：

<template id="demo2">
   <h2 style="color:red">我是template標籤模板</h2>
</template>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello Vue!'
        },
        template:'#demo2'
    })
</script>

（3）、script標籤模板：

<script type="x-template" id="demo3">
    <h2 style="color:red">我是script標籤模板</h2>
</script>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello Vue!'
        },
        template:'#demo3'
    })
</script>

三、render

官方文檔：https://vuefe.cn/v2/guide/ren...

（1）、 createElement參數：{String | Object | Function}，string必選。基礎用法以下：

獲得的前端頁面結構以下：

（2）、Object參數，可選

<body>
    <div id="app">
        <elem></elem>
    </div>
    <script>
        Vue.component("elem", {
            render: function (createElement) {
                return createElement("strong", 
                //設置object對象中包含的屬性
                {
                    // 和 `v-bind:class` 的 API 相同
                    "class": {
                        foo: true,
                        bar: false
                    },
                    // 和 `v-bind:style` 的 API 相同
                    style: {
                        color: "red",
                        fontSize: "20px"
                    },
                    // 普通的 HTML 屬性
                    attrs: {
                        id: "foo"
                    },
                    // DOM 屬性
                    domProps: {
                        innerHTML: "我是測試，我是測試，我是測試"
                    }
                })
            }
        });
        new Vue({
            el: "#app"
        })
    </script>
</body>

這樣獲得的結果以下：（標籤屬性值已設置）

（3）、createElement函數構建而成的數組

<body>
    <div id="app">
        <elem></elem>
    </div>
    <script>
        Vue.component("elem", {
            render: function (createElement) {
                 //使用字符串生成文本節點
                // return createElement('div', '文本');
                return createElement("div", 
                    //由createElement函數構建而成的數組
                    [
                        //createElement函數返回VNode對象
                        createElement("h1", "主標題"),
                        createElement("h2", "副標題")
                    ])
            }
        });
        new Vue({
            el: "#app"
        })
    </script>
</body>

這樣獲得的結果以下：

（4）、兩種組件寫法