前端開發一起交流QQ羣：740034288
1、vue基礎知識：
1.1 實例化vue：
方法1：
new Vue({
el: '#app', //html中被替換的的標籤，即掛載到html中#app標籤裏面
components: { App },
template: '<App/>'
})
方法2：
const root=new Vue({
components: { App },
template: '<App/>',
data:{
text:0,
obj:{email:"123"}
}
})
root.$mount("#app"); //html中被替換的的標籤，即掛載到html中#app標籤裏面
實例化vue屬性：
root.text=12; //獲取實例化vue的data的數據，並改變其值，也可用root.$data.text=12一樣。
root.$data; // 實例化vue的data數據組成的對象；
root.$props; // 實例化vue的prop自定義屬性傳值的對象，前提是要先聲明自定義屬性傳值。
root.$el; // 實例化vue在html中#app標籤節點下所有的標籤及內容。
root.$options; //實例化vue裏面傳入的所有屬性及值，以及其實例化默認的屬性及值。注意：通過
root.$options.$data.text給text賦值，需要等到下一次數據更新時才能其作用。
root.$root===root； //當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。
root.$children ; //root組件下的直接子標籤/組件；
root.$parent; //父實例，如果有的話。
root.$slots;
root.$scopedSlots;
root.$refs; //快速的查找到html節點或組件實例，<div ref="div"></div> ,<v-item ref="item"></v-item>
root.$isServer; //在服務端渲染時，才用，不常用
實例vue方法、數據
root.$watch; //監聽數據變化,const unWatch=root.$watch("text",(newText,oldText)=>{
console.log(`${newText}:${oldText}`)
}) 然後調用unWatch()即可註銷watch監聽事件，避免內存溢出，在組件裏面watch:{
text (newText,oldText){
console.log(`${newText}:${oldText}`)
}
} 監聽完自動註銷watch監聽
root.$emit("text",val); //綁定一個自定義事件(函數)名爲text的事件，常用於子組件向父組件傳遞方法
root.$on("text",(val)={ //監聽了這個事件並觸發了，root.$once("text")，表示只監聽觸發一次，如定時器中僅執行一次。
console.log("text事件被觸發了"+val+“是自定義事件傳遞過來的參數”)
})
root.$off("text"); // 如果沒有提供參數，則移除所有的事件監聽器；如果只提供了事件，則移除該事件所有的監聽器；如果同時提供了事件與回調，則只移除這個回調的監聽器。
root.$set(root.obj,"name","Tom")； //爲obj對象新添加屬性name，併爲其賦值Tom,然後obj.name的值就可以直接渲染在
視圖中。
root.$delete(root.obj,"email")； //刪除obj對象的email屬性，並且同步通知到視圖中。
root.$nextTick(()=>{
// 這是DOM渲染完，數據加載完之後執行的函數體，如重新添加了dom標籤，從後臺獲取數據完成之後。
})
實例vue生命週期：在某個時間點，會自動執行的函數，執行順序如下
beforeCreate(){} //new Vue()實例化的時候即創建前後，this.$el在創建生命週期前後（beforeCreate，created）是underfined
created(){}
beforeMount(){} //el:"#app"或root.$mount("#app")即掛載前後的生命週期，如果沒有el:"#app"或root.$mount("#app")則不執行掛載前後的生命週期,this.$el在掛載生命週期前beforeMount是<div id="app"></div>,在掛載生命週期後mounted是替換掉<div id="app"></div>的部分。
mounted(){} //所以常對dom有關的操作在mounted裏面，對數據有關的操作可以在created或者mounted裏面
beforeUpdate(){} //數據更新時執行，如定時器裏data裏面的text+=1時執行數據更新前後的生命週期
updated(){}
activated(){}
deactivated(){}
beforeDestroy(){} //銷燬實例化vue前後執行的生命週期
defstroyed(){}
errorCaptured((h,err)=>{ //捕獲到該組件及其子組件下的所有錯誤,可以阻止子組件錯誤向父組件冒泡傳遞。
return h("div",{},err.stack)
}){}
vue的數據綁定：
<any v-bind:屬性名="表達式"></any>
<any :屬性名="表達式"></any>
<any v-bind:class="{類名:true/false條件表達式}" class="類名"></any>
<any :style="style"></any>
vue的數據計算屬性computed：對於任何複雜邏輯，都應當使用計算屬性。計算屬性只有在它的相關數據變量發生改變時纔會重新求值。這就意味着只要 message 還沒有發生改變，則計算屬性會緩存message的值，多次訪問算屬性會立即返回之前的計算結果，而不必再次執行函數。
computed:{ //計算屬性寫法1：計算數據的改變，常用於數據需要計算後渲染到視圖中。
message(){
return "計算屬性message值改變時，纔會執行該函數"
}
}，
computed:{ //計算屬性寫法2：計算數據的改變，常用於數據需要計算後渲染到視圖中。
message：{
get:function(){}, //獲取計算數據message時執行get()
set:function(){} //修改計算數據message時執行set()
}
}，
methods:{
handle(){
return "方法函數每次重新渲染時無論message值是否改變，都會執行該函數"
}
}
vue的監聽屬性watch： 監聽數據改變前後的值，常用於向後臺發生數據。watch:{ //方法1：該寫法，在初始化時，不會執行，只有數據改變時，纔會執行裏面的函數。
val:function(newVal,oldVal){
console.log(newVal,oldVal)
}
}
watch:{ //方法2：該寫法，在初始化及數據改變時，都會執行裏面的函數。
val:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate:true,
deep:true // 是否深入觀察，即如果val是對象，當不需要深入觀察時，handler只是當val變化時才執行，當需要
深入觀察時，當val裏面的屬性只，或者val對象裏面屬性對象裏面的屬性值...改變時都會觸發handler執行。
}
}
注意：computed和watch裏儘量不要修改原數據值，避免出現無限循環，如data(){return {a:0 }},不要在computed和watch裏面做a+=1之類的，會出現無限循環，computed裏面是通過原數據計算結果並賦值給新的變量，watch裏面監聽數據改變前後的值。vue的指令：
vue的模板語法：{{}}，v-text，v-html，其中{{}}和v-text一樣，不會識別標籤。
注意：以v-開始的指令，其值如name爲js表達式(如js變量)；{{fun()}}仍然可以執行函數方法渲染函數的結果在頁面，但是不推薦，推薦放在計算屬性中。
vue的組件的定義：
1. 局部組件：
const com={
template:` <div></div>`，
data(){
return {}
}
}
Vue.component("CompOne",com) //定義局部組件
<comp-one></comp-one> //調用局部組件
2. 全局組件：
new Vue({
components:{CompOne}, //調用全局、局部組件
template:` <comp-one></comp-one> `, //模板
data(){
return {}
}
})
vue的props屬性的父向子組件傳值：可以是數組或對象，用於接收來自父組件的數據。單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。props接受的父組件的數據可以和data裏面的一樣，用於直接渲染在視圖，用this.props裏面的數據名直接進行計算屬性，在vue的方法，生命週期中調用。但是不能直接修改props裏面的值，可以在data裏面定義一個變量初始化爲props裏面傳遞過來的數據值，然後在直接修改data裏面這個變量的值。
子修改父組件props傳遞過來的值：通過子組件觸發的事件告訴父組件，要修改props傳遞過來的值。
方法1：通過父組件傳遞過來一個方法事件onChange，子組件通過觸發該方法事件，告訴父組件，在父組件中修改propOne的值。
const com={ //子組件
props:{ //父組件傳遞過來的propOne數據
propOne:String，
name:{
type: Number, //傳遞過來的數據類型
required:true, //該數據必須傳遞過來，不然報錯
default:0 //默認值，可以是個對象default(){return},通常和required不同時出現
},
onChange:Function
},
template:` <div>
<span @click="sonHandle">{{propOne}}</span>
<input type="text" ></input>
</div>`，
data(){
return {}
},
methods:{
sonHandle(){
this.onChange(); //子組件點擊事件觸發父組件傳遞過來的onChange事件，在父組件中執行該onChange事件的函數，即修改傳遞給子組件的數據
//或者通過 this.$emit("change"); 子組件自定義change事件，不需要在props接受 父組件傳遞的
onChange:Function，父組件 <comp-one @change="handleChange" :prop-one="prop1"></comp-one>
}
}
}
Vue.component("CompOne",com)
new Vue({ //父組件
template:` <comp-one @on-change="handleChange" :prop-one="prop1"></comp-one> `, //模板
data(){
return {
prop1:"這是要傳遞給子組件的數據"
}
}，
methods:{
handleChange(){
this.prop1="這是子組件觸發了父組件傳遞給子組件的onChange事件執行父組件的handleChange函數，在父組件
修改傳遞給子組件的propOne數據值"
}
}
})
vue的組件的繼承：繼承的時候，需要propsData{}接受父組件傳遞的參數，新定義的data數據會覆蓋原com組件數據，方法週期等會先執行com組件的，再執行compVue裏的。const com={
props:{
propOne:String，
},
template:` <div>
<span >{{propOne}}</span>
<input type="text" ></input>
</div>`，
data(){
return {
text:0
}
},
}
繼承的方法1：
const compVue=Vue.extend(com);
new compVue({
el:"#root",
propsData:{
propOne:'這是繼承com組件的新compVue組件'
}
})
繼承的方法2：
const compVue2={
extends:com,
data(){return{}}
}
vue的props屬性的子向父組件傳值：
在父組件調用子組件時<son @自定義事件="自定義事件處理函數"></son>
在父組件中定義一個methods方法，處理自定義事件處理函數接受到的子組件的數據
在子組件中定義一個方法觸發this.$emit("自定義事件名",要傳遞的數據)
2、vuex：
簡化版vuex的應用：
步驟1：在項目文件目錄命令行下npm i vuex -S;
步驟2：新建store文件夾->store.js文件
步驟3：在store.js裏面：
步驟4：在vue的入口文件，如main.js裏面：全局store
步驟5：在.vue組件文件中通過this.$store獲取全局store對象，即可使用store其屬性方法API；
模塊化vuex的應用：
步驟1：在項目文件目錄命令行下npm i vuex -S;
步驟2：新建store文件夾->store.js文件