配置檔案

• index.js
• webpack.base.conf.js

vue.js基礎語法

• mustache語法：{{msg}}
• html賦值：v-html=""
• 繫結屬性：v-bind:id=""
• 使用表示式：{{ ok?'Yes:No' }}
• 文字賦值：v-text=""
• 指令：v-if=""條件判斷
• 過濾器：{{ message | capitalize }}和v-bind:id="rawId | formatId"

class和style繫結

• 物件語法：v-bind:class="{'active':isActive, 'text-danger':hasError}"
• 陣列語法：v-bind:class="[activeClass, errorClass]"
data:{
activeClass:'active',
errorClass:'text-danger'
}
• style繫結-物件語法：v-bind:style=""

條件渲染

• v-if
• v-else
• v-else-if
• v-show
• v-cloak

v-if如果條件不成立，元素不渲染
v-show如果條件不成立，渲染，置display:none
v-cloak 如果頁面重新整理的太快，導致有些頁面的元素沒有加載出來，v-cloak

事件處理器

• v-on:click="greet" 或 @click="greet"
• v-on:click.stop 阻止事件冒泡
  v-on:click.stop.prevent 阻止預設事件
  v-on:click.self 給這個div繫結事件的物件本身繫結事件？
  v-on:click.once給這個事件繫結一次
• v-on:keyup.enter

路由

import HelloWorld from '@/components/HelloWorld' @ 表示 src 目錄

巢狀路由

路由index.js

import Vue from
 
 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
        path: '/goods',
        name: 'GoodsList',
        component: GoodsList,
        children: [{
            path: 'title',
            name: 'title',
            component: Title
        }]
    }]
})

views/GoodsList.vue

<template>
  <div>
      <p>這是商品列表頁</p>
      <router-link to="/goods/title">標題</router-link>
      <div>
          <router-view></router-view>
      </div>
  </div>
</template>
<style></style>
<script>
export default {
  data() {}
}
</script>

views/Title.vue

<template>
  <div>
      <p>這是商品標題元件</p>
  </div>
</template>
<style></style>
<script>
export default {
  data() {}
}
</script>

程式設計路由
通過js來實現頁面的跳轉

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=1234"})或$router.push({path:"name",query:{a:1234}})

… …

AMD CMD CommonJS和ES6的對比

• AMD是RequireJS在推廣過程中對模組定義的規範化產出。非同步模組定義，特點：依賴前置

define(['package/lab'],function(lab){
    function foo(){
        console.log("hello world")
    }

    return {
        foo:foo
    };
});

• CMD是SeaJS在推廣過程中對模組定義的規範化產出。同步模組定義，特點：即用即調

define(function(require, exports, module){
    var $ = require("jquery")
    var Spinning = require("./spinning")
});

• CommonJS規範 - module.exports 在服務端使用，在服務端進行模組劃分

exports.area = function (r) {
    return Math.PI * r * r;
};

exports.circumference = function (r) {
    return 2 * Math.PI * r;
};

• ES6特性 export/import

export default {
  name: 'HelloWorld',
  data () {
    return {
      num:10,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    increment () {
      this.num++;
    },
    decrement () {
      this.num--;
    }
  },
  components:{
    Counter
  }

}

node.js

• http
• module
• path
• url util …

其他

express的router通過get與POST傳遞引數時，後端獲取引數的方式的區別

• GET 通過req.param("param1")的方式獲取
• POST 通過req.body.param1的方式獲取

前端傳參的區別

• GET

axios.get('/path',{
  params:{
    key:value
  }
}).then((res)=>{

  });

• POST

axios.post('/path',{
  key:value
}).then((res)=>{

  });

踩坑

• js物件的語法易錯

是

var param = {
    userName: req.body.userName,
    userPwd: req.body.userPwd
}

不是

var param = {
    userName = req.body.userName,
    userPwd = req.body.userPwd
}

• 請求的回撥函式引數的順序是 (req, res, next),不是(res, req, next)

錯誤總結

Error: spawn cmd ENOENT

很明顯了，錯誤資訊都給出了 cmd 關鍵詞，我一開始一直以為是node的版本的問題，特地把版本降到了7.0，錯誤的參考了github上關於這個問題的討論 升級Node.js 8 之後，npm run dev 會出現問題
為此我還學會了如何解除安裝高版本的node，再裝回舊版本的。要解除安裝高版本的node,有一個辦法就是再重新點開這個版本的node安裝包，在安裝選項中選擇remove就可以解除安裝當前的node版本了，之後再裝其他低版本的node就都沒問題了
浪費了我很多時間，最後終於找到了解決辦法 Get ‘spawn cmd ENOENT’ when try to build Cordova application (event.js:85) 我按照連結裡的方法將C:\Windows\System32新增到環境變數path中就好了，點贊量高的答案果然很有用！

Vuex

專門為vue.js應用程式開發的狀態管理模式
構建中大型單頁面程式時，Vuex能夠更好的幫助我們在元件外部統一管理狀態

核心概念
State 唯一的資料來源、載體
Getters 通過getters可以派生出一些新的狀態
Mutations 唯一可以提交和改變狀態的，Vuex的store中的狀態的唯一提交方法
Actions 提交的是mutation，而不是直接變更的狀態，可以包含任意非同步操作
Modules 面對複雜的應用程式，當管理的狀態比較多時，需要將Vuex的store物件分割成模組(modules)

線上部署

後端和前端程式碼分開。使用nginx實現介面轉發，不會跨域
部署到線上時如果採用資料夾的形式，注意修改路徑配置config/index.js/中的assetsPublicPath為程式碼存放的資料夾，否則會找不到資原始檔的路徑

課程資源