vue 相較 上一代web框架JQ有更優秀的開發理念，更快的開發速度（這裡可能有些低版本瀏覽器相容問題）

可由於歷史遺留問題，很難使用vue的全部生態來開發 比如腳手架，

比如我們公司在組織架構上，前端的設計 html css的編寫是由一個部門完成的

動態渲染是由另一個部門完成的

導致一個問題，在後端迭代新技術的時候無法要求人家去迭代，所以我們公司還在使用 freemarker 和JSP等相關技術

搞過JAVA開發的都知道 這倆技術有點坑，
（比如 在做一些AJXA渲染移動端上拉載入更多等操作的時候，要同時維護 freemarker和JQ兩種程式碼，冗餘不說BUG也不好處理 ）

由於公司結構的問題，又很難推進VUE的全部生態，使用腳手架前後端分離開發

如何解決呢，如何提高開發速度了，如何提高效率不加班呢（PS：不加班是我的最終目的~~）

我們可以不使用腳手架，直接進行頁面JS的編寫，對公共元件進行抽離（這個問題會放在下一次來說）

寫了一些了，目前效果不錯最起碼BUG少了，也不怎麼加班了，還有時間學習新東西了，好了先看程式碼

<script type="text/javascript">
//開發完畢重構抽到單門的JS中並壓縮處理
var indexApp = new Vue({
    el: '#indexApp', //@1 標記符詳情見下
    data: {
       //@2 標記符詳情見下
      datas: [],
      watchVal:''
 

    },
    created:function(){
      //@3 標記符詳情見下
     this.onLoadData();
    },
    methods:{
      //@4 標記符詳情見下
      onLoadData :function(){
        console.log("onLoad")

      },
      watchFun : function(newVal,oldVal){
        console.log("newVal")
        console.log("oldVal")
      },
      eventFun : function
 
(val){
        console.log("newVal");

      }

    },
    filters: {  
       //@5  標記符詳情見下
      dateFormat : function(val1,val2){

      }
    },
    watch :{
       //@6  標記符詳情見下
      'watchVal':'watchFun'
    }
  })

</script>

這裡只介紹些常用的 基本能解決大部分的日常開發問題，更詳細的教程網上很多，可以自行搜一搜

@1：對應需要VUE進行處理的DOM上，不要把ID放在body上，會報錯
@2：VUE用來進行資料繫結的，資料物件，在繫結完dom後，我們的主要錯做都是在操作這個屬性下的值
@3: vue的生命週期鉤子很多，這個是比較常用的，其中可以用this.{funName} 來呼叫 methods裡面定義的方法
@4: 用來定義方法的屬性，比如可以給生命週期裡的回掉來定義方法，可以給watch定義函式，可以定義各種事件的方法等

@5: 這個也很重要，主要是在做迴圈時對值的處理，因為後端開發人員不會都給你格式化好的，他們懶著呢（給你就行了格式自己處理，別問我怎麼知道的），說一下用法

<div v-for="data in datas">
  <dl @click="eventFun(data)">
    <dt><a href="javascript:void(0)" target="_blank" > {{data[5]}}</a></dt>
    <dd><span class="time"> {{data[3] | dateFormat}} </span></dd>
    <dd class="text">{{data[2]}}</dd>
  </dl>
</div>

注意 {{data[3] | dateFormat}} 這個就是 filters 的用法 其中 dateFormat 的 val1可以獲得 data[3]
（PS 感覺很像 linux的管道符 有木有）

這裡的 data[3] 得到的是個時間戳（後臺就是這麼傲嬌，我之所以不罵他，因為後臺也是我寫的~~）

如果要傳多個引數怎麼辦呢，比如我還想獲得data[4]，通過這倆個值在做一些判斷，可以這樣
{{data[3] | dateFormat(data[4])}}
這樣就可以在dateFormat的 val2 中獲得 data[4] 的值的，再有其他的需求依次類推

@6: 這個呢 從字面中就能看出來 是個觀察者，觀察什麼的，觀察data屬性中的資料的

比如我有個需求，在移動端 對著input 的輸入的值，在滿足手機號的正則的時候將下方的按鈕有不可用變成可用

注意是移動端，有興趣的可以試試，能做不好做

如果用VUE就很簡單了，

‘watchVal’:’watchFun’ //data中的 watchVal 在改變的時候會呼叫 methods 中的 watchFun並傳進來兩個引數
分別是
newVal 第一個 改變之後的資料
oldVal 第二個 改變之前的資料

如果要滿足上面的需求 只需要對第一個值做正則就可以了