(尚022)Vue案例_初始化显示(十分详细!!!)

项目结构目录

所需资料:

comment_page文件夹:

========================================================================================================================

组件化编码基本流程:

1.拆分组件

2.实现静态组件

3.实现动态组件

静态组件和动态组件区别?

静态组件显示的数据是固定的,没有交互;

动态组件有两个方面是动态的:(1).初始化显示(数据应该动态显示出来);(2).交互(用户点击提交/删除都能操作)

=================================================================================

具体操作:

第一步:拆分组件

1.拆分组件:(最外围是APP)

创建4个组件

(1).创建入口main.js

(2).最外层组件App.vue

(3).src下创建文件夹components(包含三个文件夹):(现在没有,创建三个vue文件)Add.vue,List.vue,Item.vue

(4).编写main.js文件

import Vue from 'vue'
import App from './App.vue'   //./代表当前目录

new Vue({
  el:'#App',
  //将App映射为标签
  components:{App},
  //模板,里面写<App/>标签
  template:'<App/>'
})

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第二步:静态组件(拆分页面和样式)

(1).在static文件夹下新建文件夹css,css文件夹内放入文件bootstrap.css文件

(2).在index.html内引入bootstrap.css

(3) 它有自己的页面,故先拆分页面,将自己index.html中的<div></div>放入App.vue的<template></template>标签内

(4).拆分左右两个组件页面

(5).1.App.vue中引入左右两个子组件

　　2.映射成标签

　　3.映射成标签后,写这两个标签

(6).拆分样式

将index.css样式,全部拷贝到List.vue的<style></style>标签中

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第三步:动态组件(1.动态显示初始化数据;2.交互)

1.动态显示初始化数据

数据为这个列表