前端框架VUE

Vue
Vue近幾年來特別的受關注，三年前的時候angularJS霸佔前端JS框架市場很長時間，接着react框架橫空出世，由於它有一個特性是虛擬DOM，從性能上碾軋angularJS，這個時候，vue1.0悄悄
的問世了，它的優雅，輕便也吸引了一部分用戶，開始收到關注，16年中旬，VUE2.0問世，這個時候vue無論從性能上，仍是從成本上都隱隱超過了react，火的一塌糊塗，這個時候，angular
開發團隊也開發了angular2.0版本，而且改名爲angular，吸取了react、vue的優勢，加上angular自己的特色，也吸引到不少用戶，目前已經迭代到5.0了。
學習vue是如今前端開發者必須的一個技能。
前端js框架到底在幹嗎，爲何要用
js框架幫助開發者寫js邏輯代碼，在開發應用的時候js的功能劃分爲以下幾點：
渲染數據
操做dom（寫一些效果）
操做cookie等存儲機制api
在前端開發中，如何高效的操做dom、渲染數據是一個前端工程師須要考慮的問題，並且當數據量大，流向較亂的時候，如何正確使用數據，操做數據也是一個問題
而js框架對上述的幾個問題都有本身趨於完美的解決方案，開發成本下降。高性能高效率。惟一的缺點就是須要使用必定的成原本學習。
Vue官網介紹
vue是漸進式JavaScript框架
「漸進式框架」和「自底向上增量開發的設計」是Vue開發的兩個概念
Vue能夠在任意其餘類型的項目中使用，使用成本較低，更靈活，主張較弱，在Vue的項目中也能夠輕鬆融匯其餘的技術來開發，而且由於Vue的生態系統特別龐大，能夠找到基本全部類型的工
具在vue項目中使用
特色：易用（使用成本低），靈活（生態系統完善，適用於任何規模的項目），高效（體積小，優化好，性能好）
Vue是一個MVVM的js框架，可是，Vue 的核心庫只關注視圖層，開發者關注的只是m-v的映射關係
與AngularJS的對比
Vue的不少api、特性都與angularJS類似，實際上是由於Vue在開發的時候借鑑了不少AngularJS中的特色，而AngularJS中固有的缺點，在Vue中已經解決，也就是青出於藍而勝於藍，Vue的學習
成本比AngularJS低不少，由於複雜性就低
AngularJS是強主張的，而Vue更靈活
Vue的數據流是單向的，數據流行更清晰
Angular裏指令能夠是操做dom的，也能夠封裝一段結構邏輯代碼，例如：廣告展現模塊
Vue中的指令只是操做dom的，用組件來分離結構邏輯
AngularJS的性能比不上Vue
Vue的使用
Vue不支持IE8，由於使用了ES5的不少特性
能夠直接經過script標籤來引入vue.js，有開發版本和生產版本，開發版本通常咱們在開發項目的時候引入，當最後開發完成上線的時候引入生產版本，開發版本沒有壓縮的，而且有不少提
示，而生產版本所有刪掉了
在Vue中提供了一個腳手架（命令行工具）能夠幫咱們快速的搭建基於webpack的開發環境...
Vue的實例
每個應用都有一個根實例，在根實例裏咱們經過組件嵌套來實現大型的應用
也就是說組件不必定是必須的，可是實例是必需要有的
在實例化實例的時候咱們能夠傳入一個；配置項，在配置項中設置不少屬性方法能夠實現複雜的功能
在配置中能夠設置el的屬性，el屬性表明的是此實例的做用範圍
在配置中同過設置data屬性來爲實例綁定數據
mvc/mvvm
摘自阮一峯博客
mvc 分爲三層，其實M層是數據模型層，它是真正的後端數據在前端js中的一個映射模型，他們的關係是：數據模型層和視圖層有映射關係，model改變，view展現也會更改，當view產生用戶
操做或會反饋給controller，controller更改model，這個時候view又會進行新的數據渲染

這是純純的MVC的模式，可是不少框架都會有一些更改
前端mvc框架，如angularjs，backbone：

