Vue写一个简单的页面

时间:2024-05-22 10:43:10

流程:①拆分页面组件。②完成静态页面。③生成动态交互网页。

页面成品:
Vue写一个简单的页面
1、拆分成add/list/item三个组件,创建三个vue。
Vue写一个简单的页面
2、main.js注册入口页面
Vue写一个简单的页面
3、引用css,竟然是在index.html中引用css。
此处引用了bootstrap的css
Vue写一个简单的页面
4、开始编写app.vue,把其他组件的地方空出来
Vue写一个简单的页面
5、严格按照三步走:
①引入组件
Vue写一个简单的页面
②映射组件标签
Vue写一个简单的页面
③使用组件标签
Vue写一个简单的页面
最后引入到三个我们创建的vue文件如下:
Vue写一个简单的页面
6、style之类的就放在组件的style中
7、运行一下页面:一个啥样式都没有的页面就出现了~(鼓掌鼓掌)
Vue写一个简单的页面

跟着这个教程做的https://www.bilibili.com/video/BV1hb411K7Ud?p=22