Vue
一、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）单文件组件
四、Vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的钩子函数就会被触发调用。
1.Vue生命周期的八个阶段
| 状态 | 阶段周期 |
|
beforeCreate |
创建前 |
|
created |
创建后 |
|
beforeMount |
加载前 |
|
mounted |
加载完成 |
|
beforeUpdate |
更新前 |
|
updated |
更新后 |
|
beforeDestroy |
销毁前 |
|
destroyed |
销毁后 |
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 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法可以参阅各自的文档。
查看17道真题和解析