vue使用mammoth案例_myVue

#vue_system

项目基本结构搭建和环境配置

安装依赖模块

npm install

配置webpack.config.js

配置项目入口文件main.js

配置vue项目根组件App.vue

实现根组件头部和底部样式

mint-ui实现头部

router-view占位

mui实现底部tabbar

首页轮播图

main.js中更改路由规则

Home.vue中使用mt-swipe组件

使用假数据填充图片

使用vue-resource请求轮播图数据

npm 安装vue-resource

npm install vue-resource --save

main.js中导入vue-resource

在vue的生命周期created方法中使用$http请求数据

使用MUI布局首页九宫格导航

使用MUI九宫格组件布局导航

替换导航中的默认图片

更改a标签为router-link实现路由跳转

使用MUI实现新闻列表界面

在main.js中添加路由规则

{path:'/news/newslist',component:newslist}

利用MUI图文列表组件实现新闻列表布局

使用vue-resource请求新闻列表真实数据

使用v-for循环渲染界面

添加样式美化列表

使用全局过滤器和moment.js实现日期格式化

main.js中注册全局过滤器

Vue.filter('datefmt',function(input,fmtstring){}

安装moment

npm install moment --save

使用moment格式化时间

Vue.filter('datefmt',function(input,fmtstring){

// 使用momentjs这个日期格式化类库实现日期的格式化功能

return moment(input).format(fmtstring);

})

newslist.vue中使用日期过滤器

发表时间:{ {item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}

实现跳转新闻资讯详情页面及传参

在main.js中添加路由规则

{path:'/news/newsinfo/:id',component:newsinfo}

修改新闻列表界面中的a标签为router-link

配置跳转参数

实现页面传参

created() {

// 获取URL传入的参数id赋值给data中的id属性

this.id = this.$route.params.id;

}

实现详情页面界面布局和真实数据

使用css完成基本布局

请求真实数据

使用vue指令赋值真实数据

公共功能提取-API根域名提取

将根域名存放到common.js中

export default{

apidomain:'http://webhm.top:8899', // 所有数据请求的根域名地址

}

导入common.js使用

评论组件-提交评论功能

父组件向子组件传值

- 父组件中注册组件

components: {

comment, // II. 注册评论组件

},

- 父组件中使用子组件时属性传值

- 子组件中props接收传值

props: ['id'],//用来接收父组件传递过来的值

实现评论提交界面样式

发送post请求提交数据

- 数据为空时提示用户不能提交

- 提交成功清空文本框数据

评论组件-列表数据展示功能

使用MUI列表组件实现基本样式布局

请求真实数据赋值给list

v-for渲染数据到界面