axios簡單使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/axios.min.js"></script> <script src="js/vue.js"></script> </head> <style> .btn{ height: 50px; width: 60px; text-align: center; } </style> <body> <div id="app"> <button @click="clickHardler" class="btn">提交</button> </div> </body><script>
let vm = new Vue({
el:"#app",
data(){
return{} }, methods:{ clickHardler(){ axios.get('http://wthrcdn.etouch.cn/weather_mini?city="北京"').then(function(res){ console.log(res) }) } }
})
</script>
</html>
組件的簡單應用
插入一個組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組件</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="app"> <App></App></div>
</body>
<script>
//聲明組件\聲子,也是局部組件
let App = {
data(){
return{
msg:"hello world",
}
},
template:<div> <h1>app組件！！！</h1> </div>
};let vm = new Vue({ el:"#app", data(){ return{} }, //掛載組件 components:{ //App:App, //鍵是傳輸到前端頁面上的，值是組件名，鍵值一樣，也一個就行 App, } })
</script>
</html>
在組件中寫子組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組件</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> </head> <style> .header{ width: 1200px; height: 100%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; position: relative; } </style> <body> <div id="app"> <App></App></div>
</body>
<script>
//在組件中寫子組件，的方式
//1先聲明子組件
let vHeader = {
data(){
return{}
},
template:<div class="header"> <h1 style="color:red; text-align: center">頭部區域</h1> </div>
};//聲明組件\聲子,也是局部組件 let App = { data(){ return{ msg:"hello world", } }, //子組件引入父組件的方式是，將掛載好的組件，以標簽的形式引入 template:` <div> <vHeader></vHeader> <h1>app組件！！！</h1></div>`,
//2在父組件的template中掛載組件
components: {
vHeader, //鍵是傳到前端頁面的，值是子組件的變量名
//如果鍵值一樣，寫一個也可以
}
};let vm = new Vue({ el:"#app", data(){ return{} }, //掛載組件 components:{ //App:App, //鍵是傳輸到前端頁面上的，值是組件名，鍵值一樣，也一個就行 App, } })
</script>
</html>
全局組件的使用
Xxoo是全局組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組件</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> </head> <style> .header{ width: 1200px; height: 100%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; position: relative; } </style> <body> <div id="app"> <App></App></div>
</body>
<script>
//定義全局組件的方式不一樣
Vue.component('Xxoo',{
data(){
return{}
},
template:<div class="ss"> <h1 style="color:yellow;">全局xxoo區域</h1> </div>
});//在組件中寫子組件，的方式 //1先聲明子組件 let vHeader = { data(){ return{} }, //全局組件使用時，不用掛載直接可以直接以標簽的方式使用 template:` <div class="header"> <Xxoo></Xxoo> <h1 style="color:red; text-align: center">頭部區域</h1></div>`
};//聲明組件\聲子,也是局部組件 let App = { data(){ return{ msg:"hello world", } }, //子組件引入父組件的方式是，將掛載好的組件，以標簽的形式引入 template:` <div> <Xxoo></Xxoo> <vHeader></vHeader> <h1>app組件！！！</h1></div>`,
//2在父組件的template中掛載組件
components: {
vHeader, //鍵是傳到前端頁面的，值是子組件的變量名
//如果鍵值一樣，寫一個也可以
}
};let vm = new Vue({ el:"#app", data(){ return{} }, //掛載組件 components:{ //App:App, //鍵是傳輸到前端頁面上的，值是組件名，鍵值一樣，也一個就行 App, } })
</script>
</html>
組件傳值
父傳子組件
靜態傳參和動態傳傳參的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="app"> <App></App></div>
</body>
<script>
//聲明子組件
let vHeader = {
data(){
return{}
},
template:<div class="header"> <h1 style="color:red;">子組件，父組件數據{{xx}}通過props屬性來接收</h1> </div>,
props:['xx']}; //聲明父組件 let App = { data(){ return{ msg:'hello app組件', num:100, } }, //<vHeader xx=200></vHeader> 靜態傳參的方式 //<vHeader :xx=num></vHeader>動態傳參的方式 //<vHeader v-bind:xx=num></vHeader> 上面動態傳參的方式也就是這個v-bind綁定 template:` <div> <vHeader v-bind:xx=num></vHeader> <h1>app組件</h1></div>`,
//掛在子組件vHeader
components: {
vHeader,
}
};let vm = new Vue({ el:"#app", data(){ return{} }, //掛載組件 components:{ App, } })</script>
</html>
組件傳值子傳父
子組件vHeader通過this.$emit("父組件使用子組件的自定義事件名稱"，子組件中的參數)，將參數傳給組件
組件在通過事件函數，將子組件數據賦值給組件中的空屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="app"> <App></App> </div></body>
<script>
//1 定義子組件vHeader
let vHeader = {
data(){
return{
sonxx:80,
}
},
template:<div class="header"> <h1 style="color:red">頭部區域</h1> </div>,
created(){
this.$emit('father',this.sonxx); //father是父組件使用子組件時的自定義事件名稱，
}
};//1 定義組件 let App = { data(){ return{ msg:"hello app子組件", num:100, sonnum:"", } }, template:` <div> <vHeader @father="transfer_parameters"></vHeader> <h1>app組件</h1> <hr> <h2>{{sonnum}}</h2></div>`,
//2 掛載自組件vHeader
components:{
vHeader,
},
//第二步，寫自定義事件<vHeader @father="transfer_parameters"></vHeader>
methods:{
transfer_parameters(val){
this.sonnum = val;
}
}
};let vm = new Vue({ el:"#app", data(){ return{} }, components:{ //掛載組件 App, } })
</script>
</html>
平行組件傳值(全局組件傳值)
平行組件中傳值，通過定義全局變量bus
定義方式：let bus = new Vue()
在傳值的組建中定義事件，通過點擊事件，將值賦值給bus
平行組件取值時，通過鈎子created(){
bus.$on(“bus中存放的變量名”，(存放的變量))
}
在通過變量賦值到平行組件的屬性中去
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局組件傳值</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="app"></div>
</body>
<script>
//平行組件中傳值需要通過定義全局變量傳，我們俗稱公交車，變量bus
//平行組件傳值，bus公交車
//1 創建公交車
let bus = new Vue();//定義全局組件1 Vue.component("T1",{ data(){ return{ t1_num:100, } }, template:` <div> <h1>T1組件：{{t1_num}}</h1> <button @click="transfer_parameters"></button></div>`,
methods:{
transfer_parameters() {
bus.$emit("t1_data",this.t1_num)
}
}
});//定義全局組件2 Vue.component("T2",{ data(){ return{ t2_num:200, } }, template:` <div> <h1>T2組件：{{t2_num}}</h1></div>`,
created(){
bus.$on('t1_data',(val) =>{
this.t2_num = val;
})
}
});let vm = new Vue({ el:"#app", data(){ return{ } }, template:` <div> <T1></T1> <T2></T2></div>`
})
</script>
</html>