05_01.vue-plugin

2017-11-17  本文已影响0人  Robyn_Luo

axios

入门

get请求
axios.get('http://vue.studyit.io/api/getprodlist')   // 得到一个Promise实例,
.then((rep) => console.log(rep.data))                   // 得到response对象, 通过data属性拿数据
.catch((err) => console.log(err))                           // 得到错误描述对象
post请求
axios.get('http://vue.studyit.io/api/getprodlist')   // 得到一个Promise实例, 通过then或catch添加成功失败回调
.then((rep) => console.log(rep.data))                   // 得到response对象, 通过data属性拿数据
.catch((err) => console.log(err))                           // 得到错误描述对象

语法

axios(config)

// 类似与jQ的ajax方法
axios({
    url: '',
    method: 'post',
    data: {}
}).then()

axios.method()

// 类似与jQ的get、post方法
axios.get(url, config)
axios.post(url, data, config)
axios.delete(url, config)
axios.head(url, config)
axios.put(url, data, config)
axios.patch(url, data, config)

特点

使用

get请求

let config = {
    params: { pageindex: 1 }
};
axios.get('/news/list', config)
    .then(rep => {
        console.log(rep.data);
    });

post请求

let data = {
    user_name: 'self',
    user_pwd: 111111
};
axios.post('/login', data)
    .then(rep => {
        console.log(rep.obj);
    });

默认配置

let config = {
  url:'/user',
  method:'get' //default
  baseURL:'https://some-domain.com/api/',
  transformRequest:[function(data){}],
  headers: {'X-Requested-With':'XMLHttpRequest'},
  params: {
    ID:12345
  },
  ...
};
axios.defaults = Object.as

vue-router

简介

作用

基本原理

基本使用

<div id="app">
    <header></header>
    <!-- 占位标签，路由变化时会动态切换组件，作用类似与component标签 -->
    <router-view></router-view>
    <footer></footer>
</div>

// 全局登陆组件
let LoginComponent = {
    template: '<h4>登陆</h4>'
};
// 全局注册组件
let RegisterComponent = {
    template: '<h4>注册</h4>'
});
// 实例
var vm = new Vue({
    el: '#app',
    // 路由配置
    router: new VueRouter({
        routes: [
            { path: '/login', component: LoginComponent },
            { path: '/register', component: RegisterComponent }
        ]
    })
});

路由实例与路由对象

说明

$route常用属性

使用路由参数

// 全局详情组件
var comDetails = Vue.extend({
    template: '<article>详情</article>',
    created: function() {
        let id = this.$route.params.id;
        console.log(this.$route, id);
    }
});
// 实例
var vm = new Vue({
    el: '#app',
    // 路由配置
    router: new VueRouter({
        routes: [
            { path: '/details/:id', component: 'v-details' }
        ]
    })
});

跳转页面

标签跳转

示例

<div id="app">
    <header>
        <router-link to="/login?a=1">登陆-路径</router-link>
        <router-link :to="{ name: 'go', query: {b: 2} }">登陆-别名</router-link>
    </header>
    <!-- 占位标签，路由变化时会动态切换组件，作用类似与component标签 -->
    <router-view></router-view>
    <footer></footer>
</div>

// 全局登陆组件
Vue.component('v-login', {
    template: '<h4>登陆</h4>'
});
// 实例
var vm = new Vue({
    el: '#app',
    // 路由配置
    router: new VueRouter({
        routes: [
            { name: 'go', path: '/login', component: 'v-login' }
        ]
    })
});

js跳转

示例

// 实例
var vm = new Vue({
    el: '#app',
    method: {
        to: function(path) {
            this.$router.push(path);
        }
    },
    // 路由配置
    router: new VueRouter({
        routes: [
            { path: '/login', component: 'v-login' },
            { name: 'details', path: '/details/:id', component: 'v-details' },
        ]
    })
});
vm.$router.push('/login');
vm.$router.push({path:'/login', query:{aa:11}});
vm.$router.push({name:'details', params:{id:1}, query:{aa:11}});

重定向

new VueRouter({
    routes: [
        // 访问根路径时重定向到index
        { path: '/', redirect: '/index' }
        // 也可以使用名字进行重定向
        { path: '/', redirect: { name: 'i' } },
        { path: '/index', component: IndexComt },
    ]
})

监听路由变化

new Vue({
    el: '#app',
    watch: {
        $route: function(to, from) {
            console.log(`${from.path}跳转到了${to.path}`);
        }
    },
    // 路由配置
    router: router
});

嵌套路由

说明

示例

let Compt1 = Vue.extend({
    template: '<p>子组件1</p>'
});
let Compt2 = Vue.extend({
    template: '<p>子组件2</p>'
});
let ComptContent = Vue.extend({
    template: `
    <div>
        <p>父级组件</p>
        <router-view></router-view>
    </div>`
});
// 路由配置
let router = new VueRouter({
    routes: [
        { path: '/page', component: ComptContent,
          children: [
            { path: 'one', component: Compt1 },
            { path: 'two', component: Compt2 }
          ]
        }
    ]
});
// 实例
var vm = new Vue({
    el: '#app',
    router: router
});

vuex

简介

基本使用

需求

[图片上传失败...(image-850277-1510905953832)]

实现

<div id="app">
    <div>
        <span>最大总数：{{ maxTotal }}</span>
        <span>当前总数：{{ total }}</span>
    </div>
    <v-numbox></v-numbox>
    <v-numbox></v-numbox>
</div>

// 数字框组件
Vue.component('v-numbox', {
    template:
        `<div>
            <button @click="sub">-</button>
            <input v-model="num"/>
            <button @click="add">+</button>
        </div>`,
    data() {
        return {
            num: 0
        };
    },
    methods: {
        add() {
            var state = this.$store.state;
            if(state.total < state.maxTotal) {
                this.num++;
                this.$store.commit('addTotal');
            }
        },
        sub() {
            if(this.num > 0) {
                this.num--;
                this.$store.commit('subTotal');
            }
        }
    }
});

// 共享数据
var store = new Vuex.Store({

    // 数据定义
    state: {
        maxTotal: 10,
        total: 0
    },

    // 修改数据的方法
    mutations: {
        addTotal(state) {
            state.total++;
        },
        subTotal(state) {
            state.total--;
        }
    }

});

// 实例
var vm = new vue({
    el: '#app',
    store,
    computed: {
        maxTotal() {
            return this.$store.state.maxTotal;
        },
        total() {
            return this.$store.state.total;
        }
    }
});

进阶

配置项

其他方法

上一篇 下一篇

猜你喜欢

热点阅读