第一天的总结：注意：和js有关的就写在（钩子函数）inseted函数中去，和CSS样式有关的就写在bind函数中去！
。mvvm：是前端视图层的分层开发思想，主要把每个页面，分成了M,V,和VM的思想的核心，因为vm是m和v之间的调度者。
组成：vm 就是model和view的调度者 ,model数据库操作（后台请求的数据）, view 视图层（渲染的模板区域）。
1：m:保存得是每个页面中单独的数据:
2：v:每个页面中的html结构
3：mv:它是一个调度者，分别了m和v，每当v层想要获取后保存数据的时候，都要有vm做中间的处理
使用场景：专注于浏览器端的视图层，前端有的比较多，是站在前端项目的角度考虑
。mvc：是一种比模块化更加细化的约定。
组成：model 数据库连接 view 前端页面 controller 逻辑控制。 使用场景：后端框架用的多，是站在整个项目的考虑角度
。vue的基本代码和mvvm之间对应的关系
mvvm最大的特点：数据变-->视图变， 视图变-->数据； 双向绑定数据；
不推荐操作DOM（如果使用过原生的js或者jquery，那么一定对DOM操作，绑定事件操作这些原生的js非常属性，比如在指令DOM中插入一个元素，并绑定事件）；
。内置指令：v-cloak:解决闪烁问题 v-text:插值 v-html:可以解决v-text转义的问题 v-bind:绑定数据,简写@
v-on:事件，简写： v-model:双向绑定数据 v-if/v-show：切换。单次切换/频繁切换
v-for：遍历; 适用于：普通数组，数组对象，对象，数字
4种语法：1.v-for="count in 10" 迭代数字
2.v-for="(item,index) in arr" 循环普通数组
2.1 v-for="item in arr" :key="item.id" 循环普通数组
3.v-for="(item,index) in arr" :key="item.id" 循环对象数组
4.v-for="(val,key,index) in obj" :key="key" 遍历对象
常用遍历： 1. v-for="(item,index) in arr" :key="item.id"
2. v-for="item in arr" :key="item.id"
。数组API的方法：
push, pop, splice, some, filter, findIndex, includes, forEach
（二）生命周期函数（也称为生命周期钩子）
。创建期间的生命周期函数：
beforeCreate:实例刚在内存中被创建出来，还没有初始化好data和methods属性
created:实例已经在内存中创建 OK，data和methods已经创建Ok,还没有开始编译模板
beforeMount:已经完成好编译模板，还没有挂载到页面中去
mount:编译好模板，挂载到页面中指令的容器中显示
。运行期间的生命周期函数：
beforeUpdata:状态更新之前执行函数，还没有重新渲染到Dom中
updata:界面已经渲染好了
。销毁期间的生命周期函数：
beforDestroy:实例销毁之前的调用，在这里，实例仍然完全可用
destroy:Vue实例调用，所有的监听事件会被移除，所有的子实例也会被销毁
（第四天）路由的使用：路由：通过url中的hash来实现页面不同之间的切换，改变切换页面的方式，称为前端路由
1.先导入vue-router组件库 <script src="./lib/vue-router-2.7.0.js"></script>
2. 使用router-link组件来导航 <router-link to="/login">登录</router-link> 注意：to必须要加
3.使用router-view组件来显示匹配到的组件 <router-view> </router-view>
4.创建组件 var login = { tempalt:"<h1>登录组件</h1>"}
5.配置路由规则 const（或var） router = new VueRouter({
router:[ //重定向
{path:"/login",component:login},
{path:"register",component:register},
]
})
6.通过创建vue对象，来使用router
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router });
。ref的使用：使用ref获取Dom元素和组件引用
1.获取原生的Dom 2.获取子组件的datahe
。如何获取？
- 在指定的元素上面定义 ref=”myDOM“
- DOM this.$refs.myDOM.innerText
- 组件 this.$refs.myCom.msg 可以直接方面厘米的属性和方法
设置路由切换动效
。在路由规则中定义参数：2种方式 Vue.extend 创建组件的意思
1.在规则中定义参数 { path: '/register/:id', component: register }
2.通过this.router.params来获取路由中的参数 var login = Vue.extend({ template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>' ）}
。视图命名规范 ： 要添加name,不加name就相当于默认 <router-view name="a"></router-view>
。什么是组件：为了拆分vue实例代码量的，能够让我们以不同的组件，来划分不同的功能规块，使用时，直接调用即可。
（第五天）
。什么是webpack？
答：是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具
。webpack-四大API： entry(入口) output(输出) loader(加载器) plugins(插件)
。webpack安装的两种方式：
答：1.运行npm i webpack -g全局安装webpacck,z这样就能在全局使用webpack的命令
2.在项目根目录中运行npm i webpack --save 或者--dev安装到项目依赖中
注意：-D：开发需要的包 -S：项目需要的包
。初步使用webpack打包构建列表隔行变色案例
1.运行npm init 初始化项目，使用npm管理项目中的依赖包
2.创建项目基本的目录结构
3.使用cnpm i jquery --save安装jquery类库
。把文件打包到dist中：
1.使用webpack-dev-server 这个工具，来实现自动打包编译的功能
2.运行cnpm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖中
。导入文件(写在main.js文件里)：import Vue from "Vue.js"
4.创建main.js并书写隔行变色的代码逻辑
。vue的文件结构：
dist(上线的文件) node_modules src(做项目时的文件) package.json(需要用到的文件)
webpack.config.js(module.exports指定入口和出口的文件)
（六天）vuex --->的使用
import Vuex from "vuex" //导入
Vue.use(Vuex) //使用
const store = new Vuex.Store({ //创建
state:{} //数据
mutations:{} //同步修改state
getters:{} //计算属性
actions:{} //异步修改state中的数据 -->disptach
})
vue的使用：
const vm = new Vue({
el:"#app" //控制的页面
data:{} //数据
methods:{} //方法和函数
router,
store,
})
文件打包： 下载压缩包：cnpm install compression-webpack-plugin --save-dev