會發現，用戶能夠直接操做controller（例如用戶更改hash值，conrtoller直接監聽hash值變化後執行邏輯代碼，而後通知model更改）
控制器能夠直接操做view，若是，讓某一個標籤得到進入頁面得到焦點，不須要model來控制，因此通常會直接操做（angularJS，指令）
view能夠直接操做model （數據雙向綁定）
MVP:
mvp
view和model不能直接通訊，全部的交互都由presenter來作，其餘部分的通訊都是雙向的
view較薄 ，presenter較爲厚重
MVVM：
mvvm
MVVM和MVP及其類似，只是view和viewmodel的通訊是雙向綁定，view的操做會自動的像viewmodel經過
v-for
在vue中能夠經過v-for來循環數據的通知循環dom，語法是item in/of items，接收第二個參數是索引 (item,index) of items,還能夠循環鍵值對，第一個參數是value，第二個是key，第三
個依然是索引
v-on
在vue中還有v-on來爲dom綁定事件，在v-on：後面加上要綁定的事件類型，值裏能夠執行一些簡單javascript表達式：++ -- = ...
能夠將一些方法設置在methods裏，這樣就能夠在v-on:click的值裏直接寫方法名字能夠，默認會在方法中傳入事件對象，當寫方法的時候加了()就能夠傳參，這個時候若是須要事件對象，那
就主動傳入$event
v-on綁定的事件能夠是任意事件,v-on:能夠縮寫爲@
爲何在 HTML 中監聽事件?
你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的
ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：
掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。
當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何本身清理它們。
模板語法
在vue中，咱們使用mustache插值({{}})來將數據渲染在模板中
使用v-once指令能夠控制只能插入一次值，當數據變化的時候，模板對應的視圖不更新
使用v-html指令能夠解析html格式的數據
在html標籤屬性裏不能使用mustache插值，這個時候給元素添加動態屬性的時候使用v-bind來綁定屬性，能夠縮寫成:
在使用v-bind綁定class和內聯樣式的時候，vue作了一些優化，可使用對象語法和數組的語法來控制
防止表達式閃爍：
v-cloak
給模板內的元素添加v-cloak屬性後，元素在vue沒有加載完的時候就有這個屬性，當vue加載完成後這個屬性就消失了，因此咱們能夠給這個屬性設置css樣式爲隱藏
 <style>
 [v-cloak]{
     visibility: hidden;
 }
 </style>
v-text/v-html
v-text會指定將模板內元素的textContent屬性替換爲指令值所表明的數據，也能夠用於防止閃爍
v-html能夠解析標籤，更改元素的innerHTML，性能比v-text較差
v-pre
跳過元素和其子元素的編譯過程，能夠用來顯示mustache
vue-resource
這是一款vue的插件，能夠用來進行數據交互，支持的請求方式：GET/POST/JSONP/OPTIONS...
這個插件官方宣佈不在更新維護，也就是說盡可能不要使用
計算屬性、監聽
有的時候咱們須要在模板中使用數據a，這個時候就須要用到表達式，可是有的地方咱們須要對a數據進行一些簡單的處理後才能使用，那麼咱們就會在表達式中寫一些js邏輯運算

```
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
```
這樣咱們的維護就會很是困難，也不便於閱讀


那め咱們就能夠在methods裏設置一個方法，在模板的表達式中使用這個方法

```
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在組件中
methods: {
reversedMessage: function () {
    return this.message.split('').reverse().join('')
}
}
```

可是這個時候，只要vm中有數據變化，這個變化的數據可能和咱們關注的數據無關，可是vm都會從新渲染模板，這個時候表達式中的方法就會從新執行，大大的影響性能


這個時候其實咱們可使用監聽器裏完成：

在vm實例中設置watch屬性，在裏面經過鍵值對來設置一些監聽，鍵名爲數據名，值能夠是一個函數，這個函數在數據改變以後纔會執行，兩個參數分別是性格前的值和更改後的值
    a: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
    }
值還能夠是一個方法名字，當數據改變的時候這個方法會執行

當數據爲object的時候，object的鍵值對改變不會被監聽到（數組的push等方法能夠）,這個時候須要設置深度監聽：
    c: {
        deep:true,
        handler:function (val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal)
        }
    },
監聽的handler函數前面的這幾種寫法都是在數據變化的時候纔會執行，初始化的時候不會執行，可是若是設置immediate爲true就能夠了
    num:{
        immediate:true,
        handler:function(val){
            this.nums = val*2
        }
    }
