1. VueJS 概述
1.1 VueJS介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/
1.2 MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
2. Vue.js快速入门
2.1 入门程序
我们使用vue编写一个最简单的入门程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:"#app", //表示当前vue对象接管了div区域
data:{
message:"hello vue!" //注意结尾不要写分号
}
});
</script>
</body>
</html>
效果图：
双向绑定
V-model指令：双向绑定，model中的值改变会改变显示中的值，显示的值改变的时候会改变el中的值；
使用它可以将数据模型中的值显示在表单控件中，还可以在用户改变表单控件值的情况下改变数据模型；
控件改变，vue也改变，反之如此；
.
事件绑定
V-on:cick指令：用来绑定事件，冒号后面是事件类型；另一个写法 @click ;
事件绑定时必须在methods中
在表单提交的时候会出出现页面跳转情况，会出现页面刷新情况：
$event : 事件处理对象
事件修饰符：
@click.stop="" 阻止事件冒泡
事件冒泡：就是当点击内部子元素时，外部元素也会做出相应的动作；
@click.prevent=""阻止时间默认行为
@click.once:只执行一次
键盘修饰符：
@keyup.enter="" enter键抬起 回车键
@keydown.13="" enter建按下
.enter相当于.13
属性绑定：
v-:bind:属性名=“值”：值会从vue的data中取，即data中的属性名；
**:属性名=“”**另一种写法
计算属性：
可以进行简单的属性计算的属性
与data,el，methods同一级别
computed:{ **
userList(){
return 1;//必须有返回值**
}
}
访问时：{{ userList }}
元素显示与隐藏
v-if=“true” 显示
v-else false 显示
v-show
v-show: 节点还存在DOM，只是用户看不见，占用着视图空间；
v-for:如果值为true，显示，如果为false时，从文档结构中删除该元素，不占用视图空间；
二者只能存在一种；
vue实例生命周期 钩子函数
beforeCreate()
在vue实例创建完毕，内部属性和方法还没有设置好，触发该事件。
created() 使用较多1
在vue实例创建完毕，内部属性和方法设置好。
一般是向后台发送请求数据。
beforMount()
节点还没绑定好前，节点与vue实例绑定好前；
mounted（）
节点加载完毕，并且与vue实例中的属性和方法绑定好了。
选中页面中的元素。
beforeUpdate()
在数据更新前出发的钩子函数，在页面渲染更新前。
updated （）
页面渲染更新完毕。
before destroy（）
页面销毁之前，vue实例销毁前，还可以访问数据。
destroyed（）
页面完全销毁，vue实例属性和方法也没有，绑定也没了，各种没。
vue的动画：
animate.css:
效果:
transaction组件:
自定义的类实现动画
。v-enter 进入之前的样式
。v-enter-active 正在进入的样式
。v-enter-to 进入之后的样式
。v-leave-active正在离开的样式
。v-leave-to 完全离开之后的样式
ve{
transition:all 3s;
}
使用钩子函数实现动画某一事件时候触发的函数
组件：
1.全局组件
Vue.component(‘组件名称’ ，{vue实例 } )
局部注册：只能在绑定的app内部使用；
组件插槽：
动态组件：
选项卡切换：
过滤器：
全局声明：
局部声明：
