目录
- 单文件组件
- .vue文件
- 单文件组件常用结构
- App.vue
- Student.vue
- School.vue
- main.js
- index.html
- 运行结果
- vue脚手架
- 具体步骤
- 项目架构
- 其他配置项
- props配置项
- mixin混入
- 插件
- scoped属性
本博客参考尚硅谷官方课程，详细请参考
- 【尚硅谷bilibili官方】
本博客以vue2作为学习目标（请勿混淆v2与v3的代码规范，否则可能出现报错），详细教程请参考
- 【 v2.x 官方文档】
单文件组件
.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 } -
使用插件：
Vue.use()
scoped属性
- 作用：让样式在局部生效，防止冲突。
- 写法：
<style scoped>
