要点:
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无法在浏览器运行,这边就到这,因为只要到了脚手架里就能直接运行