摘要：學習內容，基本語法和概念，打包工具，實戰操作參考文獻官網官方資料庫全家桶全家桶文檔概念前端框架借助可以實現手機開發前端框架是一套構造用戶界面的框架，只關于視圖層前端的主要工作室跟用戶界面打交道，中的，實現界面效果框架是為了提高開發

1，Vue基本語法和概念
2， 打包工具 Webpack , Gulp
3，實戰操作

參考文獻：
官網： https://cn.vuejs.org/v2/guide/
官方資料庫： https://github.com/vuejs/awes...
全家桶： https://github.com/vuejs/vue-cli
Webpack全家桶文檔： http://vuejs-templates.github...
Vue Router： https://router.vuejs.org/
Vuex： https://vuex.vuejs.org/
Vue-resource： https://github.com/pagekit/vu...
Element-UI： http://element.eleme.io/#/zh-CN

VUE.js前端框架（借助Wexx可以實現手機App開發）；React前端框架；

Vue.js是一套構造用戶界面的框架，只關于視圖層；

前端的主要工作室跟用戶界面打交道，MVC中的V，實現界面效果；框架是為了提高開發效率；

在Vue中，一個核心的概念，就是讓用戶不在操作DOM元素，解放了用戶的雙手（幫助我們減少不必要的DOM操作，【雙向綁定概念】通過框架提供的指令，我們前端程序員只需要關心數據的業務邏輯，不在關心DOM是如何渲染的了）

Vue.js 最核心的功能有兩個，一是響應式的數據綁定系統，二是組件系統。

框架是一整套的解決方案；對項目的侵入性較大， 項目在進行中時，更作框架更換是不可取的；

庫（插件）：庫是提供某一個小功能，對項目的侵入性較小，如果某個庫無法滿足開發需求，則可以很容易切換到其它庫實現需求
-1. 從Jquery 切換到 Zepto
-2. 從EJS 切換到 art-template

MVC 是后端的分層開發概念；

MVVM 是端視圖層的概念
MVVM是前端視圖層的分層開發思想，主要把每個頁面，分成了M,V,VM三個頁面
其中VM 是MVVM 思想的核心；因為VM是M 和V之間的調度者
前端頁面中使用MVVM的思想，主要是為了讓我們開發更加方便，因為MVVM提供了數據的雙向綁定（由VM提供的）

現在官網下載VUE

在編輯器中導入

    
    
    
    
    
    



    
    
    

        
{{ msg }}
    

    

v-cloak 能夠解決 插值表達式閃爍的問題

v-text 會覆蓋元素中原本的內容，但是插值表達式 只會替換自己的這個占位符，不會把 整個元素的內容清空.

v-html 可以解析表達式中的

等html標簽

v-bind的使用

用于綁定屬性的指令,例如給input標簽下的 title 綁定 屬性show ，使得鼠標放置在按鈕時呈現show中的內容

鼠標放置在按鈕時，將顯示“這是一個自己定義的titile”

var vm = new Vue({
      el: "#app",
      data: {
        msg: "123",
        msg2: "
哈哈，我是一個大大的H1， 我大，我驕傲
",
        show: "這是一個自己定義的title"
      },

ps. v-bind 中，可以寫合法的JS表達式，因此可以在后面添加表達式，比如v-bind:title="show+"123"";
注意： v-bind: 指令可以被簡寫為 :要綁定的屬性

  :title="show+"123"";

v-on指令定義Vue中的事件

在不操作DOM的情況下，實現事件綁定機制

ps. 同樣的 v-on 可以簡寫為 @

methods: { // 這個 methods屬性中定義了當前Vue實例所有可用的方法
        zxc: function () {
          alert("Hello")
        }
      }

跑馬燈效果制作

難點：

多次點擊"啟動"時，需要多次點擊"停止"

注意局部變量的訪問問題

當點擊"啟動"時將定時器定義為null，再次點擊無效,將"停止"定義為null，再次點擊無效果

分析：

 1. 給 【浪起來】 按鈕，綁定一個點擊事件   `v-on`   @
 2. 在按鈕的事件處理函數中，寫相關的業務邏輯代碼：拿到 msg 字符串，然后 調用 字符串的 substring 來進行字符串的截取操作，把 第一個字符截取出來，放到最后一個位置即可；
 3. 為了實現點擊下按鈕，自動截取的功能，需要把 2 步驟中的代碼，放到一個定時器中去；

  

    
    

    
{{ msg }}

  

  

.self 只當事件在該元素本身（比如不是子元素）觸發回調
只能放在元素本身；當下面代碼中的.self放在input當中時，依舊會發生冒泡事件

    

            

.once 事件只觸發一次
只觸發一次事件處理函數
騰訊網

v-model和數據雙向綁定
v-bind只能實現數據的單線綁定，從M層綁定到V層；
v-model 只能用在表單元素中
其中包括：input(redio,text.address,email...) select checkbox textarea

  
{{ message }}
  

var app6 = new Vue({
  el: "#app-6",
  data: {
    message: "Hello Vue!"
  }
})
通過雙向綁定完成--計算器Demo
定義3個input標簽text屬性，1個select標簽
  

    

    
      +
      -
      *
      /
    

    

    

    
  

在data下定義事件，初始化值。可以選用switch做判斷循環；也可以使用 eval方案（該方法可直接判斷加減乘除符號）
  
在Vue中使用樣式（綁定HTML CSS Class）
以下例子將的將于此代碼，為方便理解在此展示出來
  

  

ps.傳統實現方式：  
這是一個邪惡的H1



第一種使用方式，直接傳遞一個數組，注意： 這里的 class 需要使用  v-bind 做數據綁定
這是一個邪惡的H1


在數組中使用三元表達式

當flag為真時，執行active樣式，否則不執行
 
這是一個邪惡的H1


在數組中使用 對象來代替三元表達式，提高代碼的可讀性


當在一個自定義組件上使用 class 屬性時，這些類將被添加到該組件的根元素上面。這個元素上已經存在的類不會被覆蓋

這是一個邪惡的H1
可以在class中直接寫，也可以將對象寫在data中，直接引用其屬性.
 
這是一個很大很大的H1，大到你無法想象！！！

在Vue中使用樣式（內聯樣式）
直接在元素上通過 :style 的形式，書寫樣式對象
這是一個善良的H1
將樣式對象，定義到 data 中，并直接引用到 :style 中
data: {
        h1StyleObj: { color: "red", "font-size": "40px", "font-weight": "200" }
}
在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：
這是一個善良的H1
在 :style 中通過數組，引用多個 data 上的樣式對象
在data上定義樣式：
data: {
        h1StyleObj: { color: "red", "font-size": "40px", "font-weight": "200" },
        h1StyleObj2: { fontStyle: "italic" }
}
在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：
這是一個善良的H1

Vue指令v-for和key

ps.在使用2.X以上的版本時，key屬性是必須有的
循環普通數組
 

    
索引值：{{i}} --- 每一項：{{item}}
  

 


循環對象數組

    
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
  

 

循環對象
 

    
    
值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}
  

 

迭代數子
  

    
    
    
這是第 {{ count }} 次循環
  

  
Vue中 v-for 中的key屬性


    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

      {{item.id}} --- {{item.name}}
    
  



    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

      {{item.id}} --- {{item.name}}
    
  


v-if 和 v-show



    
    

    
    

    
    

    
    
    
這是用v-if控制的元素
    
這是用v-show控制的元素