一、Vue简介

Vue是一套前段框架，可以简化JS中的DOM操作，是基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定（模型和视图的双向绑定），View中数据的变化将自动反映到ViewModel上；反之，Model中数据的变化也将会自动展示在页面上。而把Model和View关联起来的就是ViewModel，即ViewModel负责把Model的数据同步到View显示出来，也负责把View的修改同步回Model。

二、Vue的使用

1.导入vue.js文件

法一：在HTML页面中导入vue.js文件：
```
<script src="js/vue.js"></script>
```

法二：在终端使用npm安装vue(需要 nodejs 环境)：
```
npm install vue
```

2.创建核心对象

在JS代码区域创建Vue核心对象(实例)，进行数据绑定，关联页面的模板：

<script>
    //创建一个vue实例
  new Vue({
    el:"#app",  // #是id选择器，el将vue实例与元素进行绑定
    data(){     //封装数据
      name:"张三",
            num:1
    },
        methods:{   //封装方法
            cancle(){
                this.num--;
            }
        }
  })
</script>

3.编写视图

使用v-model属性绑定对应的模型：

<div id="app">
  <input v-model="username">
    <!--插值表达式-->
  {{username}}
</div>

【tips】{{表达式}}：可以直接获取vue实例中定义的数据或函数，要求该表达式必须有返回值。使用{{}}在网速慢时会出现插值闪烁的问题，即数据未加载完成时页面会显示原始的{{表达式}}。

三、Vue的常用指令

1.指令

vue指令是HTML标签上带有v-前缀的特殊属性。

2.常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如动态设置href、CSS样式等。【tips】v-bind可以省略，只留:即可。
v-model	创建双向绑定数据
v-on	为HTML标签绑定事件。【tips】v-on:可以用@代替。
v-if	条件性地渲染某元素，类似于Java中的if判断，判定为true时渲染，否则不渲染。
v-else
v-else-if
v-show	如果条件满足，就展示数据【tips】v-show与v-if的区别在于v-show切换的是display属性的值。
v-for	用来循环遍历容器的元素或对象的属性

3.事件修饰符

Vue.js 为 v-on 提供了事件修饰符。修饰符是由.开头的指令后缀来表示的：

.stop：阻止事件冒泡到父元素
.prevent：阻止默认事件发生
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

4.按键修饰符

在监听键盘事件时，经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

5.计算属性computed和侦听器watch

（1）computed

某些结果是基于之前的数据实时计算出来的，可以利用计算属性computed来完成。

（2）watch

watch 可以监控一个值的变化，从而做出相应的反应。

6.过滤器filters

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

案例：展示用户列表性别显示男女
法一：通过三元运算来实现：
法二：通过filters来实现：

【tips】①局部过滤器：写在当前 vue 实例中，只有当前实例能用，如上面这个就是局部过滤器。
②全局过滤器：在创建 Vue 实例之前全局定义过滤器，任何 vue 实例都可以使用。

7.组件化基础

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分，例如可能会有相同的头部导航。我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

在 vue 里，所有的 vue 实例都是组件。

（1）全局组件

通过 Vue 的 component 方法来定义一个全局组件。

组件也是一个 Vue 实例，因此在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性
组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板
全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
data 必须是一个函数，不再是一个对象

（2）局部组件

components 就是当前 vue 对象子组件集合
- 其 key 就是子组件名称
- 其值就是组件对象名
效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例中使用

（3）单文件组件

https://cn.vuejs.org/guide/scaling-up/sfc.html

四、Vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的钩子函数就会被触发调用。

1.Vue生命周期的八个阶段

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	加载前
mounted	加载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

【tips】每触发一个生命周期事件，会自动执行一个生命周期方法（钩子函数）。

2.mounted（★）

加载完成，Vue初始化成功，HTML页面渲染成功。

五、vue 模块化开发

1.入门

初次使用时，先全局安装webpack和vue脚手架
在cmd中输入：
```
npm install webpack -g

npm install -g @vue/cli-init
```
初始化vue项目
vue脚手架使用webpack模板初始化一个appname项目
启动vue项目
在终端使用npm run dev命令启动项目
在VS Code中进行开发
- 打开项目：文件→打开文件夹→vue-demo→选择文件夹
- 项目结构：开发时在src下写代码

2.Vue整合ElementUI快速开发

快速上手官方地址：https://element.eleme.cn/#/zh-CN/component/quickstart

npm安装ElementUI
```
npm i element-ui@2.12.0 -S
```

在主程序文件main.js中导入ElementUI及其css样式

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法可以参阅各自的文档。