Vue学习笔记

相关实例demo请访问：https://github.com/CHQfast/Vue-demo 

一.Vue-Router配置

第一步，npm install vue-router  --save-dev 

第二步，src 目录下 新建 router 目录，目录下新建 index.js，

// router/index.js 
importVuefrom 'vue' //引入Vue

import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'

Vue.use(Router) //Vue全局使用Router

export default new Router({
    routes: [ //配置路由，这里是个数组
        { //每一个链接都是一个对象
            path: '/', //链接路径
            name: 'HelloWorld', //路由名称，
            component: HelloWorld //对应的组件模板
        }, {
            path: '/hi',
            name: 'Hi',
            component: Hi
        }
    ]
})

第三步， 在components文件夹下，新建2个组件，分别为HelloWorld.vue和Hi.vue，

第四步， 在App.vue下面，模板中建立导航，

<div id="app">
    <p>导航 ：
        <router-link to="/">首页</router-link> |
        <router-link to="/hi">Hi页面</router-link> |
    </p>
    <router-view class="aaa"></router-view>
</div>

 并注册组件

<script>
import HelloWorld from './components/HelloWorld.vue'
import Hi from './components/Hi.vue'

export default {
    name: 'app',
    components: {
        HelloWorld,
        Hi,
    }
}
</script>

 第五步，最重要的一步，在main.js中引入router，

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

 这样一个简单的路由就启动了...

路由核心用法：

1.路由跳转的方式：

 <router-link to=' '></router-link>    和   this.$router.push({path:' '})

this.$router.push({}) 可传参，也可直接根据name来展示组件

router.push({name:'user',params:{userId:123}})；  // 命名的路由

router.push({path:'register',query:{plan:'private'}})；// 带查询参数，变成 /register?plan=private ，获取this.$route.query.plan

注意： 

const userId = 123

router.push({ name: 'user', params: { userId }})；    // -> /user/123

router.push({ path: `/user/${userId}` }) ；     // -> /user/123

// 这里的 params 不生效（注意这个例子）

router.push({ path: '/user', params: { userId }}) ；   // -> /user 

2.动态路由参数：

首先设置 路由路径：id

path:'/hi/:id',

App.vue中新增导航

<span @click="goto">GoHi</span>

新增methods

methods: {
    goto() {
        this.$router.push('/hi/123')
    }
}

在Hi.vue组件中，增加mounted来显示路由传递的参数

mounted() {
    console.log(this.$route.params.id)
}

 或者还有另一种方法：

 在router/index.js中设置props:true,

{
    path: '/hi/:id',
    props: true,
    name: 'Hi',
    component: Hi
}

 然后在Hi.vue中设置，props,直接可输出this.id

export default {
    name: 'hi',
    props: ['id'],
    data() {
        return {
            msg: 'Hi, I am www'
        }
    },
    mounted() {
        console.log(this.id)
    }
}

 3.子路由的使用：

首先在router/index.js中新建子路由path，再在components文件夹下新建view1.vue组件

{ //每一个链接都是一个对象
    path: '/', //链接路径
    name: 'HelloWorld', //路由名称，
    component: HelloWorld, //对应的组件模板
    children: [{
        path: 'view1',
        name: 'view1',
        component: view1
    }]
}

 因为这个子组件在HelloWorld下面，所以在HelloWorld.vue下面添加导航按钮和显示组件的router-view

<router-link to="/view1">view1页面</router-link>
<router-view></router-view>

 当我们点击首页下面的view1页面按钮时，下面就加载出来了新建的view1.vue组件。

二.父子组件直接的传值

1) 父组件向子组件传值
总结一下：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

 子组件：

<template>
    <div>
        <h2>child子组件部分</h2>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        name: 'child',
        props: ['msg']
    }
</script>
<style scoped>

</style>

父组件：

首先注册显示子组件

<Child :msg="parentMsg"></Child>

注册子组件

components: {
    Child,
},

绑定父组件传递的数据

data() {
    return {
        parentMsg: "hellohhh",
    }
},

2) 子组件向父组件传值

总结一下：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

• 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

首先，子组件添加按钮自定义事件来传值给父组件，

<Button type="warning" @click="sendtoParent">传值给父组件</Button>

 然后用emit抛出传递的参数（第一个参数是监听事件名称，第二个参数的数据）

methods: {
    sendtoParent: function() {
        this.$emit("listenMsg", "this msg from child")
    }
}

 然后在父组件的Child组件上绑定监听事件，

<Child :msg="parentMsg" @listenMsg="showChildMsg"></Child> 

 绑定事件输出

methods: {
    showChildMsg(data) {
        alert(data)
    }
}

ok了~~~ 

三、vuex的使用

 首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :

第一步：npm install vuex --save

然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = { //要设置的全局访问的state对象
    showFooter: true,
    changableNum: 0
    //要设置的初始属性值
};
const store = new Vuex.Store({
    state
});

export default store;

 第三步：在main.js中引入store：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入store

Vue.config.productionTip = false

new Vue({
    router,
    store, //使用store
    render: h => h(App),
}).$mount('#app')

 第四步，我们来定义store里面的一些初始变量：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { //要设置的全局访问的state对象
    showFooter: true,
    changableNum: 0
    //要设置的初始属性值
};
const store = new Vuex.Store({
    state
});

export default store;

 完成以上步骤，

你就可以在任意的组件里面使用this.$store.state.showFooter和this.$store.state.changableNum来获取showItem和changableNum的值了

store中modules的使用：

如果一个项目里面有多个状态需要维护，不同状态当然要分开才能维护清晰:

首先,在store/index.js中，新建2个模块：

import Vue from 'vue';
import Vuex from 'vuex';
import footerStatus from './modules/footerStatus'
import collection from './modules/collection'
Vue.use(Vuex);

const store = new Vuex.Store({
    modules:{
        footerStatus,
        collection
    },
});
 
export default store;

然后在store新建一个modules文件夹，里面新建collectioon.js和footerStatus.js

举例collection.js:

//collection.js

const state={
    collects:[],  //初始化一个colects数组
};
const getters={
  renderCollects(state){ //承载变化的collects
    return state.collects;
  }
};
const mutations={
     pushCollects(state,items){ //如何变化collects,插入items
        state.collects.push(items)
     },
     deleteCollects(state,items){
        state.collects=[]
     }
 };
const actions={
    invokePushItems(context,item){ //触发mutations里面的pushCollects ,传入数据形参item 对应到items
        context.commit('pushCollects',item);
    },
    deleItems(context){
        context.commit('deleteCollects');
    }
};
export default {
     namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名
     state,
     getters,
     mutations,
     actions
}

在需要使用的组件中我们来绑定click事件：

    <span @click="invokePushItems(item)">加入收藏列</span>
    <span @click="deleItems()">清空收藏列</span>

然后，在js中引入模块的方法：

import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入

定义methods方法：

methods:{
    ...mapActions('collection',[ //collection是指modules文件夹下的collection.js
          'invokePushItems'  //collection.js文件中的actions里的方法，在上面的@click中执行并传入实参
      ]),
    ...mapActions('collection',[ 
          'deleItems'
      ])

  },

在定义获取数据方法：

computed:{
    ...mapGetters('collection',{ //用mapGetters来获取collection.js里面的getters
          arrList:'renderCollects'
      })
  }

假设数据为：

data () {
    return {
      item:{
         id:'01',
         productName: '苹果',
         price:'1.6元/斤'
       }
    }
  },

就可以添加了~~~