vueJS+ES6開發移動端APP實戰項目筆記

1、什麼是MVVM框架

MV*包括MVC、MVP、MVVM

MVVM框架由Model、View、ViewModel構成。

Model指的是數據，在前端對應的是JavaScript對象。

View指的是視圖，在前端對應的是DOM

ViewModel觀察Model和View的變化來作更新，實現了數據的雙向綁定。

前端MVVM框架主要包括：angularJS、reactJS、VueJS

2、Vuejs的核心思想（數據驅動、組件化）

一、數據驅動：數據雙向綁定

二、組件化：

頁面任何部分均可以做爲一個組件，頁面只是組件的容器，一個組件對應一個vue文件，組件之間能夠傳遞參數，例如：某個頁面分爲菜單、內容、底部，能夠將菜單做爲一個組件。

3、Vue-cli

幫助寫好Vuejs代碼的工具，幫助咱們作目錄結構、本地調試、代碼部署、熱加載、單元測試等工做，它是vuejs的腳手架

安裝：

全局安裝：npm install -g vue-cli

新建項目（這裏使用webpack模板）：vue init webpack <project name>

接着：

cd <project name> 進入項目

npm install   安裝依賴代碼庫

npm run dev  啓動服務

4、vue組件

<template>
  <!--結構-->
  <div @click="showDetail">Hello</div>
  <!--導入組件的引用區域, -->
  <OtherComponent></OtherComponent>
</template>
<style lang="stylus" type="text/stylus">
    /*樣式*/
</style>
<script type="text/ecmascript-6">
    import OtherComponent from './components/other.vue' //導入其它組件
    export default{
      //props對象是引用當前組件可能須要傳的參數，以便後續的計算操做，這裏是一個數字類型的參數
      props: {
        argu: {
          type: Number
        }
      },
      //data函數，返回一個對象，裏面是能進行雙向綁定的數據
      data(){
          return{
            detailShow:false
          }
      },
      //computed計算屬性 處理複雜的邏輯
      computed: {
        count () {
          return  this.argu + 1
        }
      },
      //事件方法
      methods: {
        showDetail: function () {
          this.detailShow = true
        }
      },
      //註冊組件
      components:{
          'other-component':OtherComponent,
      }
    }
</script>

 

5、vue-router基礎用法（2.x版本）

文檔：http://router.vuejs.org/zh-cn/  最詳細的用法還須要多看文檔

安裝：

在package.json文件的依賴添加vue-router值

執行npm install 命令，它能根據package.json裏列舉的npm模塊來安裝全部模塊

使用：

好比說頁面常見的tab切換，經過點擊，在一個區域內切換相應的組件

切換按鈕：router-link組件做爲單頁某個路由組件的連接，它會渲染成a連接，to屬性指定連接地址

切換區域：router-view組件，路由匹配的組件在這塊區域渲染

導入須要的組件