vue學習總結（一）

1.vue 經常使用命令

• npm install 安裝依賴
• npm run dev 啓動本地開發
• npm run build 打包發佈

2.vue的生命週期和鉤子函數

• beforeCreate（建立前）
  data屬性未綁定，DOM沒有生成
  使用場景：加loading界面
• created（建立後）
  data數據屬性綁定，但DOM尚未生成
  使用場景：撤銷loading界面，頁面初始化，實現函數自執行
• beforeMount(載入前)
• mounted（載入後）
  掛載完成
  使用場景：ajax請求，拿回數據，配合路由鉤子作一些事情等
• beforeUpdate（更新前）
• updata（更新後）
• beforeDestroy（銷燬前）
• destroyed(銷燬後)

4.Vue-cli proxyTable 解決開發環境的跨域問題
在項目目錄裏找到config文件夾，而後找到index.js，找到proxyTable選項設置成：

proxyTable: {
  '/api': {//這裏是配置的名字
　　　　target: 'http://xxx', //這個是要代理的url
　　　　 changeOrigin: true, //開啓代理
 　　　　pathRewrite: { '^/api': '/api' }  //這裏重寫路徑/run就代理到對應地址

　　} 
}

設置完成後從新運行npn run dev
請求方式:

get('/api/1/picture?method=upload')

5.v-if與v-show的區別

1.v-if直接不渲染這個DOM元素，而v-show是會渲染DOM元素，只是使用display:none隱藏
2.v-if是惰性的，若是初始條件爲假，則什麼也不作；只有在條件第一次變爲真時纔開始局部渲染 v-show是在任何條件下（首次條件是否爲真）都被渲染，而後被緩存，並且DOM元素保留；
3.使用場景：v-if條件在運行時改變的可能性較少；v-show適合頻繁切換。