Vue快速入門教程

Vue是什麼及其特點

一、Vue.js是一套構建用戶界面的漸進式框架，也就是說你可以根據需要引入，不會在初始化就引入很多內容，簡單輕量。

二、 Vue是MVVM（Model，View，ViewModel）模型的框架。

三、Vue對應用使用組件化進行構建，組件小型，可複用，可以讓我們的代碼更加方便管理。

四、 Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。
在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價並應用到 DOM 操作上。

實例的生命週期

每個vue實例在被創建前都需要經過一系列的初始化過程，例如需要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數，給予用戶機會在一些特定的場景下添加他們自己的代碼。
理解vue的生命週期可以幫助我們在實際中進行開發。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                },
                created:function(){
                    console.log('實例已經創建,msg變量還未渲染到模板')
                },
                mounted:function(){
                    console.log('已經掛載到模板上:msg變量渲染到模板')  
                },
                updated:function(){
                    console.log('實例更新啦')    
                },
                destroyed:function(){
                    console.log('銷燬啦')  
                }
            });
        }
    </script>
</head>
<body> 
    <div id="box">
        <input type="text" v-model="msg"><br/>
        {{msg}}
    </div>
</body>
</html>

vue的響應式原理

說到Vue的特性就不得不說它的響應式系統了。
數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。這使得狀態管理非常簡單直接，不過理解其工作原理同樣重要，這樣你可以迴避一些常見的問題。

如何追蹤變化？

當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉爲 getter/setter。
用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄爲依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

網絡請求axios

vue2.0之後，就不再對vue-resource更新，而是推薦使用axios。在Vue中可以通過Axios進行網絡請請求。
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

功能特性:　
-從瀏覽器中創建 XMLHttpRequests
- 從 node.js 創建 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換 JSON 數據-
- 客戶端支持防禦 XSRF

更詳細的請右轉->axios的使用及中文說明

路由router

爲什麼需要用到router(路由)呢?
在vue中，我們是通過組件來組成應用程序的，我們需要控制頁面的跳轉呢？這時候vue-router就發揮作用了。

當你要把 vue-router 添加進來，我們需要做的是，將組件(components)映射到路由(routes)，然後告訴 vue-router 在哪裏渲染它們。

route的兩個主要標籤有2個：
默認會被渲染成一個 <a> 標籤，所以我們可以用它來導航鏈接到哪個頁面；
用於將頁面(組件)渲染到標籤裏
如下：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這裏 -->
  <router-view></router-view>
</div>

路由的使用我們需要配置，將組件映射到路由。

// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創建 router 實例，然後傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啓動了！

通過注入路由，我們可以用 this.$router 來訪問它，router中記錄了路徑的跳轉可以幫助我們進行頁面跳轉導航。

vue-router的官方文檔

狀態管理vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態。
每一個 Vuex 應用的核心就是 store（倉庫）

可以把它理解成類似一個全局的存儲對象。但是，Vuex 和單純的全局對象有以下兩點不同：
1. Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地得到高效更新。
2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。
舉個例子：

//-----main.js start--------
import vuex from 'vuex'
import store from './store'
···
Vue.use(vuex)
···

new Vue({
  el: '#app',
  router,
  store,//將store掛載到根節點,把 store 對象提供給 “store” 選項，這可以把 store 的實例注入所有的子組件,且子組件能通過 this.$store 訪問到
  components: { App },
  template: '<App/>'
})
//-----main.js end--------

//-----store.js start--------
import Vue from 'vue'
import Vuex from 'vuex'
// import Axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
    //state對象存放全部的應用層級狀態
  state: {
    unreadNews: []
  },
  //用來從 store 獲取 Vue 組件數據
  getters: {
    unreadNews: state => state.unreadNews
  },
  //Mutators:事件處理器用來驅動狀態的變化， mutation處理同步事務
  mutations: {
    addunreadNews (state, newData) {
      state.unreadNews.push(newData)
    },
    clearunreadNew (state) {
      state.unreadNews = [];
      console.log('清除數據clearunreadNew' + state.unreadNews)
    }
  }
  //action用於執行異步操作
  actions: {

  }
})
export default store
//-----store.js  end--------

//在組件中可以通過使用this.$store.state中獲取應用的狀態
<span class="newNum">[{{this.$store.state.unreadNews.length}}]</span>

//在組件中可以調用store.commit 方法，通過this.$store.commit('functionname',arg)修改store中的state，那麼當我們變更狀態時，監視狀態的 Vue 組件也會自動更新
methods:{
        changeUnReadyNews(){
          console.log('清除數據'+JSON.stringify(this.newmovicelist))
          this.$store.commit('clearunreadNew')
        }
      }

參考資料彙總：
vue中文文檔
 vuex中文文檔
 vue-router中文文檔
 Axios中文說明
 vue2.0源碼分析之理解響應式架構

Vue快速入門教程

Vue快速入門教程

目錄

Vue是什麼及其特點

實例的生命週期

vue的響應式原理

網絡請求axios

路由router

狀態管理vuex

Node-3.構建Web應用(二)

Node-2.垃圾回收機制

前端基礎技術點（CSS相關）

Node-1.高性能服務器

Node-3.構建Web應用(一)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結