vue第一篇

1，数据列表获取显示

入口文件的资源引入及其异步数据获取

图片.png

图片.png

html页面数据显示

图片.png

2，调试

图片.png

图片.png

刷新网页

图片.png

3,判断class值的是否显示

图片.png

图片.png

图片.png

4，列表循环里面的index

图片.png

5，属性值的获取

图片.png

6，过滤器

图片.png

图片.png

图片.png

7，组件里面的数据

图片.png

图片.png

组件里面的index值

图片.png

由于这是一个多页面项目 所有对于底部导航使用当前点击的index与当前列表的index一样来设置active的class值是不行的 会刷新回到解放前 所有通过地址栏的链接带的参数来解决

8，vue里面的链接跳转及数据拼接

图片.png

js里面的一个获取参数字符串的方法

图片.png

qs获取地址栏的参数

图片.png

图片.png

9，共同的方法放到一个js文件里面

例子：
提取设置价格为两位小数的函数

图片.png

图片.png

图片.png

同样可以把公用的底部组件放到一个js文件里面

图片.png

图片.png

图片.png

10，动画

图片.png

11，vue前端在页面添加后端传过来的html片段

图片.png

12，防止刷新页面的时候出现源代码

v-cloak文档

图片.png

13，vue里面的 function 是不会被执行的

例如：

图片.png

vue里面不能有function 必须是箭头函数