一、Vue
1. 简介
-
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的 JavaScript 框架
-
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型
-
由个人维护：尤雨溪，华人
-
官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js
2. 基本使用
Vue的页面使用方式：
-
在页面中直接引入Vue核心库的js文件
-
该方式只是为了让开发者在学习Vue语法时可以快速掌握
-
实际上Vue并不适合直接使用 页面方式进行语法定义，更推荐使用模块化方式
使用步骤：
-
获取Vue核心库的js文件
通过地址 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 下载
-
在页面中引入Vue
<script src="js/vue.js"></script>
-
创建Vue实例并应用
3. 调试工具
安装vue-devtools插件，便于在Chrome浏览器中调试vue
步骤：
-
打开Chrome浏览器的扩展程序——>更多扩展程序
-
将
vue_devtools_6.5.0.crx拖放到扩展程序中
在VSCode中安装Vue相关插件：Vue Language Features、vue-helper
二、基本交互
1. 插值表达式
语法： {{ }} 由两对大括号组成，称为“Mustache”语法
作用：用于在页面标签中插入值，进行数据的绑定显示，且当值发生变化时标签会重新渲染加载，称为响应式特性，即数据状态同步操作
用法：<标签>{{ Vue对象数据仓库变量|JS表达式|JS内置对象 }}</标签> 只能用在标签中间的内容位置
2. 指令
2.1 简介
指令 (Directives）是用来扩展html标签的功能，以v-作为前缀
2.2 常用指令
| 指令 | 取值 | 作用 |
|---|---|---|
| v-text | string | 更新元素的textContent |
| v-html | string | 更新元素的innerHTML |
| v-on | Function | Object | Array | 行内表达式 | 绑定事件监听器，用于事件绑定 |
| v-show | any | 根据表达式的boolean结果，切换元素的 display CSS 属性，控制元素的显示隐藏 |
| v-if、v-else-if、v-else | any | 根据表达式的boolean结果，执行元素的创建和删除操作，控制元素的显示隐藏 |
| v-for | Array | Object | number | string | 基于数据多次渲染元素或模板块，用于循环数据 |
| v-bind | any | 动态的为标签绑定属性，用于属性绑定 |
3. 双向数据绑定
v-model双向数据绑定指令
-
取值：随表单控件类型不同而不同
-
限制：仅限于表单中可输入或者可选择的元素，如
<input>、<select>、<textarea>
四、数据控制
1. 计算属性
计算属性（computed）也是用来存储属性数据的，但具有以下特点：
-
可以对数据进行逻辑处理操作，实现数据包装
-
计算属性通常依赖于当前Vue对象中的普通属性
-
当依赖的普通属性发生变化时计算属性也会变化，实现数据监控
2. 监视器
监视器（watch）是用来监视数据的变化，对数据进行监控
new Vue({watch: {变量:function(newValue, oldValue){}, // 监控方法变量:{handler: function(newValue, oldValue){}, // 监控方法deep: true // 开启深度监视}},
})五、实例属性和方法
1. 简介
通过Vue实例对象可以直接访问的属性和方法，称为实例属性和实例方法
实例属性和方法都以 $ 开头
2. 实例属性
-
vm.$el：当前Vue实例使用的根 DOM 元素
-
vm.$refs：当前Vue实例容器中定义了ref属性的所有 DOM 元素
3. 实例方法
-
vm.$mount：手动挂载Vue实例
-
vm.$destroy：销毁Vue实例，只会销毁vue的实例对象，不会销毁与其关联的页面容器
-
vm.$nextTick：在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM并操作
六、模板
模板（template）就是定义Vue时指定的页面结构构成
-
默认使用
el选项指定的挂载元素的内容来构成页面模板，同时指定挂载位置 -
可以使用
template选项独立定义页面模板，此时el挂载元素的内容将被忽略
七、生命周期
Vue实例从创建到销毁的过程，称为生命周期，共有八个阶段：
-
beforeCreate、created
-
beforeMount 、mounted
-
beforeUpdate、updated
-
beforeDestroy、destroyed
在生命周期的每个阶段都提供了相应的钩子函数，可以在钩子函数中执行操作，控制生命周期的各个阶段
八、组件
1. 简介
Component 组件是可复用的Vue实例，可以将项目中重复出现的页面结构定义为组件
组件会带有一个名称，可以把组件作为自定义元素来使用，相当于是自定义了一个标签
组件分类：
-
全局组件，在所有Vue实例中都可以使用
-
局部组件，只能在构建组件的 Vue实例的容器范围内使用
2. 定义组件
通过选项 components:{} 来定义
用法：
new Vue({el: '#app',components: {'comp-a': {template: '<h3>{{ msg }}</h3>',data() {return {msg: "aaa"}}}}
})九、组件间数据传递
1. 组件间的关系
页面组件的关系结构，是一个由许多组件构成的树状结构，组件间存在着两种关系：父子关系、非父子关系
默认情况下，每个组件实例都是独立的，组件间无法直接访问数据，因此需要进行组件间的数据传递，也称为组件间的通信
2. 父子组件间的数据传递
2.1 父向子传递数据
技术：属性绑定+数据拦截
步骤：
-
父组件在调用子组件时，以属性绑定的方式将要传递的数据绑定在子组件标签上
-
在子组件对象中，使用
props选项声明获取的数据，进行绑定属性的拦截，即接收来自父组件的数据
2.2 子向父传递数据
技术：事件监听+事件触发
步骤：
-
父组件在调用子组件时，监听子组件触发的自定义事件，并在父组件中定义回调方法，用来接收数据
-
在子组件中使用
vm.$emit(事件名,数据)触发自定义事件