Vue教程

基本概念

主要功能

• Vue主要核心功能就是将数据与html标签解耦
• Vue中, 将数据打包成组件的形式, 把组件绑定到指定的html标签上
  • 绝大多数情况下，将不再需要直接操作真实DOM，而是操作这些DOM的上层抽象：Vue 组件

1. 经常会把html子标签也作为特殊的数据
   1. 即组件就是许多html标签的封装
      1. 同样的, 组件所封装的html标签中也可以使用组件, 即组件可以封装子组件
2. 把组件作为封装好的大量html标签插入到外部html框架中
   1. 甚至可以通过组件, 来往把封装好的一些html标签插入到外部html框架中的任意位置

增强组件的灵活性与可复用性:

1. Vue提供了丰富的手段, 得以在组件之间传递数据
2. Vue提供了自定义指令, 得以把一些针对基础dom元素的功能封装起来
   1. 但这些功能的触发都是与组件生命周期相关的
3. 还能通过Vue的html程序流控制命令来选择性或重复渲染html标签
4. 可以使用动态组件语法, 用程序来控制插入完全不同的组件
5. 可以把第三方插件添加到某个组件中
   1. 这样就可以利用社区的广大资源
6. 当然, 也可选择使用js原生的组件复用功能

增强网页的开发体验:

1. 通过Vue可以非常方便的直接在html内部绑定事件监听器
2. 通过使用Vue提供的虚拟动画标签, 快速为一群html添加过渡动画
3. 利用vue的响应式功能，可以：
4. 用更方便的全新方式来进行表单填写 1. 响应式（实时）获取用户输入框的内容 2. 监听事件来提交表单
5. 更方便的应用新的样式

Vue项目的工程化:

• child::管理响应式变量
• child::配置Vue

增强web的某些功能

• child::Vue router

编译结果

• Vue经过打包工具的编译之后
• vue中的绝大多数部分都会被编译为js代码
• vue中的html内容也会被编译为js代码
• vue中的样式内容会被编译为css代码

实际运用

常见业务功能的实现

• 页内筛选
• 控制元素的出现与消失
• 弹窗
• 可视窗口
• 统一样式
• 为元素的添加和消除添加动画效果
• 大型静态资源的显示
  • 如图片
    • 懒加载
• 界面组件的交互引发业务逻辑
  • 外部组件监听事件来执行业务逻辑
  • 界面组件一般用事件单向通信外部组件
• 分页显示
• 分类选择
• 子页面
• 轮播图
  • 第三方组件库实现
    • 轮播图

• 图标交互

  Vue

  • base::实现动画的主流方式

  • 形变

    • 缩放、旋转
      • 应用新的样式：transform 空间坐标变换

    指向原始笔记的链接

  • 图标变换

    • 更换图标

      • 原生svg图标：
        • svg的use属性从预先定义好的svg中选中目标svg图标，并渲染成目标图标
          • 使用js可以在一个js文件中定义很多个svg图标
            • 导入时就很方便，只需导入一个js文件即可
        • 传一个响应式变量给svg进行[use::复用]，值是图标的ID

      • 图标组件

      指向原始笔记的链接

  指向原始笔记的链接

• 自适应布局
  • 自适应布局
  • 控制元素的出现与消失
• 响应式布局
  • 响应式布局
• 下拉选单
  • 第三方组件库实现
    • 下拉菜单
• 折叠
  • CSS改变元素位置
    • 位置布局
    • 一般是绝对位置

特殊业务的实现

滑动评星

• 使用第三方组件库：ElementPlus

  开发

• child::调试vue

常见问题

• child::响应式变量传入组件后是否需要手动解构

应用结构

child::常用应用结构层