YaaLee_
YaaLee_

Vue核心知识总结（超级经典，实时更新）

喜欢的小伙伴点赞收藏哦

  • 1、Vue基础入门
      • 1.1、脚手架环境安装Vue
      • 1.2、创建Vue项目
      • 1.3、精简项目代码
  • 2、Vue的核心概念
      • 2.1、指令
        • 2.1.1、文本指令
        • 2.1.2、流程控制
        • 2.1.3、显示与隐藏
        • 2.1.4、属性绑定
        • 2.1.5、事件处理
        • 2.1.6、表单绑定
        • 2.1.7、编译处理
        • 2.1.8、插槽
      • 2.2、选项
        • 2.2.1、数据选项
        • 2.2.2、DOM选项
        • 2.2.3、生命周期
        • 2.2.4、资源选项
      • 2.3、实例属性和方法
      • 2.4、内置组件
      • 2.5、特殊属性
      • 2.6、全局API

1、Vue基础入门

1.1、脚手架环境安装Vue

安装脚手架依赖

# 安装 @vue/cli
cnpm i -g @vue/cli

1.2、创建Vue项目

在本地创建项目文件夹，例如 d:\project，在此目录中运行 cmd，然后执行下面命令：

# 创建项目
vue create myapp

# 根据提示选择安装配置

# 项目创建成功后
cd myapp
npm run serve

项目启动成功后，在浏览器中访问 http://localhost:8080

1.3、精简项目代码

项目目录结构

- public 本地服务器的根目录
- src 源码
	- assets  静态资源文件，例如图片、视频等
	- components 管理公共组件的目录
	- router 管理路由的目录
	- store 管理状态的目录
	- views 管理视图组件的目录
	- App.vue 根组件
	- main.js 入口文件
- package.json npm的配置文件

精简：

对 App.vue 精简

剩下的目录根据项目需求进行删除。

2、Vue的核心概念

2.1、指令

2.1.1、文本指令

  • v-text
  • v-html

2.1.2、流程控制

  • v-if

  • v-else-if

  • v-else

  • v-for

    • key 属性表示什么意思？

    • 与