Vue2.0一——入門簡介、MVVM、安裝、組件、模塊化

Vue簡介

Vue的做者是世界華人的驕傲——尤雨溪，初衷是感到angular的api設計很繁瑣 學習曲線很陡峭 
因而就本身開始造輪子 逐漸的14年的時候開源了vue前端開發庫
經過簡潔的api提供高效的數據綁定和靈活的組件系統

MVVM數據綁定

本質是經過數據綁定連接的view和model 讓數據的變化自動映射爲試圖的更新
在數據綁定的api設計上借鑑了angular的指令機制

<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>{{msg}}</span>
<!-- 雙向綁定 -->
<input v-model="msg">

與Angular不一樣的是，Vue.js的API裏並無繁雜的module、controller、scope、factory、service等概念，一切都是以「ViewModel 實例」爲基本單位

<!-- 模板 -->
<div id="app">
    {{msg}}
</div>
// 建立一個 ViewModel 實例
var vm = new Vue({
    // 選擇目標元素
    el: '#app',
    // 提供初始數據
    data:'hello'
})

安裝 環境搭建

（1）不使用腳手架
    1. cnpm i vue -S

    2. 單頁面應用刪除一些不須要的 減chunks 壓縮
    
    3. 在app,js裏 引入 import Vue from 'vue' 
    cosole.log(Vue)
    測試 npm run dev 
    
    4.在index.html裏建立div#root
    
    5.渲染 註冊 頁面初步渲染
    
    6.import Vue from './Vue/dist/Vue.js'
    
    7.webpack別名配置 webpack.config.js
        resolve:{
            alias:{
                'vue$': 'vue/dist/vue.js'
            }
        }
        改app.js中import Vue from 'vue'
（2）使用腳手架搭建 （推薦，畢竟成熟 省的本身寫bug）

    一、安裝包工具: yarn替換npm的工具
    二、裝yarn: mac：brew install yarn
    三、全局裝vue-cli:  yarn install vue-cli
    四、初始化vue項目：
        $:vue init webpack lagou
            一直回車
            vue-router Y
            ESlint No
            Kama N
            e2e N
        $:tree
        $:yarn install
        (yarn 的淘寶鏡像)
        $: yarn config set registry https://registry.npm.taobao.org
    五、安裝依賴 
        $: yarn install
        $:cnpm i
    六、運行
        $: npm run dev
        
        index.js中的30行 port：4000
        false
        
        cnpm i mint-ui -S
        cnpm i axios -S
        cnpm i sass-loader node-sass -D

組件

在大型的應用中，爲了分工、複用和可維護性，咱們不可避免地須要將應用抽象爲多個相對獨立的模塊。
 在較爲傳統的開發模式中，咱們只有在考慮複用時纔會將某一部分作成組件；
 但實際上，應用類 UI 徹底能夠看做是所有由組件樹構成的
 
 組件能夠擴展 HTML 元素，封裝可重用的代碼。

一、全局註冊組件

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受參數
    props: {
        msg: String<br>    

    },
    // 私有數據，須要在函數中返回以免多個實例共享一個對象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})

 <my-component msg="hello"></my-component>       
  渲染結果：
<div>hello component!</div>

二、模板組件

abc.vue文件中
    <template>
      <div class="my-component">
        <h2>Hello from {{msg}}</h2>
        <other-component></other-component>
      </div>
    </template>
    
    <script>
    // 遵循 CommonJS 模塊格式
    var otherComponent = require('./other-component')
    或es6 import otherComponent from './otherComponent'
    // 導出組件定義
    module.exports = {
      data: function () {
        return {
          msg: 'vue-loader'
        }
      },
      components: {
        'other-component': otherComponent
      }
    }
    </script> 
      
    <style>
        .my-component h2 {
          color: red;
        }
    </style>

模塊化管理 => es6 & commenjs

es6 >

暴露對象的兩種方式
a.
name.js:
    const Name = {}
    export { Name }

app.js
    import { Name } from './name'

b.
name.js
    const Name = {}
    export default Name
app.js
    import name form './name'
注意：一個模塊只能有一個default

c.若是是兩個
    const Name = {}
    const Age = {}
    
    export { Name, Age as default}
    
    app.js
        import Age,{Name} form './name'

commenjs >

定義模塊：
var Name = {}
module.exports = Name
引用模塊：
var name = require ('./name')

若是沒有webpack瀏覽器不能執行 沒有require方法

注：webpack是如何將commenjs運行在瀏覽器中的？
    分析app.js打包後的js
    （ bind只綁定 不執行  call apply 會執行）
    
注：commenjs 與 AMD：
    commenjs相比requirejs規範AMD是靜態的，commenjs是同步的，
    可是commenjs規範是運行在node環境下的 沒有nodejs就不能運行，
    須要在瀏覽器端實現，實現工具就是webpack，
    webpack會將commenjs規範翻譯成瀏覽器能夠編譯的語言，
    藉助webpack打包完運行便可，速度快
    AMD是異步的須要一些模塊加載完才能調用