跳至主要內容
Vue 核心

Vue 核心

1.1、Vue 对象

想要 Vue 工作必须要创建 Vue 实例,并传入一个 配置对象

el :绑定容器
容器Vue实例 关系:一对一
Vue实例组件 配合使用
容器中的代码符合 html 规范,并且加入了特殊的 Vue 语法 (Vue 模板


T4mako...大约 24 分钟Vue基础语法Vue
Vue组件

Vue组件

组件定义:
组件:实现应用中 局部 功能 代码资源集合
组件化:当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用

注:
模块:向外提供特定功能的 js 程序, 一般就是一个 js 文件
模块化:当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

1.1、非单文件组件

非单文件组件:一个文件中包含 n 个组件


T4mako...大约 5 分钟Vue基础语法Vue
Vue 脚手架

Vue 脚手架

Vue 脚手架 是 Vue 官方提供的标准化开发工具(开发平台)

Vue 脚手架:Vue CLI (command line interface)

全局安装 @vue/cli :

npm install -g @vue/cli

T4mako...大约 12 分钟VueVue CLIVue
Vue 中的 Ajax

Vue 中的 Ajax

1.1、Ajax 跨域问题 (代理服务器)

请求的发送:
① ajax (xhr)
② axios (对 xhr 的封装)
③ fetch(window 对象自带的 fetch() 函数,不常用)
④ vue-resource (对 xhr 的封装,用的不多)

解决 ajax 跨域问题的常用方法:
① jsonp (几乎不用)
② CORS (完全在服务器中进行,设置响应头 Access-Control-Allow-Origin
③ 配置代理服务器 (nginx 或 借助 vue-cli vue脚手架 解决


T4mako...大约 2 分钟VueVue
插槽

插槽

作用:让 父组件 可以 子组件 指定位置 插入html结构(注意只能是结构),也是一种组件间通信的方式,适用于 父组件 ===> 子组件

分类:默认插槽、具名插槽、作用域插槽

官网API


T4mako...大约 3 分钟VueVueslot
vuex

vuex

vuex 概念:专门在 Vue 中实现 集中式状态(数据)管理 的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种 组件间通信 的方式,且 适用于任意组件间通信


T4mako...大约 9 分钟VuevuexVue
vue-router 路由

vue-router 路由

1.1、相关概念

SPA

vue-router :vue 的一个插件库,专门用来实现 SPA 应用

SPA 应用的理解 :

  1. 单页 Web 应用(single page web application,SPA)
  2. 整个应用只有一个完整的页面
  3. 点击页面中的 导航链接 不会刷新页面,只会做页面的 局部更新
  4. 数据需要通过 ajax 请求获取。

T4mako...大约 10 分钟Vuevue routerVue
Vue 3

Vue 3

1. Vue3 简介

2. 创建 Vue3 工程

2.1. 【基于 vue-cli 创建】

点击查看 官方文档

备注:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。


T4mako...大约 42 分钟VueVue