vue前框框架课程笔记（六）

最新推荐文章于 2025-06-06 15:53:54 发布

夺笋123

最新推荐文章于 2025-06-06 15:53:54 发布

阅读量399

点赞数 1

分类专栏： # vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_54510474/article/details/128820803

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue的单文件组件（.vue）结构，包括模板、脚本和样式部分。通过App.vue、School.vue和Student.vue示例展示了组件的导入和使用。还涉及了name属性、props配置、mixin混入、插件机制以及scoped属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单文件组件

.vue文件

组件，实现界面局部功能代码和资源的集合

.vue文件包含如下模块

<template>
	<!--组件结构-->
</template>
<script>
	//组件交互相关代码
</script>
<style>
	/*组件样式*/
</style>

单文件组件常用结构

在这里插入图片描述

App.vue

作用：汇总所有组件。因此我们在<script>标签中需要先进行引入

<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
import School from "./School.vue";
import Student from "./Student.vue";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
};
</script>

关于name属性

vue中的name属性主要用来定义该组件被引入时候的名称，根据ES6的特性我们可以了解到，当我们使用export defalut对module进行暴露的时候，其他文件可以以匿名的方式对暴露的部分进行引入，如果我们想要规定暴露部分的名称，使用name属性进行显式定义即可

Student.vue

一个自定义组件

<template>
  <div>
    <h2>学生姓名：{{ name }}（学生组件）</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 90,
    };
  },
};
</script>

<style></style>

School.vue

一个自定义组件

<template>
  <div class="school">
    <h2>学校名称{{ name }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
    };
  },
};
</script>

<style>
.school {
  background-color: aquamarine;
}
</style>

main.js

我们需要创建一个Vue实例使用我们创建的组件，这是我们就需要一个Js文件

import App from "./App.vue";

new Vue({
  el: "#root",
  components: { App },
});

index.html

Vue实例对象需要为一个容器服务，因此我们创建一个html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单文件组件使用</title>
  </head>
  <body>
    <div id="root">
      <App></App>
    </div>
  </body>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
  <script src="./main.js"></script>
</html>

运行结果

我们尝试使用live server打开index.html文件，但是页面中并没有出现内容，打开控制台，发现报错：Uncaught SyntaxError: Cannot use import statement outside a module，接下来我们尝试使用Vue脚手架解决该问题

vue脚手架

vueCLI（vue command line interface）：vue官方提供的标准化开发工具

具体步骤

更改下载路径

npm config set registry https://registry.npm.taobao.org

使用npm命令进行全局安装

npm install -g @vue/cli

切换到要创建项目的目录打开cmd命令行，输入

vue create 项目名称

启动项目

npm run serve

项目架构

在这里插入图片描述

脚手架框架解析

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

关于vue.js与vue.runtime.xxx.js以及render函数

vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。（实际上当我们使用webpack对vue项目进行打包时，我们并不需要模板解析器，因此该版本的vue应运而生）
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

其他配置项

props配置项

用于让组件接收外部传过来的数据

传递数据：<Demo name="xxx"/>
接收数据：

第一种方式（只接收）：props:['name']
第二种方式（限制类型）：props:{name:String}
第三种方式（限制类型、限制必要性、指定默认值）：

props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：

第一步定义混合：
```
{
    data(){....},
    methods:{....}
    ....
}
```
第二步使用混入：

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}