摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。

記錄一些小技巧和踩過的坑

由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。

首先冒號是v-bind的縮寫，不帶冒號后面是字符串，帶了冒號就是數據綁定，引號里面的內容是變量或者表達式,
組件內不能修改props的值，同時修改的值也不會同步到組件外層，即調用組件方不知道組件內部當前的狀態是什么

vue 組件props傳遞時，為什么有時候需要加冒號，有時候不需要？
如何在Vue2中實現組件props雙向綁定

如果計算屬性是對象的話，可以設置他的屬性。

數據可能更新了，但是沒有綁定到dom上面的話，不會調用update鉤子函數。

所以在這個時候應該用Object.assign()重新生成新的對象。第一級屬性值更新的話，data是更新的！

  style = {
              color: "rgb(66, 180, 232)"
       };
  //下面渲染不出來
    style = {
              color: "rgb(66, 180, 232)";
       };

vue2.0 的時候把過濾器移除了，現在2.10又加了上去，

定義filter過濾器：
寫在實例Vue內部的是局部過濾器，

new Vue({
  filters:{
  formatMoney: function (value){
      return "$"+value.toFixed(2);
   }
 }
})

寫在外部的是全局過濾器

Vue.filter("money", function (vaule, type) {
    return "￥" + vaule.toFixed(2) + type;
})

組件內調用：

//1.x的寫法，2直接wrap("before","after")調用
Vue.filter("wrap", function (value, begin, end) {
  return begin + value + end
})

補充下：一個豎線 | 在js中是二進制運算

想問一下這個用豎線分隔開是什么意思

注意：在變異（不是替換）對象或數組時，舊值將與新值相同，因為它們的引用指向同一個對象/數組。Vue 不會保留變異之前值的副本。

vm.$watch

有時候，你可能想在某個組件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on 。例如：

如果在同一標簽使用，v-if就是用來過濾v-for里面的數據的，先走if的話用template套在外面

今天并列使用的時候遇到的巨坑：

結果topics只有三條數據，但是渲染出9條數據，官網說的很清楚：v-for with v-if

即使設置了keep-alive組件的beforeUpdate和updated鉤子函數還是會調用的。

activated和unactivated鉤子是在keep-alive組件里面被調用的，不是第一次進入keep-alive組件的話，調用順序是：
beforeEach->beforeRouteEnter->activated->beforeUpdate->beforeRouteEnter的next函數

也可以在離開頁面的時候手動銷毀改組件：

 beforeRouteLeave(to, from, next) {
    if (to.path === "/examcentre") {
        this.$destroy();
    }
    next();
 }
//或者
  deactivated: function () {
    console.log(4)
    this.$destroy();
  },

有時候根據需求（比如該組件是復用的）需要在再次進入該頁面的時候重新從后臺獲取數據，那么可以在activated鉤子函數中請求數據來update頁面。

vue.js 能否設置某個組件不被keep-alive?
vue2.0 keep-alive最佳實踐
Vue如何做到前進刷新數據,后退不刷新數據呢?
組件緩存問題
Vue路由開啟keep-alive時的注意點
vue.js+vue-router+webpack keep-alive用法

所以要想清除vuex state里面的數據的話，可以放在beforeRouteLeave里面做處理。

 this.$store.commit("SET_PAPERATTRIBUTE", {}); 

mint-ui 中的Toast MessageBox Indicator 調用的方式是Toast("提示信息");或者在全局引入mint-ui然后再組件里this.$toast("提示信息"),這種方式和我們普通的引入組件的方式都不同，通常我們是在模板里直接將組件放到模板里面，這就意味著父組件在render的時候，子組件也被render到了dom里面：

this.$toast("提示信息")這種是在函數中調用，肯定也是要render到dom里面的，改咋辦呢？查看了mint-ui的實現方式：document.body.appendChild(instance.$el);
目錄：

TopicDetailPopup.vue文件就是普通的vue寫法，
index.js:

這里考慮到每次彈出層不能都去創建新的組件，我們只需要將組件內的數據更新就可以了，dom也不需要刪除，然后再創建，就用到了單例模式，這邊的instance是在父組件沒銷毀之前都是存在的，每次只是更新了組件的數據，為啥沒被銷毀呢，這邊形成了一個閉包：

調用：

import TopicDetailPopup from "../topicDetailPopup/index.js"
TopicDetailPopup.open({
                            detail: res.data
                     });

但是這個地方出現個問題this.$store現在為undefined，應該是因為這個組件是直接new實例化的，而不是通過根組件嵌套的，
main.js

new Vue({
    router: router,
    store,
    render: h => h(App)
}).$mount("#app");

store注冊在根組件里面，而彈窗組件沒有和根組件關聯，所以拿不到store。

要是能將彈窗組件插入其他組件問題就能解決了，貌似現在API沒有提供這樣的接口，vue2動態添加組件的話可以用render函數，可以我現在的彈窗組件是模板的形式，也可以動態插入到父組件，且需要在components里面引用，這樣又回到了模板語法了。