咱們在回到上面的問題，用監聽器加上immediate屬性就能夠作到該效果，可是你們能夠看到的是邏輯稍稍有點複雜

watch還能夠經過實例對象直接使用:vm.$watch，返回一個取消監聽的函數，這個函數執行以後會取消監聽


咱們通常都會用到一個叫計算屬性的東西來解決：

計算屬性就是在實例配置項中經過computed來爲vm設置一個新的數據，而這個新數據會擁有一個依賴（一條已經存在的數據），當依賴發送變化的時候，新數據也會發送變化

與方法的方式相比，它性能更高，計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。相比之下，每當觸發從新渲染時，調用方法將總會再
次執行函數。
與watch相比，寫起來簡單，邏輯性更清晰，watch通常多用於，根據數據的變化而執行某些動做，而至於這些動做是在幹什麼其實無所謂，而計算屬性更有針對性，根據數據變化而更改
另外一個數據
計算屬性也擁有getter和setter，默認寫的是getter，設置setter執行能夠當此計算屬性數據更改的時候去作其餘的一些事情，至關於watch這個計算屬性
    xm:{
        get:function(){//getter 當依賴改變後設置值的時候
            return this.xing+'丶'+this.ming
        },
        set:function(val){//setter 當自身改變後執行
            this.xing = val.split('丶')[0]
            this.ming = val.split('丶')[1]
        }
    }
過濾器
vue中能夠設置filter(過濾器)來實現數據格式化，雙花括號插值和 v-bind 表達式中使用
vue1.0的有默認的過濾器，可是在2.0的時候所有給去掉了
因此在vue中若是想要使用過濾器就須要自定義
自定義的方法有兩種：全局定義和局部定義，全局定義的過濾器在任意的實例、組件中均可以使用，局部定義就是在實例、組件中定義，只能在這個實例或組件中使用
全局定義
Vue.filter(name,handler)
name是過濾器的名字，handler是數據格式化處理函數，接收的第一個參數就是要處理的數據，返回什麼數據，格式化的結果就是什麼
在模板中經過 | (管道符) 來使用,在過濾器名字後面加（）來傳參，參數會在handler函數中第二個及後面的形參來接收
    <p>{{msg | firstUpper(3,2)}}</p>

    Vue.filter('firstUpper',function (value,num=1,num2) {
        console.log(num2)
        return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
    })
局部定義
在實例、組件的配置項中設置 filters，鍵名爲過濾器名，值爲handler
 filters:{
     firstUpper:function (value,num=1,num2) {
     console.log(num2)
     return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
     }
 }
注意：
過濾器只能在mustache插值、v-bind裏使用，其餘的指令等地方都不能用
條件渲染
在Vue中可使用v-if來控制模板裏元素的顯示和隱藏，值爲true就顯示，爲false就隱藏
v-if控制的是是否渲染這個節點
當咱們須要控制一組元素顯示隱藏的時候，能夠用template標籤將其包裹，將指令設置在template上，等等vm渲染這一組元素的時候，不會渲染template
當有else分支邏輯的時候，能夠給該元素加上v-else指令來控制，v-else會根據上面的那個v-if來控制，效果與v-if相反，注意，必定要緊挨着
還有v-else-if指令能夠實現多分支邏輯
    <input type="text" v-model="mode">  
      <template  v-if="mode=='A'">
        <h1>1.title</h1>
        <p>個人第一個P標籤</p>  
      </template>
     <template  v-else-if="mode=='B'">
        <h1>2.title</h1>
        <p>個人第二個P標籤</p>
     </template>
     <template  v-else-if="mode=='C'">
        <h1>3.title</h1>
        <p>個人第三個P標籤</p>
     </template>
     <template  v-else>
       
        <p>很差意思，輸入有誤</p>
     </template>
