Vue.js簡單入門

 1、Vue是什麼？

Vue.js（讀音 /vjuː/, 相似於view）是一套構建用戶界面的漸進式框架。
與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。
Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

Vue.js 自身不是一個全能框架——它只聚焦於視圖層。所以它很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，在與相關工具和支持庫一塊兒使用時，Vue.js 也能完美地驅動複雜的單頁應用。

2、Vue的優點

1.輕量級的框架
2.雙向數據綁定
3.指令
4.插件化

3、Vue和Jquery的不一樣

jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。 

Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。

vue適用的場景：複雜數據操做的後臺頁面，表單填寫頁面
Jquery適用的場景：好比說一些html5的動畫頁面，一些須要js來操做頁面樣式的頁面，然而兩者也是能夠結合起來一塊兒使用的，vue側重數據綁定，jquery側重樣式操做，動畫效果等，則會更加高效率的完成業務需求。

4、Vue的安裝

1.直接用<script>導入
直接在官網下載並用 <script> 標籤引入
2. CDN
BootCDN（國內） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （國內不穩定）。           
unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發佈的最新的版本一致。（推薦使用）
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src=「https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js」></script>）。
3. NPM方法
node.js環境（npm包管理器）
vue-cli 腳手架構建工具
cnpm npm的淘寶鏡像  

5、Vue起步

1.模板語法：
<div id="app">{{ message }}</div>
2. Vue實例會把模板和數據結合起來掛載到掛載點上。
var app = new Vue({//這個vue實例接管id爲app的dom元素，只會處理掛載點內的內容el: ‘#app’,//掛載點
template:’<h1>hello {{msg}}</h1>’,//模板data: {message: 'Hello Vue!'}})

一個簡單的vue實例的結構

6、Vue生命週期

可參考：https://cn.vuejs.org/v2/guide/instance.html

7、Vue基本語法

 　　1.v-bind

         

           渲染後的效果：

　　　

           使用v-bind動態綁定class：

           

　　 

        2.v-on:click

        

       

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。
.stop
.prevent
.capture
.self
.once
.passive

 

<!-- 阻止單擊事件繼續傳播 --><a v-on:click.stop="doThis"></a>
<!-- 提交事件再也不重載頁面 --><form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符能夠串聯 --><a v-on:click.stop.prevent="doThat"></a>

<!-- 點擊事件將只會觸發一次 --><a v-on:click.once="doThis"></a>

　　3. v-if   （若是值爲false,則頁面不渲染）

        

        4. v-else-if

        

        5. v-show（若是值爲false，頁面依然渲染，只是添加了display:none）

　　

　　渲染後的效果：

　　

         6. v-for

　　  

         渲染後的效果：

         

           7.v-model用在表單 <input>、<textarea> 及 <select> 元素上建立雙向數據綁定

            

　　　　渲染後的效果：

　　　　

　　　 8. 計算屬性，在模板中放入複雜的邏輯，會讓模板太重且難以維護,這時應用計算屬性

               

  8、組件基礎

         一個簡單的組件

         

  

　　　　　　　PS1: 組件中經過 Prop接收傳遞過來的數據, v-bind 來動態傳遞 prop
　　　　　　Prop 是你能夠在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。

　　　　　　

　　　　　　

 　　　　   組件中向父組件中傳遞數據使用$emit方法來實現，經過事件向父級組件發送消息

                 

　　　　　當點擊這個按鈕時，咱們須要告訴父級組件放大全部博文的文本。幸虧 Vue 實例提供了一個自定義事件的系統來解決這個問題。

　　　　　咱們能夠調用內建的 $emit 方法並傳入事件的名字，來向父級組件觸發一個事件：

　　　　　<button v-on:click="$emit('enlarge-text')">
　　　　　　　Enlarge text
　　　　　</button>
　　　　　而後咱們能夠用 v-on 在博文組件上監聽這個事件，就像監聽一個原生 DOM 事件同樣：

　　　　　<blog-post
　　　　　　　...
　　　　　　　v-on:enlarge-text="postFontSize += 0.1"
　　　　　></blog-post>

　　　　　　

                     PS2: 每一個組件必須只有一個根元素

　　　　　　      

9、vue-cli腳手架

能夠用來構建一個vue的工程，須要安裝node, webpack(前端資源加載/打包工具,它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。)
1.使用npm（須要安裝node環境）全局安裝webpack,打開命令行工具輸入：npm install webpack –g,安裝完成以後輸入 webpack –v
2.全局安裝vue-cli，在cmd中輸入命令: npm install --global vue-cli, 安裝完成以後輸入 vue –V
3.用vue-cli來構建項目, 進入自定義文件夾路徑下，輸入命令：vue init webpack testVue 在當前目錄生成一個以該名稱命名的項目文件夾