Vue的学习笔记

1、目标:

    1、了解组件

    2、vue-resource

    3、axios

    4、路由

    5、vuex

**********************************************************

views:页面。同时也是你的一个组件。路由相关的组件

components:普通组件。

************************

style:

    1、放到style标签当中

    2、通过import引入样式(引入外部样式)

**************************

局部组件:

全局:main.js

import commentOn from "@/components/commentOn";

import takeComment from "@/components/takeComment";

Vue.component("commentOn",commentOn);

Vue.component("takeComment",takeComment);

************************************************************

//index.js 是默认的,可以省略

1、不推荐写法。

    * main.js:

    import components from "./components/index.js"

    components.bind(Vue);

    * compnents/index.js:

    import commentOn from "./commentOn";

    import takeComment from "./takeComment";

    export default {

        bind(Vue){

            Vue.component("commentOn",commentOn);

            Vue.component("takeComment",takeComment);

        }

    }

2、推荐写法:

    * main.js:

    import components from "./components/index.js"

    // 安装指定的插件。

    // *components是一个对象。

    // 会调用components下的install方法,并会将Vue构造器进行传递。

    Vue.use(components);

    * compnents/index.js:

    1、

        import commentOn from "./commentOn";

        import takeComment from "./takeComment";

        export default {

            install(Vue){

                Vue.component("commentOn",commentOn);

                Vue.component("takeComment",takeComment);

                console.log("您好呀")

            }

        }

    2、

        import commentOn from "./commentOn";

        import takeComment from "./takeComment";

        export default {

            comList:{

                commentOn,

                takeComment

            },

            install(Vue){

                for(let key in this.comList){

                    Vue.component(key,this.comList[key]);

                }

            }

        }

    3、

        export default {

            comList:{

                commentOn:()=>import("./commentOn"),

                takeComment:()=>import("./takeComment"),

                // commentOn:function(){ return import("./commentOn")},

                // takeComment:function(){return import("./takeComment")},

            },

            install(Vue){

                for(let key in this.comList){

                    Vue.component(key,this.comList[key]);

                }

            }

        }

*********************************************************************************

Vue.use();// 使用你的插件。use方法传递的是一个对象。该方法会自行调用对象下的install方法。并将VUE构造器传递过去。

          // 并且也可以额外传值。

例:

import components from "./components/index.js"

// 安装指定的插件。

// *components是一个对象。

// 会调用components下的install方法,并会将Vue构造器进行传递。

Vue.use(components,1,2,3);

components:

    {

        install(Vue,a,b,c){

            console.log(a,b,c)// 1,2,3

        }

    }

*********************************vue-resource***********************************************************

1、安装

    cnpm install vue-resource -S

2、main.js引入

    import vueResource from "vue-resource"

3、安装

    Vue.use(vueResource);

4、使用

    post:

    this.$http.post("http://127.0.0.1/weibo",{

                    context:this.$refs.context.value

                }).then(({body})=>{

                    this.$bus.$emit("getweibo");

                })

      get:

    this.$http.get("http://127.0.0.1/weibo",{

                        params:{

                            pageIndex:1

                        }

                    }).then(({body})=>{

                        this.contextList = body.contextList;

                    })

*****************************************bus********************************************************************

1、创建一个文件夹bus,在文件夹内创建一个index.js文件

    import Vue from "vue";

    export default new Vue();

2、在main.js

    import bus from "./bus";

    Vue.prototype.$bus = bus;

**********************Vue.use****************

1、创建一个文件夹bus,在文件夹内创建一个index.js文件

    import MyBus from "vue";

    export default {

        install(Vue){

            Vue.prototype.$bus = new MyBus();

        }

    };

2、在main.js

    import bus from "./bus";

    Vue.use(bus);

**********************************axios**************************************************

1、安装

    cnpm install axios -S;

2、引入

    import axios from "axios";

3、设置

    Vue.prototype.$axios = axios;// 安可瘦死。

*************************************************************

  1、

  #nav a.router-link-exact-active {

        // 精确匹配

        color: #42b983;

    }

    #nav a.router-link-active {

        // 匹配

        color: #42b983;

    }

  2、 active-class :该路由被选中时的样式。

      exact:精确匹配

    Home |

  3、在router->index.js

            linkActiveClass:'is-active',

*************************vuex*****************************************

vuex:vue项目当中数据状态的集中式管理器。可以实现项目当中的数据集中式管理。

    :有利于后期的数据维护,解决组件传值繁琐问题。

    state:存储的是你的数据状态。

    mutations:修改状态(同步操作)

    getters:相当于之前学过的计算属性(computed)

    actions:异步的方法

    modules:模块化

***********************************************************

1、下载

    cnpm install vuex -S;

2、引入

    import vuex from "vuex";

3、安装

    Vue.use(vuex);

4、生成仓库(store):存放你的状态。

    const store = new vuex.Store({

        state,

        mutations,

        getters,

        actions,

        modules

    })

5、将store放置VUe实例中:

    new Vue({

        store

    })

*********************

你可能感兴趣的:(Vue的学习笔记)