須要注意的另外一個地方是：Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。這樣確實能使Vue變得更快，性能更高，可是有的時候咱們須要讓實例去更新dom而不是
複用，就須要給dom加上不一樣的key屬性，由於vue在判斷到底渲染什麼的時候，包括哪些dom能夠複用，都會參考key值，若是dom表現基本一致，符合複用的條件，可是key值不一樣，依然不會復
用
Vue還提供了v-show指令，用法和v-if基本同樣，控制的是元素的css中display屬性，從而控制元素的顯示和隱藏 ， 不能和v-else配合使用,且不能使用在template標籤上，由於template不
會渲染，再更改它的css屬性也不會渲染，不會生效
v-if vs v-show
v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。
通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。
mixin
在Vue中，咱們能夠經過定義多個mixin來實現代碼抽離複用，便於維護，提高頁面的邏輯性
要注意的是：data屬性不要使用mixin，由於從邏輯上來講，每個實例、組件的數據都應該是獨立的
一個mixin其實就是一個純粹的對象，上面掛載着抽離出來的配置，在某一個實例中，經過mixins選項（數組）導入後，此實例就擁有導入的mixin的配置
且導入的配置不會覆蓋原有的，而是合併到一塊兒
虛擬dom
頻繁且複雜的dom操做一般是前端性能瓶頸的產生點，Vue提供了虛擬dom的解決辦法
虛擬的DOM的核心思想是：對複雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操做。這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想
(1) 提供一種方便的工具，使得開發效率獲得保證
(2) 保證最小化的DOM操做，使得執行效率獲得保證
也就是說，虛擬dom的框架/工具都是這麼作的：
根據現有的真實dom來生成一個完整的虛擬dom樹結構
當數據變化，或者說是頁面須要從新渲染的時候，會從新生成一個新的完整的虛擬dom
拿新的虛擬dom來和舊的虛擬dom作對比（使用diff算法），。獲得須要更新的地方以後，更新內容
這樣的話，就能大量減小真實dom的操做,提升性能
組件化
模塊化就是將系統功能分離成獨立的功能部分的方法，通常指的是單個的某一種東西，例如js、css
而組件化針對的是頁面中的整個完整的功能模塊劃分，組件是一個html、css、js、image等外鏈資源，這些部分組成的一個聚合體
優勢：代碼複用，便於維護
劃分組件的原則：具備大量的佈局結構的，或者是獨立的邏輯的，都應該分紅組件
組件應該擁有的特性：可組合，可重用，可測試，可維護
組件
在vue中，咱們經過Vue.extend來建立Vue的子類，這個東西其實就是組件
也就是說Vue實例和組件的實例有差異可是差異不帶，由於畢竟一個是父類一個是子類
通常的應用，會擁有一個根實例，在根實例裏面都是一個一個的組件
由於組件是要嵌入到實例或者父組件裏的，也就是說，組件能夠互相嵌套，並且，全部的組件最外層必須有一個根實例，因此組件分爲：全局組件和局部組件
全局組件在任意的實例、父級組件中都能使用，局部組件只能在建立本身的父級組件或者實例中使用
組件經過不一樣的註冊方法成爲全局、局部組件
建立組件：
Vue.extend(options)
全局註冊：
    var App = Vue.extend({
        template:"<h1>hello world</h1>"
    })
    Vue.component('my-app',App)
組件經過template來肯定本身的模板,template裏的模板必須有根節點，標籤必須閉合
組件的屬性掛載經過：data方法來返回一個對象做爲組件的屬性，這樣作的目的是爲了每個組件實例都擁有獨立的data屬性
響應式原理
由於vue是mvvm的框架，因此當數據變化的時候，視圖會當即更新，視圖層產生操做後會自動通知vm來更改model，因此咱們能夠實現雙向數據綁定，而其中的原理就是實例會將設置的data逐
個遍歷利用Object.defineProperty給數據生成getter和setter，當數據變化地方時候setter會監聽到而且通知對應的watcher工具進行邏輯運算會更新視圖
聲明式渲染
在vue中，咱們能夠先在vue實例中聲明數據，而後經過{{}}等方式渲染在dom中

