Vue框架总结.pdf

组件基础 Vue 中，可以通过方法创建一些全局的组件，或者局部的组件。但是，在实际 的 Vue 项目中，使用得更多的是单文件组件。 单文件组件 每一个以 .vue 为后缀的文件，都是一个组件，称为“单文件组件”。 单文件组件由三部分组成： • <template>：组件模版，类似 HTML • [removed]：组件的 JS，包括数据、事件方法等； • &lt;style&gt;：组件的样式 其中，<template> 是必须要有的，[removed] 和 &lt;style&gt; 可选。 Vue.js 是一款流行的前端JavaScript框架，它以声明式的数据绑定和组件化开发为特点，极大地提高了Web应用的构建效率。Vue CLI是Vue.js官方提供的一个命令行工具，用于快速搭建和管理Vue项目，简化开发流程。 Vue CLI的安装步骤如下： 1. 确保已安装Node.js，可以通过`node -v`命令检查版本。 2. 使用淘宝npm镜像以提高下载速度，执行`npm config set registry https://registry.npm.taobao.org`。 3. 全局安装Vue CLI，运行`npm install -g @vue/cli`。 4. 检查Vue CLI版本，输入`vue -V`。 创建Vue项目时，可以通过Vue CLI提供的向导来选择项目配置： 1. 运行`vue create vue-demo`创建项目。 2. 选择预设选项，可以是默认预设或手动选择功能。 3. 根据提示，选择需要的特性，如Babel、Router、Vuex等。 4. 选择配置文件的位置，可选在dedicated config files或package.json中。 5. 是否保存预设，按需选择。 在Vue中，组件是核心概念。组件可以是全局的或局部的，但更常见的是使用单文件组件（Single File Component, SFC）。SFC是一个包含HTML、JS和CSS的.vue文件，分为三个主要部分： - `<template>`：定义组件的视图模板，类似于HTML。 - `<script>`：定义组件的JavaScript逻辑，包括数据、方法等。 - `<style>`：定义组件的专属样式，可选。 每个SFC必须有`<template>`，`<script>`和`<style>`可根据需要省略。 组件的嵌套是Vue中实现组件间交互的重要方式。子组件可以在模板中定义，然后在父组件中导入并配置。例如： 1. 创建子组件HelloWorld.vue，包含简单的HTML模板。 2. 在父组件App.vue中，通过`import`导入子组件，并在`components`属性中配置子组件。 3. `export default`暴露的对象包含了组件的所有配置，`components`属性用于定义子组件，键是子组件名，值是导入的组件对象。 4. 在父组件的`<template>`中，使用子组件的名称作为标签来渲染它。 Vue实例是Vue框架的核心，它是一个包含了Vue配置的对象，如数据、方法、生命周期钩子等。Vue实例创建后，可以通过`data`属性声明响应式数据，`methods`属性定义组件的方法，`mounted`等生命周期钩子可以在特定时刻执行代码。 Vue还支持指令（如`v-model`用于双向数据绑定，`v-if`和`v-for`用于条件和循环渲染），计算属性（用于基于其他数据动态计算结果），以及事件处理（使用`v-on`或`:`绑定事件监听器）等特性，使得开发更加便捷。 Vue.js通过其强大的组件系统和丰富的语法特性，为开发者提供了一个高效、灵活的前端开发环境。Vue CLI则进一步简化了项目初始化和维护，使得开发者可以更加专注于业务逻辑的实现。