1. Vue 項目初步總結（在項目中遇到的問題以及解決辦法）
注意點：建議不要使用ESLint 後面選No 就ok 大神跳過此處，否則在項目中只要編碼格式有問題就會一直撥錯！
1、推薦使用Visual Studio Code工具打開testproject文件夾即可進行開發。
（1）（打開終端快捷鍵 control+~）在終端裡面輸入npm install命令安裝依賴包， npm install 執行可以進行vue已經vue的插件安裝，在第三步的時 候，已經初始化了項目，並且在 package.json 裡面已經有相關配置，所以在這里可以直接安裝；
（2）終端執行命令npm run dev 運行，然後覽器輸入localhost://8080即可看到vue初始界面
補充：使用vue 框架時盡可能的不要使用jq，但是有些地方確實需要使用jq的話下面是在vue中引入jq的方卜飢法
1：首先安裝jquery
npm install jquery --save
2：在webpack.base.conf.js里加入
var webpack = require("webpack")
3：在mole.exports的最後加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
4：在main.js中引入
import $ from 'jquery'
5.最後 npm run dev就可以了
首先給圖片地址綁定變數
在script中設置變數
//方法1.直接將圖片引入為模塊
require imgUrl from "../assets/test.png"
//方法2.將imgUrl放在數據里
data(){
return {
imgUrl:require("../assets/test.png")
}
}
//方法3.在生命周期函數中設置
data(){
return {
imgUrl:""
}
}
created(){
this.imgUrl = require("@/"+urlTemp)
}
傳送門：https://www.cnblogs.com/aimiss/p/7396986.html
傳送門：https://www.json.cn/
基於 Promise 的 HTTP 請型謹返求客戶端，可同時在瀏覽器和 node.js 中使用
在瀏覽器中發送 XMLHttpRequests 請求
在 node.js 中發送 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
自動轉換 JSON 數據
客戶端支持保護安全免受 XSRF 攻擊
使用 bower:
$ bowerinstallaxios
使用 npm:
$ npminstallaxios
例子
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
傳送門：https://www.jianshu.com/p/e36956dc78b8；
一、污染是如何產生的？
得益於 Vue-loader，在 Vue 中可以使用類似於 Web Component 的組件化寫法, ，在大多數情況下，我們希望組件間定義的樣式是相互隔晌猛離的，在 Weex 當中的確如此，組件天生隔離，可是在 Vue 當中，運行的載體還是瀏覽器，所有的樣式類還是會通過 style 標簽插入頭部，影響全局，交叉污染
二、增加 Scoped 標識
依然是 Vue-loader，通過為組件中的 style 標簽增加一個 scoped 標識，Vue-loader 在編譯的過程中會為組件每一個元素節點增加 scopeId 作為屬性，同時為所有的樣式類加上屬性選擇器 scopeId，從而達到隔離的效果。
傳送門：https://www.jb51.net/article/122535.htm
假如，我們在A組建中聲明了一個定時器進行倒計時此時 我們在定時器中一直列印時間戳，此時我們通過路由跳轉到下一個組件頁面，按照正常理論來說，A組件在跳轉後整個組件就會被銷毀，到達B組件時A組件已經沒有了。
但是在我們有定時器的情況下 此時跳轉過後 定時器依然會存在。所以我們要在頁面銷毀時候將當前頁面的定時器clear掉。
格式轉換
伺服器給的格式是 2016-6-16 10:50:00 正則替換成 2016/6/16 10:50:00 即可；
var time = '2016-6-16 10:50:00'
var times = time.replace(/-/g,"/"); //2016/6/16 10:50:00
完美解決。
原因：因為當我們切出到任務管理器後台時，此時在客戶端中的瀏覽器裡面，瀏覽器就會終止定時器因為消耗性能，當我們返回的時候此時倒計時才會恢復正常。
解決：h5有一個監聽瀏覽器頁面是否隱藏的事件 visibilitychange 兩種狀態 hidden和visity hidden時候頁面切出此時我們要將定時器銷毀，visity時候再次恢復定時器。
解決 this.$router.push(0)
原因：因為低版本安卓不支持es6
（1）安裝依賴包
> cnpm install --save-dev babel-polyfill 或者 > npm install --save-dev babel-polyfill
（2）webpack配置修改
/* 添加 babel-polyfill */
entry: {
app: ["babel-polyfill", "./src/main.js"]
},
但是：我的項目上面的操作都進行了，也就是對es6進行了轉化但是失敗了。所以我就白有關es6的我寫的東西都改掉了。結果就好了。
傳送門：https://blog.csdn.net/qq_16559905/article/details/60755174
總結：初入前端，繼續踩坑。
2. Vue基本用法
Vue:漸進式javascript框架
聲明式渲染-->組件系統-->客戶端路由-->集中狀態管理-->項目構建
Vue的基本使用
Vue的兩種掛載方式:
模板語法:
1.插值表達式
存在閃動問題:快速刷新瀏覽器時,有時會氏橡顯示{{xxx}}內容,然後替換為要顯示的值.解決的辦法-->指令(先隱藏,替換好值之後再顯示)
2.指令(指令的本身就是自定義屬性)
以v-開頭 例如v-cloak
html:
js
效果:
使用v-cloak
html:
css:
效果:
在簡單項目中，使用 v-cloak 指令是解決屏幕閃動的好方法。但在大型、工程化的項目中（webpack、vue-router）只有一個空的 div 元素，元素中的內容是通過路由掛載來實現的，這時我們就不需要用到 v-cloak 指令咯。
雙向數據綁定:v-model
2.MVVM私享
M(model)
V(view)
VM(view-model)
mvc,mvp和mvvm的區別:
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
3.事件綁定
事件冒泡和事件捕獲
3.1v-on指令
示例:
效果:
3.2事件函數的調用方式
html:
js
3.3事件函數參數傳遞
普通參數和事件對象
3.4事件修飾符
.stop 是阻止冒泡行為,不讓當前元素的事件繼續往外觸發,如阻止點擊div內部事件,觸發div事件
.prevent 是阻止事件本身行為,如阻止超鏈接的點擊跳轉,form表單的點擊提交
.self 是只有是自己觸發的自己才會執行,如果接受到內部羨模的冒泡事件傳遞信號觸發,會忽略兄核緩掉這個信號
.capture 是改變js默認的事件機制,默認是冒泡,capture功能是將冒泡改為傾聽模式
.once 是將事件設置為只執行一次,如 .click.prevent.once 代表只阻止事件的默認行為一次,當第二次觸發的時候事件本身的行為會執行
.passive 滾動事件的默認行為 (即滾動行為) 將會立即觸發，而不會等待 onScroll 完成。這個 .passive 修飾符尤其能夠提升移動端的性能。
html:
js:
e.prevent等同於
event.preventDefault()
3.5按鍵修飾符
在Vue中可以通過 config.keyCodes 自定義按鍵修飾符別名
示例:Vue.config.keyCodes.aaa = 65;
自定義按鍵:
4.屬性綁定
v-bind指令:被用來響應地更新 HTML 屬性
html:
js:
效果:
5.v-model的實現原理分析
①
等價於
②
第一種實現只是後面兩種寫法的語法糖.
當在input元素中使用v-model實現雙數據綁定，其實就是在輸入的時候觸發元素的input事件，通過這個語法糖，也能夠實現父子組件數據的雙向綁定.
父組件:
子組件:
6.樣式綁定v-bind:class
1️⃣class 與 style 是 HTML 元素的屬性，用於設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。
v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字元串之外，還可以是對象或數組。
①動態切換多個class
html
css
js
效果:
②樣式綁定到對象
③數組語法:
默認class會被保留合並
2️⃣style
三元表達式:
7.分支循環結構
7.1
v-show與v-if的區別:
v-show:
v-if:
1.原理
2.應用場景
7.2 循環結構
為什麼需要獨一無二的key的簡單示例:
效果:
點擊查看更多:
v-for:需要key的原因:
v-for遍歷對象