什麼是Vue？一、Vue.js（讀音 /vjuː/, 相似於 view） 是一套構建用戶界面的漸進式框架。二、Vue 只關注視圖層， 採用自底向上增量開發的設計。三、Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。Vue能夠用來作什麼？Vue能夠作從簡單到複雜的前端單頁應用，隨處可見的Web前端均可以用Vue來開發。爲何使用Vue？一、輕量級二、js語法三、入門及上手快vue與Jquery比較?一、jquery關注dom二、vue關注數據，不關注domVue.js 安裝使用 <script> 標籤引入。Vue的書寫格式<div id="vue_det">    <h1>{{details()}}</h1>  <!--使用兩個括號來展現數據--></div><script type="text/javascript">    var vm = new Vue({        el: '#vue_det',  //代表做用域        data: {          //存儲數據            ………        },        methods: {       //事件處理方法            details: function() {                ……            }        }    })</script>Vue的對象一、el：Vue的做用域，即只有在這個做用域裏面的dom受Vue控制二、data：vue頁面的數據模型，該數據模型爲一個javascript對象，且在運行過程當中該對象的屬性不容許增長，所以頁面數據模型必須提早定義好三、methods：事件處理方法對象數據綁定一、數據綁定最多見的形式就是使用 {{...}}（雙大括號）的文本插值二、使用 v-html 指令用於輸出 html 代碼示例：  <div id="app">    <div v-html="message"></div></div>    <script>new Vue({  el: '#app',  data: {    message: '<h1>Vue</h1>'  }})</script>三、HTML 屬性中的值應使用 v-bind 指令，參數在指令後以冒號指明。示例<div id="app">    <pre><a v-bind:href="url">百度</a></pre></div>    <script>new Vue({  el: '#app',  data: {    url: 'http://www.baidu.com'  }})</script>四、 v-model 指令來實現雙向數據綁定五、 v-on 指令，它用於監聽 DOM 事件過濾器（能夠接受參數）示例<div id="app">  {{ message | capitalize }}  <div v-bind:id="rawId | formatId"></div></div>    <script>new Vue({  el: '#app',  data: {    message: 'runoob'  },  filters: {        //過濾器都書寫在這個關鍵字裏面    capitalize: function (value) {  //過濾器函數接受表達式的值做爲第一個參數。      if (!value) return ''      value = value.toString()      return value.charAt(0).toUpperCase() + value.slice(1)    }  }})</script>條件語句一、v-if二、v-else三、v-else-if四、v-show注意：v-else 、v-else-if 必須跟在 v-if 或者 v-else-if以後。示例<div id="app">     <h1 v-show="true">Hello!</h1>     <div v-if="type === 'A'">      A    </div>    <div v-else-if="type === 'B'">      B    </div>    <div v-else-if="type === 'C'">      C    </div>    <div v-else>      Not A/B/C    </div></div>    <script>new Vue({  el: '#app',  data: {    type: 'C'  }})</script>v-if 和 v-show的區別（1）手段：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是經過設置DOM元素的display樣式屬性控制顯隱；（2）編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件；v-show只是簡單的基於css切換；（3）編譯條件：v-if是惰性的，若是初始條件爲假，則什麼也不作；只有在條件第一次變爲真時纔開始局部編譯（編譯被緩存？編譯被緩存後，而後再切換的時候進行局部卸載);v-show是在任何條件下（首次條件是否爲真）都被編譯，而後被緩存，並且DOM元素保留；（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；（5）使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換。循環語句循環使用 v-for 指令。示例<div id="app">  <ol>    <li v-for="site in sites">  //固定寫法  參數 in 數組/對象…      {{ site.name }}    </li>  </ol>  <ul>    <li v-for="(value, key) in sites">    {{ key }} : {{ value }}    </li>  </ul>  <ul>    <li v-for="(value, key, index) in sites">     {{ index }}. {{ key }} : {{ value }}    </li>  </ul></div> <script>new Vue({  el: '#app',  data: {    sites: [      { name: 'Runoob' },      { name: 'Google' },      { name: 'Taobao' }    ]  }})</script>樣式綁定1、Class屬性綁定一、行內對象綁定<style>.active {    width: 100px;    height: 100px;    background: green;}</style> <div id="app">  <div v-bind:class="{ active: isActive }"></div></div> <script>new Vue({  el: '#app',  data: {    isActive: true  }})</script>二、預約義對象綁定<style>.active {    width: 100px;    height: 100px;    background: green;}.text-danger {    background: red;}</style> <div id="app">  <div v-bind:class="classObject"></div> //直接綁定對象</div> <script>new Vue({  el: '#app',  data: {    classObject: {      active: true,      'text-danger': true    }  }})</script>三、數組綁定<style>.active {    width: 100px;    height: 100px;    background: green;}.text-danger {    background: red;} <body><div id="app">    <div v-bind:class="[activeClass, errorClass]"></div></div> <script>new Vue({  el: '#app',  data: {    activeClass: 'active',    errorClass: 'text-danger'  }})</script>2、style屬性綁定一、行內對象綁定<div id="app">    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123</div></div> <script>new Vue({  el: '#app',  data: {    activeColor: 'green',    fontSize: 30  }})</script> 二、預約義對象綁定<div id="app">  <div v-bind:style="styleObject">123</div></div> <script>new Vue({  el: '#app',  data: {    styleObject: {      color: 'green',      fontSize: '30px'    }  }})</script>三、數組綁定<div id="app">  <div v-bind:style="[baseStyles, overridingStyles]">123</div></div> <script>new Vue({  el: '#app',  data: {    baseStyles: {      color: 'green',      fontSize: '30px'    },    overridingStyles: {      'font-weight': 'bold'    }  }})</script>Vue初始化方法Mounted在vue初始化完成後調用該方法,通常用於vue初始化完成後須要自動執行的代碼。示例new Vue({  el: '#app',  data: {    totalMoney: 0,    productList: []  },  filters: {  },  mounted: function() {           //書寫須要自動執行的代碼  } });v-model 指令在表單控件元素上建立雙向數據綁定1、單選框和複選框示例<div id="app">  <p>單個複選框：</p>  <input type="checkbox" id="checkbox" value="asd" v-model="checked">  <label for="checkbox">{{ checked }}</label>      <p>多個複選框：</p>  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">  <label for="runoob">Runoob</label>  <input type="checkbox" id="google" value="Google" v-model="checkedNames">  <label for="google">Google</label>  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">  <label for="taobao">taobao</label>  <br>  <span>選擇的值爲: {{ checkedNames }}</span></div> <script>new Vue({  el: '#app',  data: {    checked : 123,    checkedNames: [1]  }})</script>注意一、checked的值根據勾選狀態的不一樣而改變，但不是true就是false二、checkedNames是一個數組，裏面元素包含的是你選中的的複選框的全部的value2、下拉菜單示例<div id="app">  <select v-model="selected" name="fruit">    <option value="">選擇一個網站</option>    <option value="www.runoob.com">Runoob</option>    <option value="www.google.com">Google</option>  </select>   <div id="output">      選擇的網站是: {{selected}}  </div></div> <script>new Vue({  el: '#app',  data: {    selected: ''  }})</script>注意根據你選中的哪一個option，而後你綁定的模板所對應的值就是你選中的那個option的valueVue的組件書寫格式Vue.component('組件名',{props:['屬性名'],template:'模板內容'})一、組件的簡單書寫格式<div id="app">    <runoob></runoob>   <!--自定義組件的是使用--></div> <script>Vue.component('runoob', {  //自定義組件  template: '<h1>自定義組件!</h1>'})new Vue({  el: '#app'})</script>二、新建一個.js文件，將Vue的組件書寫在這個文件中，使用<script> 標籤引入1）新建.js文件Vue.component('my-clock',{    props:[        'format'      //自定義組件的屬性，能夠用來傳遞值    ],    template:'<h3>{{d|formatdate(format)}}</h3>',   //將值傳遞給過濾器使用    filters:{        formatdate:function(d,frm){                            var dt= d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();            var tm=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();            if(frm=='date'){                return dt;            }else if(frm=='time'){                return tm            }else{                return dt+' '+tm            }                }    },     data: function(){     //必須使用函數 將數據進行隔離，不然多個位置使用同一個組件數據會共享        return {            d: new Date()            }    },    methods:{        updatetime: function (){            this.d=new Date()        }    },     mounted:function (){        setInterval(this.updatetime,1000);    }});2）引入.js文件，並使用自定義組件<script src="js/vue_00.js"></script><div id="qwee">         <my-clock format="data"></my-clock></div>            <script>    new Vue({        el:"#qwee"    })</script>
--------------------- 

一、安裝淘寶鏡像

npm install -g cnpm --registry= https://registry.npm.taobao.org

二、全局安裝webpack

一、安裝了淘寶鏡像

cnpm install webpack -g 

二、沒安裝

npm install webpack -g

三、安裝vue腳手架

npm install vue-cli -g

四、建立一個文件夾，最好有本身的worksapce

五、根據模板建立項目

vue init webpack-simple 工程名字<工程名字不能用中文>

或者建立 vue1.0 的項目 vue init webpack-simple#1.0 工程名字<工程名字不能用中文> 會有一些初始化的設置，以下輸入: Target directory exists. Continue? (Y/n) 直接回車默認(而後會下載 vue2.0模板，這裏可能須要連代理) Project name (vue-test) 直接回車默認 Project description (A Vue.js project) 直接回車默認 Author 寫你本身的名字

六、安裝項目依賴

*必須這麼寫

npm install

七、啓動項目

npm run dev

總結一下不能成功的緣由：
一、node 、npm版本
二、遺漏步驟

八、使用ElementUI

若是不熟悉移步官網：http://element.eleme.io/#/zh-CN
一、cnpm i element-ui@1.2.5 -S（推薦1.2.5版本）
二、而後在 main.js 引入並註冊

import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Element)

三、須安裝

cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev

安裝好後package.json下的內容

{

"name": "vue-router-cli", "description": "A Vue.js project", "version": "1.0.0", "author": "Allen <13402202685@163.com>", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { *"element-ui": "^1.2.5",* "vue": "^2.2.1", "vue-resource": "^1.2.1", "vue-router": "^2.3.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-latest": "^6.0.0", "cross-env": "^3.0.0", *"css-loader": "^0.25.0",* *"file-loader": "^0.9.0",* *"style-loader": "^0.16.1",* "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } } 

四、在 webpack.config.js 中的 loaders 數組加入如下配置

{
    test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/, loader: "file" }

如今就可使用Element了，若是你想用其餘的UI框架也能夠自行安裝的

九、編譯

npm run build

最近半年都在作VueJS的前端開發，搭了幾個框架，今天開源個還算不錯的，分享出來下，若是你以爲不錯就點個贊！效果圖以下：項目地址：https://gitee.com/QCBZ/vwnUI用的是elementUI2.2.0版本的，VueJS 2.5.0，webpack3.9的。vwn-綜合後臺框架vwn-基於vuejs2.5-elementUI2.2-webpack3.9的一套前端綜合後臺框架本項目是後臺管理框架，集成了權限管理、登陸功能、UI組件、上傳等功能，建議直接使用。注意：便於前端調試，因此數據請求都是用了mockjs模擬。在須要請求外部api時請移除mock文件。Features 特性 - **工業化UI組件**（上手即用，無需本身造輪子）- `登陸/註銷`- `權限驗證`- **多TAB導航**（沒有多TAB怎麼能稱爲後臺管理界面呢？）- `Tinymce 編輯器`- `Markdown 編輯器`- `動態側邊欄`（支持多級路由）- 麪包屑導航- JSON展現組件- echartjs圖表- 404錯誤頁面- **表格數據直接導出cvs**- mock數據- 炫酷hover特效 Run 開發 # 克隆項目 git clone https://gitee.com/QCBZ/vwn.git # 安裝依賴 npm install //or # 建議不要用cnpm 安裝有各類詭異的bug 能夠經過以下操做解決npm速度慢的問題 npm install --registry=https://registry.npm.taobao.org # 本地開發 開啓服務 npm run dev 瀏覽器訪問 http://localhost:80 Build 發佈 # 發佈 npm run build FileTree 目錄結構 ├── doc // 項目文檔 ├── build // 構建相關 ├── config // 配置相關├── src // 源代碼│ ├── api // 全部請求│ ├── assets // 靜態資源文件│ ├── icons // ico圖標│ ├── components // 全局UI組件│ ├── mock // mock數據│ ├── lang // 語言包│ ├── vendor // 第三方包│ ├── router // 路由│ ├── store // 全局store管理│ ├── utils // 全局公用方法│ ├── styles // 全局樣式│ ├── views // view界面│ │ ├── dashboard //圖表組件│ │ ├── layout //框架佈局組件│ │ ├── vwn //示例│ │ ├── login //登陸界面│ │ ├── errorPage //錯誤界面│ │ └── permission //權限測試界面│ ├── App.vue // 入口頁面│ └── main.js // 入口 加載組件 初始化等│ └── permission.js // 權限 加載組件 初始化等│ └── errorLog.js // 錯誤日誌 加載組件 初始化等├── static // 靜態資源├── .babelrc // babel-loader 配置├── eslintrc.js // eslint 配置項├── .gitignore // git 忽略項├── favicon.ico // favicon圖標├── index.html // html模板└── package.json // package.json---------------------