彈窗的弊端：
vue-devtools 沒法檢測到組件，也沒法檢測到vuex，對于webapp來說返回鍵沒法使用，關閉不了當前的彈窗，造成上面的問題都是由于沒用使用router。
對于安卓手機返回鍵沒法使用可以采用曲線救國的方式，禁用返回鍵，js沒法直接操作安卓返回鍵，但是可以使用beforeRouteLeave，使得返回鍵沒有效果，

 beforeRouteLeave(to, from, next) {
        if (this.popupVisible) {//彈窗顯示的話，路由沒法跳轉
            next(false);
        } else {
            next(true);
        }
 }

彈窗的好處：
在當前頁面直接彈出，這樣可以保存當前頁面的數據和滾動條的位置，還有就是組件復用的話，直接關閉彈窗，不需要根據不同的頁面去回退或者前進到特定的頁面。

使用的是vue2.0，如何動態添加組件。例如實現點擊A按鈕添加aTest組件，點擊B按鈕添加bTest組件。

v-model通常用于input的雙向數據綁定 ，也可以實現子組件到父組件數據的雙向數據綁定：
首先說說v-model的用法：
model.vue

modelChild.vue

無論改變父組件還是子組件的輸入框，value和msg的值都會改變，兩個輸入框的值也就同時改變了。

:model和v-model的區別
:model是v-bind:model的縮寫,這種只是將父組件的數據傳遞到了子組件，并沒有實現子組件和父組件數據的雙向綁定。當然引用類型除外，子組件改變引用類型的數據的話，父組件也會改變的。

查看vue-router源碼的時候發現install.js里面兩句：

Vue.component("router-view", View)
Vue.component("router-link", Link)

這兩句就是全局注冊了這兩個組件,

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

這三步后，在組件里直接使用 而不用先import再使用。

在mint-ui里也是相同的做法：
src/index.js

const install = function(Vue) {
  if (install.installed) return;
  Vue.component(Header.name, Header);//注冊全局組件
  Vue.component(Button.name, Button);
  Vue.use(InfiniteScroll);//使用指令插件
  Vue.use(Lazyload, {
    loading: require("./assets/loading-spin.svg"),
    try: 3
  });//使用指令插件或lazy-component
  Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
  Vue.$toast = Vue.prototype.$toast = Toast;
  Vue.$indicator = Vue.prototype.$indicator = Indicator;
};

后面的Vue.$toast = Vue.prototype.$toast = Toast;使得我們可以在組件中直接調用this.$toast("提示信息")

之前在寫react的時候是不可以這么做的，今天查看了popup.vue的時候發現vue是可以這么干的，直接渲染到了組件的根元素上面。用在組件上

 props: {
    fixed: Boolean,
    value: {}
  }

今天在concat兩個數組的時候發現數據更新了，頁面并沒有刷新，debug看了下數據，concat的數據沒有get set屬性訪問器，導致后來push的數據也沒有屬性訪問器。之前沒有細看文檔。搜了下原來push是變異方法，concat不是。
解決辦法有二：

使用變異方法

使用vue component的$set函數
看一些小伙伴的回答是data的$set方法，至少vue2是沒有的。具體可查看文檔列表渲染

我的解決辦法是：

Array.prototype.push.apply(arr, item);

今天在模板.vue文件里加入render函數發現并不會執行render函數，原來是vue-loader會將template轉成render函數，所以只能二選一。.vue文件如何使用render函數渲染組件

在pc和手機端都可以實現只能輸入數字，可是手機端彈出的軟鍵盤里面沒有完成或者搜索按鈕，搜了下，現在的HTML5 number的情況下并沒有支持搜索按鈕，type="text"是有的。所以曲線救國，控制表單只能輸入數字。
起初的想法是先把在

handleInput(e){
this.val=e.target.value.replace(/[^d]/g,"");
}

但是這種并不會實時刷新表單的數據，下面就會起作用

e.target.value=e.target.value.replace(/[^d]/g,"");

優雅點的寫法，用自定義指令：

//
 directives: {
        numberOnly: {
            bind: function(el) {
                el.handler = function() {
                    el.value = el.value.replace(/D+/, "")
                }
                el.addEventListener("input", el.handler)
            },
            unbind: function(el) {
                el.removeEventListener("input", el.handler)
            }
        }
    },

vue的input中，如何限制只能輸入number

由于彈出層是單例模式，所以打開彈出層只會執行一次mounted鉤子函數，我去監聽

  visible(val) {
            if (val) {
                this.$refs.textbox.focus();//這樣并不能使文本框獲取焦點
            } else {
                this.detail = null;
                this.$refs.textbox.value = "";
            }
        }

解決辦法也是使用自定義指令

  focus: {
            update(el) {
                el.focus();
            }
  }

vue如何實現點擊button 使input獲取焦點

平時在寫組件里面的樣式加上scoped，避免樣式的全局污染，而從后臺返回的HTML無效的，解決辦法就是在組件里再加一對style標簽，將樣式寫到這里。