數據請求

Vue-resource請求

在Vue2.0之后已經被舍棄

2. fetch請求

因為傳統 Ajax （指 XMLHttpRequest）存在一些令人頭疼的問題：配置和調用方式非常混亂，而且基于事件的異步模型寫起來也沒有現代的 Promise，generator/yield，async/await 友好。而Fetch 的出現就是為了解決 XHR 存在的問題。

1 //get 2 fetch("**?a=1&b=2").then(res=>res.json()).then(res=>{console.log(res)}) 3 fetch("**").then(res=>res.text()).then(res=>{console.log(res)})4 //post 5 fetch("**",{ 6 method:'post', //必須指明post請求方式，默認是get 7 headers: { 8 "Content‐Type": "application/x‐www‐form‐urlencoded" 9 }, 10 body: "name=zhangsan&age=100" 11 }).then(res=>res.json()).then(res=>{console.log(res)});

注意：因為fetch請求的數據是一個狀態，所以想要調取數據需要在第二個.then之后才能拿到數據

3.axios請求

// get axios.get("json/test.json?name=zhangsan&age=10").then(res=>{// res.data 才是真正的后端數據console.log(res.data.data.films)this.datalist = res.data.data.films })//post axios.post("json/test.json",{name:"zhangsan",age:100 }).then(res=>{console.log(res.data) })

---

組件使用

(1)組件化

模塊化是將頁面中的整個完整的功能模塊劃分 優點：代碼復用，便于維護

(2)組件

組件是可復用的 Vue 實例。組件之間可以相互嵌套，最外層只能有一個根。

組件分為：全局組件、局部組件

全局組件在任意的實例，所有父級組件都能使用，局部組件只能在創建自己的父級組件或者自己的實例中使用。

全局組件：

Vue.component('hello',{template:"<h1>hello</h1>" }) 組件通過template來確定自己的模板,template里的模板必須有根節點，標簽必須閉合組件的屬性掛載通過：data方法來返回一個對象作為組件的屬性，這樣做的目的是為了每一個組件實例都擁有獨立的data屬性

局部組件：

components:{'hello':{template:"<h1>asdasdasdasdasdas</h1>"}}

全局組件中可以嵌套局部組件：

<div id="app"><fater/> </div>new Vue({el:"#app",components:{father:{template:'<div>father組件</div>',components:{son:{template:"<div>son組件</div>"}}}} })

(3)過濾器

filter

全局過濾器：filter

Vue.filter(name,handler) //name 過濾器名稱 //handler 過濾器函數//例子： <p>{{msg | firstUpper(3,2)}}</p> Vue.filter('firstUpper',function (value,num=1,num2) {return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase() })

局部過濾器：filters

filters:{firstUpper:function (value,num=1,num2) {return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()}}

(4)虛擬dom

正常的DOM操作會消耗很多性能，Vue提供了虛擬dom方案。 虛擬DOM的核心思想是：對復雜的DOM結構，提供一種方便的工具，保證最小化的DOM操作，來提高執行效率。

虛擬DOM的Diff算法:

當DOM狀態發生改變時，虛擬DOM會進行Diff運算，會進行同層級進行比較前后兩棵虛擬DOM樹的節點。這就需要每一個節點需要一個獨立的key來進行對比，提高效率。

(5)組件之間的通信：因為組件之間的數據，方法是沒辦法共享的。 i.父子通信：

（1）Props

//父組件引用子組件，給子組件發送數據<bbb money="2"></bbb>//子組件需要接受 'bbb':{props:['money'] }

單向數據流：Prop只是單向綁定，只能父組件屬性變化傳遞給子組件，所以你不能都在子組件中更變prop，會報錯。

我們可已對prop傳入的數據進行驗證

props:{//類型驗證:str:String,strs:[String,Number],//必傳驗證num:{type:Number,required:true} } //當父組件傳遞數據給子組件的時候，子組件不接收，這個數據就會掛載在子組件的模板的根節點上

slot插槽：（1）匿名插槽

//父組件 <div id="app"><hello><div>聯通卡</div><div>移動卡</div></hello> </div> //子組件 <template id="hello"><div><slot></slot> //在哪寫就以為在哪插入</div> </template>

（2）具名插槽

//父組件 <div id="app"><hello><div slot="a">聯通卡</div><div slot="b">移動卡</div></hello> </div> //子組件 <template id="hello"><div><slot name="a"></slot><slot name="b"></slot></div> </template>

（2）ref

通過this.$ref. 可以實現數據的傳輸

（3）關系鏈

this.$parent.xxx ($parent,$children,$root),其中[]中的下標是從第一個子組件開始計算，其他子節點不算。

缺點：太亂了 this.$root.$children[3].$children[4]....

ii.子父通信：

（1）$emit

父組件需要聲明一條數據，自己用，需要提供一個更自身數據的方法，父組件在調用子組件的時候，需要通過自定義事件將更改自身數據的函數傳遞給子組件，再用this.$emit(,)觸發自定義事件通過父組件自己修改自己數據

（2）$ref

iii.兄弟通信：

采用關系鏈和ref鏈去使用或者用event bus事件總線，解決兄弟之間通信問題。

(6)transition過渡

用transition標簽包裹需要過渡的的元素，多個元素要有不同key值，transition會有一個name屬性，有兩種過渡模式： in-out: 新元素先進行過渡，完成之后當前元素過渡離開。 out-in: 當前元素先進行過渡，完成之后新元素過渡進入，然后再CSS中添加過渡樣式：

name屬性值-enter：定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

name屬性值-enter-active：定義過渡的狀態。在元素整個過渡過程中作用，在元素被插入時生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

name屬性值-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀后生效 ，在 transition/animation 完成之后移除。

name屬性值-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

name屬性值-leave-active：定義過渡的狀態。在元素整個過渡過程中作用，在離開過渡被觸發后立即生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

name屬性值-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀后生效 ，在 transition/animation 完成之后移除。

總結

以上是生活随笔為你收集整理的vue 只在父级容器移动_Vue易遗忘的基础复习（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。