尚硅谷张天禹老师Vue2笔记：核心概念与配置详解

"Vue2.0的学习笔记，涵盖了Vue项目的文件结构、不同版本Vue的区别、vue.config.js配置、以及props的使用等核心概念。" 在深入Vue2.0的学习过程中，我们首先要理解一个标准Vue项目的文件结构。Vue脚手架创建的项目通常包括以下几个关键部分： 1. `node_modules`：存储所有依赖包的地方，由npm或yarn管理。 2. `public`：存放项目公共资源，如`favicon.ico`图标和`index.html`主页面。 3. `src`：项目的主要代码目录，包括`assets`（存放静态资源）、`components`（组件）、`App.vue`（组件总入口）、`main.js`（应用入口文件）等。 4. `.gitignore`：定义了git版本控制系统中忽略的文件和目录。 5. `babel.config.js`：Babel的配置文件，用于JavaScript的转译。 6. `package.json`：项目配置文件，记录项目信息、依赖和脚本。 7. `README.md`：项目说明文件。 8. `package-lock.json`：锁定依赖包版本，确保团队成员有相同的包版本。 接下来，我们讨论Vue不同版本的区别。Vue2有两个主要版本： 1. `vue.js`：完整版，包含核心功能和模板解析器，可以在HTML中直接使用`<template>`标签定义模板。 2. `vue.runtime.xxx.js`：运行时版本，仅包含核心功能，不包含模板解析器，因此无法使用`template`选项，需通过`render`函数配合`createElement`创建内容。 Vue项目的配置可以通过`vue.config.js`文件实现，它允许对Vue CLI的默认配置进行自定义，以满足特定项目需求。开发者可以参考Vue CLI的官方文档了解更多配置细节。 关于`ref`属性，它是Vue中用于注册引用信息的关键机制。它可以用于： 1. 注册引用：在HTML元素或组件上添加`ref="xxx"`属性。 2. 获取引用：在Vue实例中，通过`this.$refs.xxx`访问到元素（如果是DOM元素）或组件实例（如果是组件）。 最后，`props`是Vue组件间通信的基础，用于组件接收外部数据。有以下几种配置方式： 1. 基础接收：在组件定义中声明`props:['name']`，表示接收名为`name`的属性。 2. 类型限制：`props:{name:String}`，限制`name`属性必须是字符串类型。 3. 验证规则：可以进一步添加验证规则，如`props:{name:[String,Number]}`，允许`name`为字符串或数字。 这只是Vue2.0学习笔记的一小部分，深入掌握还需要了解生命周期、计算属性、侦听器、组件通讯（Vuex）、路由（Vue Router）等多个方面。不断实践和探索，才能更好地运用Vue构建复杂应用。