store.js中引入了vue和vuex；然后Vue.use(Vuex)

state中记录的是状态；

mutations是唯一可以改变集中状态的方法集的定义；

使用实例：

在传递状态的视图组件中import store from '@/store';//@符号代表src目录

传递过去的状态名称在state中定义；在mutations中定义一个方法，对状态进行改变；在出发状态改变的视图组件中使用store.commit('mutation')进行状态改变触发

在需要接收状态改变的视图组件中先import store from '@/store';然后使用store.state.name可以直接引用被更改了的状态

vuex状态管理在项目目录下的store.js中进行

vuex进行组件间的状态管理常用场景为：

1、多个视图依赖于同一状态，例如导航菜单的状态切换

2、来自不同视图的行为需要变更同一状态，如评论弹幕

组件间的状态管理，使用vuex

routes对应的路由配置包含：path为路由路径'/'为根目录；name为路由的名称;component对应的是引入的具体组件

app.vue文件为项目界面结构，其中<router-link to="/">title</router-link>为路由切换标签，<router-view/>则显示当前的路由组件视图

项目的src目录下router文件定义路由

组件的三个特点：独立性，可复用性，完整性

解决组件化带来的问题的方式：vuex进行组件间的状态管理，vue-router组件间的路由管理；还有组件间的传参、消息、事件管理

查看node版本：node -v

查看npm版本：npm -v

安装vue-cli：npm install -g @vue/cli

查看vue版本：vue --version

在当前目录创建vue工程：vue create project-name，使用上线箭头和空格键进行选定

在项目目录中使用npm run serve命令运行项目

使用可视化方式创建项目：vue ui

项目目录下public目录下index.html文件为项目入口文件，src目录下的main.js为主要框架脚本：使用import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store'//此为vuex组件;然后直接在实例中进行绑定，最后使用.$mount('#app')挂载到app元素上

src目录下的views目录中存放不同的页面视图文件

components目录下存放模块化的课被重复引用的组件

项目根目录下package.json中记录了项目及依赖所有的配置和版本，其中的scripts键下存放的是开发中在命令行下使用的命令，使用npm run command来执行

条件渲染：v-if v-else v-else-if，v-show

列表渲染：v-for <div v-for="item in list">

style和class 的绑定：style可写成对象形式，然后通过属性绑定v-bind进行绑定；class绑定写成对象形式，键名是真是的class名称，值为布尔值或表达式，或者可以使用数组直接输出字符串，也可以用对象表达式+数组混合的方式

new Vue({
    el:'#id',
    data:{
        msg:'hello vue'
    },
    watch:{
        msg:function(new_value,old_value){
            console.log(new_value);
            console.log(old_value);
        }
    },
    computed:{
        msg1:function(){
            return 'msg1_value';
        }
    }
})

watch用于监听跟踪一个值的变化，computed则监听return中引用的属性值的变化，然后计算新的属性值

可以将new Vue的实例复制给一个变量 var app，然后在chrome命令行工具中使用app.msg来对vue实例进行操作

### vue的计算属性和监听属性的方法

- computed

- watch

### vue文件结构

- template

- script

- style

### 模板语法

- v-html和v-text已经{{}}书写方式的区别

- v-bind和v-on以及缩写

最基本的一个使用方式

new Vue({

el:'#id',
data:{
    msg:'hello vue'
}

})

www.bootcdn.cn静态资源cdn服务

vue2.x知识体系思维导图