使用场景：

1. 多个视图依赖于同一状态（例：菜单导航）

2. 来自不同视图的行为需要变更同一状态（例：评论弹幕）

vuex介绍：

• vue的状态管理模式

• 作用：组件状态集中管理

• 组件状态改变遵循统一的规则

  
  

vue代码风格规范：https://cn.vuejs.org/v2/style-guide/

组件化思想的优势

组件化带来的问题

https://m.imooc.com-->移动端

https://www.imooc.com-->PC端

//=======================================

查看别人的web界面

chrome 调试查看DOM结构

Header，Body里面看js/css引用，搜索相应的js库

查看source、network中的js，使用反编译与断点进行调试

源码 https://github.com/kanlidy/vue-lessons-demo

vue serve demo1.vue-->快速调试该组件

<ul>

    <li v-for="(item,index) in lists"

           @click="choose(index)"

            :class="{active : index == current && current !==' '}"

           :key="index">

        {{item}} 

    </li>

</ul>

<button type="button" @click="add()"></button>

<ul>

    <li v-for="(item,index) in target" :key="index">{{item}}</li>

</ul>

<script>

export default{

    name: "demo1",

    data () {

        return{

            current: '',//用于记录

            lists:[1,2,3,4,5,6,7,8,9]，

            target:[]

        }

    },

    methods: {

        choose (index){

            this.current = index

        },

        add(){

    if(this.current === ' '){ return }//只有选中后，点击‘添加’才会产生列表

      this.target.push(this.lists[this.current])

      this.current = ' '//设置成只有点击数字后才能记录

        }

    }

}

</script>

<style scoped>

li.active{

    background : green;

}

</style>

//==========================

1）创建项目

git clone-->将远程仓库代码下载到本地，默认创建一个hellogit.git文件

git init-->初始化一个 Git 仓库

（2）创建分支，推送分支，合并分支

git status-->查看哪些文件处于什么状态

git branch 或者 git branch -a-->查看分支

touch xx.txt-->创建文件

git add . 或git add xx.txt-->将所有文件待提交

git commit -m "注释"-->注释说明

git push origin master-->推送到远程

git checkout -b xxx--> 创建本地分支 ； git push origin xxx-->推送本地分支到远程

git checkout master-->切换到master分支 ； git merge xxx-->合并创建的本地分支 ；git push origin master-->推送到远程

（3）删除分支、回退版本

git branch -D xxx-->删除创建的本地分支 ；git push origin :xxx-->删除在远程创建的本地分支

git reset --hard head^-->退回上一个版本

git reset --hard xxx-->退回指定的版本

--------------------- 

git clone-->将远程仓库代码下载到本地，默认创建一个hellogit.git文件

git status-->

git add .-->将所有文件待提交

git commit -m "注释"

git push origin master-->上传到master

第一种：vue的chrome扩展插件；

第二种 ：在methods中用console.log，alert()有阻塞行为，debugger；

第三种：在mounted（）{}中绑定window.vue=this;-->window.vue.function()-->方法是methods中的方法

第四种：在cdn方式引入vue时，将vue实例化，设置一个全局变量，即vue实例:var app=new Vue();

store.js中：

Vue.use(Vuex)  //引用组件

export default new Vuex.Store({

state:{//组建状态集中管理

    count :0

},

//=========================

mutations:{//改变Vuex中状态的方法集

    increase （）{

        this.state.count ++

    }

},

//=========================

actions:{

}

})

//==================================

在Info.vue中：

<button @click="add()">添加</button>

引入store文件

import store from '@/store'-->@代表src

export default{

    name: 'Info',

    store,//申明引入的store

    methods: {

        add(){

            store.commit('increase'）

        }

    }

}

当每次点击添加按钮时，调用add（）方法，再提交该方法中“increase”事件，即会使store.js中state的count自增。

//================================================

在About.vue中：

        {{msg}}

import store from '@/store'-->@代表src

export default{

    name: 'about',

    store,//申明引入的store

    data () {

       return {

            msg: store.state.count

        }

    }

}

创建的store.js中写入 Vue.use(Vuex)  //引用组件

在其他组件中引用store文件，并在default使用store

store.commit

views中  ：新建组件

New->Vue Component->命名

<template>模板

<script>代码

<style>样式

//==============================

router.js中：定义组件，导入位置

上面导入:import 大写名字 from './views/大写名字.vue';

{

    path: /小写名字（与views中的一致）'',

    name: 小写名字'',

    component: 大写名字,

}

//===================================

App.vue中：连接到组件

<router-link to="/小写名字">大写名字</router-link>

npm install -g @vue/cli  -->安装vue_cli工具

vue create 项目名-->创建项目

vue ui界面

//==================

Router-->路由组建

Vuex-->状态管理组建

CSS Pre-processors-->预编译组建

v-if="条件表达式"：满足要求，执行该标签中的内容

v-else-if="条件表达式"：当v-if表达式不满足时，执行该标签中的内容

v-esle：当v-else-if表达式不满足时，执行该标签中的内容

//=========================

v-show="表达式" show:{{data中的变量}}--和v-if类似

//=========================

v-for="item in list"--->循环list集合中的值

//=========================

v-bind://的绑定style

等同于

v-bind:

data:{

    styleMsg:{

        color : 'red'

    }

}

//=========================

v-bind:class="{'active' :true}"---作用？？

v-bind:class="['active' ,'add','more',{'another' : true}]"

watch:{//监听器，异步场景

    msg:function(newVal,oldVal){
        方法体//将data：{}中的变量对应的msg的值改变后，触发该方法

    }

}

//====================================

conputed:{//计算属性，数据联动

    msg1:function(){

        方法体//改变data：{}（本实例）中的任意变量的值改变后，都会触发该方法

                    //实例外：先改变变量值，不会触发该方法，再改变本实                            例中的变量值，也会显示实例外的改变后值

    }

}

v-on:click="submit()"-->@click="submit()"

methods:{

    submit:function(){

        方法体；

    }

}，//===========================

v-bind:href="url"-->缩写:href="url"

data:{

    url:'http://www.baidu.com',

}