三个小时vue3.x从零到实战(中)(vue3.x高级语法)

简介: 该文章深入讲解了Vue 3.x的高级语法,包括混入(mixins)的使用方法和组件间通信的多种策略,如props、自定义事件、以及Vuex的状态管理等。

一. mixin混入

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。
Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

案例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 实例</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app"></div>
<script type = "text/javascript">
  // 定义混入对象
  const myMixin = {
    created() {
      this.hello()
    },
    methods: {
      hello() {
        document.write('欢迎来到混入实例')
      }
    }
  }

  // 定义一个应用,使用混入
  const app = Vue.createApp({
    mixins: [myMixin]
  })

  app.mount('#app') // => "欢迎来到混入实例"
</script>
</body>
</html>

二. ajax

vue 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Github开源地址: https://github.com/axios/axios

三. 组件化编程

vue文件包含3个部分
    <template>
      <div></div>
    </template>
    <script>
        export default {
          props: []/{}
          data(){},
          computed: {}
          methods: {},

          watch: {}
          filters: {}
          directives: {}
          components: {}
        }
    </script>
    <style>
    </style>
组件化编码的基本流程
    1). 拆分界面, 抽取组件
    2). 编写静态组件
    3). 编写动态组件
        初始化数据, 动态显示初始化界面
        实现与用户交互功能
组件通信的5种方式
    props
    vue的自定义事件
    pubsub第三方库
    slot
    vuex(后面单独讲)
props:
    父子组件间通信的基本方式
    属性值的2大类型: 
        一般: 父组件-->子组件
        函数: 子组件-->父组件
    隔层组件间传递: 必须逐层传递(麻烦)
    兄弟组件间: 必须借助父组件(麻烦)
vue自定义事件
    子组件与父组件的通信方式
    用来取代function props
    不适合隔层组件和兄弟组件间的通信
pubsub第三方库(消息订阅与发布)
    适合于任何关系的组件间通信
slot
    通信是带数据的标签
    注意: 标签是在父组件中解析
vuex
    多组件共享状态(数据的管理)
    组件间的关系也没有限制
    功能比pubsub强大, 更适用于vue项目
相关文章
|
3月前
|
JavaScript 前端开发 开发者
三个小时vue3.x从零到实战(中)(vue3.x高级语法)
该文章深入探讨了Vue 3.x的高级语法与特性,包括混入(mixins)的使用、组件间的通信方式等,帮助开发者掌握Vue 3.x的进阶知识。
57 0
|
3月前
|
存储 缓存 JavaScript
三个小时vue3.x从零到实战(前)(vue3.x基础)
该文章提供了关于Vue 3.x的基础教程,覆盖了从环境搭建到基本使用的各个方面,适合Vue 3.x的初学者。
25 0
|
3月前
|
JavaScript 开发者
三个小时vue3.x从零到实战(后)(vue3.x配套工具及项目化构建)
文章详细介绍了Vue 3.x相关的配套工具及项目化构建流程,包括构建工具的配置与最佳实践,帮助开发者更好地管理和构建Vue项目。
48 0
|
3月前
|
JavaScript 开发者
三个小时vue3.x从零到实战(vue3.x经典案例46个)
该文章提供了46个Vue 3.x的经典案例,通过实际代码示例帮助开发者更好地理解和运用Vue 3.x的各项功能和技术。
374 0
|
3月前
|
JavaScript 前端开发 编译器
三个小时vue3.x从零到实战(typescript的搭建、使用及资料)
该文章介绍了如何在Vue 3项目中集成TypeScript,包括TypeScript的安装、基本使用,以及如何通过TypeScript增强Vue应用程序的类型安全性。
40 0
|
3月前
|
缓存 JavaScript 前端开发
三个小时vue3.x从零到实战(vue3.x面试总结)
该文章总结了Vue 3.x面试中常见的知识点和问题,包括Vue的生命周期、核心概念、组件通信方式等方面的内容,有助于准备Vue相关技术面试。
48 0
|
7月前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
134 6
|
JavaScript
Vue框架的学习(Vue的基础指令操作一)第二课
Vue框架的学习(Vue的基础指令操作一)第二课
58 0
|
JavaScript 前端开发 编译器
【三十天精通 Vue 3】 第四天 Vue 3的模板语法详解
【三十天精通 Vue 3】 第四天 Vue 3的模板语法详解
129 2
|
JavaScript
Vue框架的学习(Vue的基础指令操作二 V-For)第二课
Vue框架的学习(Vue的基础指令操作二 V-For)第二课
63 0