vue 组件8 单文件组件

要点：

1.组件的形式

2.app组件,管理所有组件

3.main.js 创建vue实例的

1.定义指向容器

2.引用app组件

 3.可以在vue实例上,写template属性,写app组件标签

4.页面的结构文件

1.引用js文件

2.创建div容器

3.可以在这写app组件标签,也可以在mian.js上写

单文件的文件名,都以vue结尾 

但要注意的是,直接把.vue文件放入浏览器运行是不行的,需要把它转成js文件,这边有两种方法

1.就是自己搭webpack实现工作流

2.使用vue官网推荐的脚手架,也就是他们工作人员,已经实现好的,一种webpack工作流程

而这里我们不用到脚手架,只注重代码怎么写

 

1.当给.vue文件取名时.它的取名规则和前面在非单文件组件取名时是一样的

这四种都可以,我们这边采用的是,两种的第二个

分析vue文件中要写的东西,因为组件是一个局部功能的代码和资源的集合,所以里面包含了HTML,css,js,等东西

上图没有显示高亮是因为,此时vscode不认我们这种vue语言,要安装插件vetur

并且每个样式都有不同的注释形式

 

 写到这,你会发现前面的非单组件文件,中的css只能写在这,如果另外创建一个css文件,在引用,就违背了组件是实现局部功能的代码和资源的集合

把之前的school组件用单组件文件的形式编写

如果要引用组件则要设置暴露

 实现暴露有三种方法：

1.分别暴露

2.统一暴露

3.默认暴露

这默认暴露还可以优化下,取消中转变量

 这边前面说过,Vue.extend()还可以省略,直接在后面接组件的配置对象,还可以加上name与文件名对应

 注：

 一般都使用默认暴露 export default 因为它引用简单

 如果不是默认暴露的话 引用都要

这样我们一个单文件组件就写好了

然后我们再类似的写一个student组件

再定义一个非常重要的组件就是app组件一人之下万人之上

这单边为文件组件样式的快捷键    <v

 

因为app是一个管理所以组件的角色,所以它绝对有引入组件

绿色框为一个es6的一个模块化的引入

在脚手架里,引用时.vue写也行,不写也行

引入完毕,则写入对应的组件标签，注意外面要加div

但我们这边创建了一些组件,但是还没有vm

 我们在脚手架开发的时候,在组件文件中不会写new vue的东西所以创建vm要再写一个文件

所以我们创建一个main.js

只有app.vue有资格和mian.js对话因为除app其他的组件都在app内被嵌套了

写完mian.js但发现容器还没有定义

所以还会创建一个文件夹 叫index.html

里面写：

1.引入vue.js 引入mian.js （也称入口文件）

2.写上app组件标签 

 注意：这边两个js文件引入的顺序很重要,而且最好写在body的末尾

app也可以这样写

这样div容器里就不需要写app标签了

但是直接在浏览器打开

报错：浏览器不能直接支持es6的模块化方法

这些.vue import无法在浏览器运行,这边就到这,因为只要到了脚手架里就能直接运行