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>