代码拉取完成,页面将自动刷新
<router-view></router-view>
包裹起来display:flex
实现了弹性盒模型布局,从而让元素左右贴边,justify-content:space-between
getNewsList()
方法来获取数据this.$http.get()
async
和await
特性v-for
指令渲染到页面上,需要把数据挂载到data
上Vue.filter('dateFormat',function(dataStr){}
<span>{{ item.add_time | dateFormat }}</span>
moment
插件格式化时间filter
过滤器抽离成到filter
模块中main.js
中与vm
没有很强关联关系的相关代码抽离到globalConfig.js
中router-link
,其中,to
属性的id值,需要动态拼接给每一个router-link
,因此,to
属性需要改造成:to
,然后统一路径前缀:/home/newsinfo/
,后面拼接上item.id
$route.params.id
获取,比较麻烦,老方法props
属性来传递参数props:true
的属性props:[]
,数组中定义的名称,就是路由规则中,对应参数的名称占位符(要保持一致)data
上src->views->sub-components
目录Comment.js
,作为我们的评论子组件script
节点中,通过import
的形式,导入此组件script
中,通过component
属性注册导入的评论组件id
id
id
和page
,获取评论数据的方法,并在created
钩子中调用此方法获取数据data
上的cmtlist
中,并渲染页面加载更多
的评论加载更多
按钮,绑定点击事件this.cmtlist = data.message
,而是应该this.cmtlist = this.cmtlist.concat(data.message)
发表评论
按钮的时候,处理函数中做一下非法值校验,防止评论内容为空unshift
到评论列表cmtlist中Home.vue
router
MUI
的tap-top-webview-main.html
控件来实现mui-fullscreen
去掉http://dev.dcloud.net.cn/mui/ui/#scroll
Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
webpack
打包出来的bundle.js
中,默认启用了严格模式import
导入的mui.js
中,使用了caller
callee
argument
这些特性,但是这些特性在严格模式下不支持,会报错webpack
的严格模式,使用webpack
的插件https://github.com/genify/babel-plugin-transform-remove-strict-mode
mounted
钩子函数中来初始化mui()
初始化组件是没有任何意义的,因为此时页面上没有任何元素mui-slider
类样式,添加 touch-action:pan-x;
属性样式,从而支持此元素的单指水平滑动,提高滑动的流畅度全部
分类信息,通过数组的 unshift
方法,头部追加到数组中data
的category
中全部分类
被高亮选中,通过:class
结合三元表达式,把id为0
那一项分类,设置为默认选中getPhotoByCategory
方法,接收一个分类id,根据id获取所有的图片列表photolist
中Mint-UI
的 lazy-load
组件,实现图片的懒加载效果v-lazy
来指定image
选择器改成img
标签选择器vue-preview
插件来实现缩略图效果cnpm i vue-preview -S
安装globalConfig.js
中,安装此组件:
'''
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
'''w
和h
属性img
标签粘贴到页面中,去渲染数据就行goods-list
,里面的每个商品都是goods-item
goods-list设
置display:flex;
布局,同时为了让一行只显示两个商品,为每个goods-item
添加了width:49%
,同时,设置了goods-list
的flex-warp:warp;
padding:7px;
来挤出左右的边距goods-list
添加了justify-content:space-between;
同一个WiFi
环境中ipconfig
,查找无线局域网适配器
的网络配置,复制IPV4地址
item
项改造成router-link
,同时,提供tag=div
属性将路由渲染成div
,再指定一个:to
属性,拼接上商品的id
值MUI
提供的 card.htm
l 实现''' this.$store.state.全局数据名称 '''
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。