vue总结（包括：指令的使用，axios）

一，axios的用法

1，配置：

*引入axios

*与APP.vue建立一个http-common.js文件（使用axios模块，调试端口）用来给其他模块复用

2，使用：

*在其他组件文件中导入http组件

var params = new URLSearchParams();
AXIOS.get('community/MakerCommunityParticulars', {
    params:{
        makerCommunityId:this.clubId
    }
}).then(response => {
    console.log(response);
    this.allMsg=response.data;
}).catch(e => {
    this.errors.push(e)
});

*根据返回的response来动态渲染不同的值

二，最近用到的vue知识点

1，路由传参

*路由文件中

{
    path:'/material/detail/:metId',
    name:'meterialdetail',
    component:materialdetail
}

*标签跳转

<router-link :to="{name: 'communitydetail',params: {metId: id}}"></router-link>

*获取路由传过来的id

clubId:this.$route.params.metId

2，用v-for绑定一组click元素（实现点哪个元素，哪个元素就会出现一个新class名）

*<span v-for="item,index in items" v-on:click="clikMe(index)" v-bind:class="{on:index==nub}"></span>

*clickMe(index){ console.log(index);再把nub变为下标 }

*总结：这里实现了类似jquery中on事件的效果（$(".on").on("click",fn(index){ cl(index)} )）

3，保存一个常用的变量，对接上数据库给的图片名 data--》fileURL:"http://xxxxx"

4，总结：如果说jq是一个一切围绕'找dom改dom'的框架，那么vue就是一个'绑定数据,修改数据'（然后vue自动重新渲染页面）的框架

vue总结（包括：指令的使用，axios）

猜你喜欢