Vue写一个简单的页面

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

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

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

你可能感兴趣的:(前端)