vue学习笔记（视频学习）

一.组件

1.目录结构：

在components中写组件

2.引入、注册

3.使用

4.CSS局部作用域

在本组件内有效

5.其他

在组件内还可挂载其他组件

6.父组件给子组件传值、方法、整个实例

父组件：

子组件：

验证父组件传过来的值是否是某种类型的数据

7.父组件主动获取子组件的数据和方法

8.子组件主动获取父组件的数据和方法

9.非父子组件传值

目录结构：

VueEvent.js：

使用：

Home组件：

News组件：

二.模块化

1.目录结构

2.模块化

3.使用

四.路由

1.安装 

    npm install vue-router  --save   / cnpm install vue-router  --save

2、引入并 Vue.use(VueRouter)   (main.js)

   import VueRouter from 'vue-router'

    Vue.use(VueRouter)

3.具体步骤

注意：默认跳转路由，以及名字的用法，其中有用到ES6的属性简写，最好还是按照上面的写，不然需自己写对应的值。

4.使用

注意：<router-view>为路由出口，路径对的上就会跳转显示相应的组件

五.动态路由、GET传值

路由配置：

动态路由：

获取动态路由传值：

GET传值:

获取GET传递的值

六.路由的编程式导航和hash模式、history模式

hash模式改为history模式（路径好看一些）：

注意：后端需要相应配置

七.路由的嵌套

配置：

父路由里配置子路由显示的地方

八.路由模块化

1.目录

创建router和router.js

2.router.js

3.main.js中引入

九.vuex

1. 概念

Vuex 是一个专为 Vue.js 设计的状态管理模式

vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时，会需要：

多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。
来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱，通常会导致无法维护的代码。来自官网的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。
 

2.

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

    1.vuex解决了组件之间同一状态的共享问题  （解决了不同组件之间的数据共享）

    2.组件里面数据的持久化。                

小项目不部建议用vuex   

3.目录结构

4.vuex的使用

    1、src目录下面新建一个vuex的文件夹

    2、vuex 文件夹里面新建一个store.js

    3、安装vuex  

        cnpm install vuex --save

   4、在刚才创建的store.js引入vue  引入vuex 并且use vuex

        import Vue from 'vue'
        import Vuex from 'vuex'

        Vue.use(Vuex)

        

    5、定义数据

            /*1.state在vuex中用于存储数据*/
            var state={

                count:1
            }
    
 
     6、定义方法     mutations里面放的是方法，方法主要用于改变state里面的数据

        var mutations={

            incCount(){

            ++state.count;
            }
        }

7、优点类似计算属性   ，  改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 

        var getters= {
           
            computedCount: (state) => {
            return state.count*2
            }
        }

    8、 Action 

        Action 类似于 mutation，不同在于：

        Action 提交的是 mutation，而不是直接变更状态。
        Action 可以包含任意异步操作。
       
        var actions= {
            incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/
            context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/
            }
        }

暴露

        const store = new Vuex.Store({
            state,
            mutations,
            getters,
            actions
        })
        export default store;

5.组建里面使用vuex：

        1.引入 store

             import store from '../vuex/store.js';

        2、注册

             export default{
                data(){
                    return {               
                       msg:'我是一个home组件',
                    value1: null,
                     
                    }
                },
                store,
                methods:{
                    incCount(){
                      
                    this.$store.commit('incCount');   /*触发 state里面的数据*/
                    }

                }
                }
        3、获取state里面的数据  

            this.$store.state.数据

        4、触发 mutations 改变 state里面的数据
            
            this.$store.commit('incCount');

        5、触发 actions里面的方法
            
            this.$store.dispatch('incCount');

        6、{{this.$store.getters.computedCount}}  获取 getters里面方法返回的的数据