摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實(shí)戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實(shí)現(xiàn)手機(jī)開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實(shí)現(xiàn)界面效果框架是為了提高開發(fā)

1，Vue基本語法和概念
2， 打包工具 Webpack , Gulp
3，實(shí)戰(zhàn)操作

參考文獻(xiàn)：
官網(wǎng)： 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可以實(shí)現(xiàn)手機(jī)App開發(fā)）；React前端框架；

Vue.js是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層；

前端的主要工作室跟用戶界面打交道，MVC中的V，實(shí)現(xiàn)界面效果；框架是為了提高開發(fā)效率；

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

Vue.js 最核心的功能有兩個(gè)，一是響應(yīng)式的數(shù)據(jù)綁定系統(tǒng)，二是組件系統(tǒng)。

框架是一整套的解決方案；對(duì)項(xiàng)目的侵入性較大， 項(xiàng)目在進(jìn)行中時(shí)，更作框架更換是不可取的；

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

MVC 是后端的分層開發(fā)概念；

MVVM 是端視圖層的概念
MVVM是前端視圖層的分層開發(fā)思想，主要把每個(gè)頁面，分成了M,V,VM三個(gè)頁面
其中VM 是MVVM 思想的核心；因?yàn)閂M是M 和V之間的調(diào)度者
前端頁面中使用MVVM的思想，主要是為了讓我們開發(fā)更加方便，因?yàn)镸VVM提供了數(shù)據(jù)的雙向綁定（由VM提供的）

現(xiàn)在官網(wǎng)下載VUE

在編輯器中導(dǎo)入

    
    
    
    
    
    



    
    
    

        
{{ msg }}
    

    

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

v-text 會(huì)覆蓋元素中原本的內(nèi)容，但是插值表達(dá)式 只會(huì)替換自己的這個(gè)占位符，不會(huì)把 整個(gè)元素的內(nèi)容清空.

v-html 可以解析表達(dá)式中的

等html標(biāo)簽

v-bind的使用

用于綁定屬性的指令,例如給input標(biāo)簽下的 title 綁定 屬性show ，使得鼠標(biāo)放置在按鈕時(shí)呈現(xiàn)show中的內(nèi)容

鼠標(biāo)放置在按鈕時(shí)，將顯示“這是一個(gè)自己定義的titile”

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

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

  :title="show+"123"";

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

在不操作DOM的情況下，實(shí)現(xiàn)事件綁定機(jī)制

ps. 同樣的 v-on 可以簡(jiǎn)寫為 @

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

跑馬燈效果制作

難點(diǎn)：

多次點(diǎn)擊"啟動(dòng)"時(shí)，需要多次點(diǎn)擊"停止"

注意局部變量的訪問問題

當(dāng)點(diǎn)擊"啟動(dòng)"時(shí)將定時(shí)器定義為null，再次點(diǎn)擊無效,將"停止"定義為null，再次點(diǎn)擊無效果

分析：

 1. 給 【浪起來】 按鈕，綁定一個(gè)點(diǎn)擊事件   `v-on`   @
 2. 在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到 msg 字符串，然后 調(diào)用 字符串的 substring 來進(jìn)行字符串的截取操作，把 第一個(gè)字符截取出來，放到最后一個(gè)位置即可；
 3. 為了實(shí)現(xiàn)點(diǎn)擊下按鈕，自動(dòng)截取的功能，需要把 2 步驟中的代碼，放到一個(gè)定時(shí)器中去；

  

    
    

    
{{ msg }}

  

  

.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)回調(diào)
只能放在元素本身；當(dāng)下面代碼中的.self放在input當(dāng)中時(shí)，依舊會(huì)發(fā)生冒泡事件

    

            

.once 事件只觸發(fā)一次
只觸發(fā)一次事件處理函數(shù)
騰訊網(wǎng)

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

  
{{ message }}
  

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

    

    
      +
      -
      *
      /
    

    

    

    
  

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

  

ps.傳統(tǒng)實(shí)現(xiàn)方式：  
這是一個(gè)邪惡的H1



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


在數(shù)組中使用三元表達(dá)式

當(dāng)flag為真時(shí)，執(zhí)行active樣式，否則不執(zhí)行
 
這是一個(gè)邪惡的H1


在數(shù)組中使用 對(duì)象來代替三元表達(dá)式，提高代碼的可讀性


當(dāng)在一個(gè)自定義組件上使用 class 屬性時(shí)，這些類將被添加到該組件的根元素上面。這個(gè)元素上已經(jīng)存在的類不會(huì)被覆蓋

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

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

Vue指令v-for和key

ps.在使用2.X以上的版本時(shí)，key屬性是必須有的
循環(huán)普通數(shù)組
 

    
索引值：{{i}} --- 每一項(xiàng)：{{item}}
  

 


循環(huán)對(duì)象數(shù)組

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

 

循環(huán)對(duì)象
 

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

 

迭代數(shù)子
  

    
    
    
這是第 {{ count }} 次循環(huán)
  

  
Vue中 v-for 中的key屬性


    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

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



    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

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


v-if 和 v-show



    
    

    
    

    
    

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