添加小程式，兌換各種視訊教程/資料資源。
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的指令：
- v-text ：目前标簽下的文本内容，和{{}}功能一樣。
- v-html ：目前标簽下的html内容。能識别字元串裡面的标簽。
- v-show ：是否顯示目前标簽，即display:none/block;
- v-if ： 是否挂載目前标簽，即動态增删标簽節點。
- v-else
- v-else-if
- v-for ：周遊循環對象、數組，渲染在視圖。
- v-on ：給目前标簽綁定事件。
- v-bind ：給目前标簽綁定屬性。:value="1",與value="1",後者1是字元串，前者1是數字。
- v-model ：在input、select、textarea裡面雙向綁定資料，與value可以用于單選多選框中。
- <input v-model="message" >
- <textarea v-model="message" ></textarea>
-
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">data: { checkedNames: [] } -
<input type="radio" id="one" value="One" v-model="picked"> <input type="radio" id="two" value="Two" v-model="picked">data: { picked: '' } -
<select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select>data: { selected: '' //selected:[] } -
<!-- 當選中時，`picked` 為字元串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 為 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 當選中第一個選項時，`selected` 為字元串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select> -
在預設情況下，v-model 在每次 input 事件觸發後将輸入框的值與資料進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy修飾符，進而轉變為使用 change事件進行同步：<!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="msg" >在 type="number"時，HTML 輸入元素的值也總會傳回字元串 如果想自動将使用者的輸入值轉為數值類<input v-model.number="age" type="number">如果要自動過濾使用者輸入的首尾空白字元<input v-model.trim="msg"> - v-once ：該标簽隻渲染一次，後面重新渲染會跳過該标簽。
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檔案