遍歷樹形json資料

var root = [{
            name:'D盤',
            children:[{
                    name:'學習',
                    children:[
                        {
                            name:'電子書',
                            children:[
                                {
                                    name:'文學'
 
,                                         
                                    children:[
                                        {
                                            name:'茶館'                                                   
                                        },
                                        {
                                          name:'紅與黑'
 

                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    name:'電影',
                    children:[
                        {
                            name:'美國電影'
 

                        },
                        {
                            name:'日本電影'
                        }
                    ]                  
                }
            ]
        }
    ]

function getMenuName(menus){
    for (var value of menus) {

        if (value.children) {
            getMenuName(value.children)
        }
        value.name = '遍歷'
        value.value = value.name
        console.log(value.name);
    }

}
getMenuName(root);
console.log(JSON.stringify(root, null, 4))

mockjs生成假資料

var Random = Mock.Random;
    var data = Mock.mock({
         'list|3': [{
            'id|+1': 1,
            'age|1-100': 100,
            // 英文姓名
            'name' :'@name',
            // 顏色
            'color': '@color',
            // 英文標題
            'title': '@title',
            // 連結
            'url': '@url("http")',
            // 郵箱
            'email': '@email',
            // 圖片
            'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),
            // 時間
            'date': '@date("yyyy-MM-dd HH:mm:ss")',
            'date2': '@dateTime',
            // 漢字
            'ctitle': '@ctitle(8)',
            // 漢字姓名
            'canme': '@cname()',
            // 地址
            'cadd': '@province' + '@city' + '@county',
            // 手機號
            'phone': /^1[385][1-9]\d{8}/

         }]
     });
     console.log(JSON.stringify(data, null, 4))

vuecli升級之後找不到devserver.js配置檔案之後

//首先
const express = require('express')
const app = express()
var appData = require('../data.json') // 引入資料
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

//找到devServer,新增
before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      // 這裡是你的json內容
      errno: 0,
      data: appData.seller // json裡面對應的鍵名
    })
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      // 這裡是你的json內容
      errno: 0,
      data: appData.goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      // 這裡是你的json內容
      errno: 0,
      data: appData.ratings
    })
  })
}

http-proxy-middleware 代理設定

config裡面的proxyTable
修改成

不需要動build裡面的dev-server.js裡面的程式碼

 proxyTable: {
     '/api': {
        target: 'http://crm.tonyliangli.cn/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

監聽事件的引數傳遞

一個子元件使用$emit('eventName', param);傳送事件, 在父元件通過@eventName="listenEvent(父元件事件名字)"

// 父元件
export default {
    methos: {
        listenEvent (data) {
            // data 即為子元件傳遞過來的引數
        }
    }
}

vue-resource的使用

• 安裝

npm i vue-resource --save-dev

• 引入

import Vueresource from 'vue-resource'

• 註冊

Vue.use(Vueresource)

• 使用

// 便捷方法
this.$http.get({url:'api/index', headers:{Authorization:'Basic Yxsdlfjui'}})
.them((data) => {
    // 請求成功
}, (error) => {
    // 請求失敗
})

// 底層方法
Vue.http({
    url:'api/index2',
    method: 'POST',
    data: {
        param: 1
    }
})
.then((data) => {
    // 請求成功
}, (error) => {
    // 請求失敗
})

• 便捷方法

便捷方法是對底層方法的封裝

this.$http.get(url,{data},{opation})

• 引數

  • url: 字串, 請求地址
  • data: 物件或者字串
  • opation: 物件, 傳入的物件來控制請求

• 返回的response物件

  • data(物件或者字串): 伺服器返回的資料, 已用JSON.parse解析
  • ok(布林值): 當HTTP響應碼在200-299區間是true, 表示響應成功
  • status(數值): HTTP響應碼
  • statusText(字串): HTTP響應狀態文字描述

  - headers(函式): 響應頭資訊

• 返回Promise物件
  執行HTTP呼叫後會返回一個Promise物件, 該物件提供了then, catch, finally註冊回撥函式

var promise = this.$http.post('api/index');
promise.this(function(response){
    // 成功回撥
}, function(error){
    // 失敗回撥
})

promise.catch(function(error){
    // 失敗回撥
})
promise.finally(function(){
    // 失敗或者成功後都會執行此函式
})
// 所有回撥函式的`this`都指向元件例項

• JSONP請求

  • 設定methos的值為JSONP即可
  • this.$http.jsonp()也可以

• 修改發給伺服器端的資料型別

預設情況下, 傳送給伺服器請求頭的Content-Type為application/json

有時我們需要將資料提交為指定的型別

1. 全域性headers配置

Vue.http.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

1. 例項配置

this.$http.post(
    'api/index',
    // 成功回撥
    function(data, status, request) {
        if(status === 200) {
            // 成功
        }
    },
    // 例項配置
    {
        headers: {
            'Content-Type':'multipart/form-data'
        }
    }
)

實力配置優先於全域性配置

post請求變成OPTIONS請求的解決方案

Vue.http.options.emulateJSON = true
// 

其他細節知識點

• 引入的元件名字不能為Index
• components: {}
• a標籤的href屬性寫 href="#/rouer"
• router-link標籤的to屬性寫 to="./"

- Vue.use(外掛名稱); 註冊外掛, 註冊到Vue物件本身上面

VUE修改陣列內元素, 頁面不更新問題解決

由於 JavaScript 的限制， Vue 不能檢測以下變動的陣列：

• 當你利用索引直接設定一個項時，例如： vm.items[indexOfItem] = newValue
• 當你修改陣列的長度時，例如： vm.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果， 同時也將觸發狀態更新：

editNum(index) {
    console.log(this.carts[index].editState);
    let obj = this.carts[index];
    obj.editState = !obj.editState;

    this.$set(this.carts, index, obj);
    console.log(this.carts[index].editState);
}