PHPer快速上手VUE——边学边练2–把html页面转化成vue页面(2)

    |     2020年6月23日   |   学习偶记   |     评论已关闭   |    1

上一篇做了自定义组件,当然还没有完善,只是做了一些要点,还有以下两点没有做:

A、如果是按钮,则点击后切换到指定的url。

B、如果是X那个A标签,点击关闭提示。

因为A会涉及到路由,所以暂时不去完善那个组件,等搞到路由的时候,我们再去完善。接下来我们把main.html这个页面,转换成home.vue,并且把它作为主页。

先看除了提示以外的代码,这个代码就是一个ul,循环li。

这一段代码,对于vue来说,比较好实现,可以参考:https://cn.vuejs.org/v2/guide/list.html 列表渲染

直接上代码Home.vue,然后解析:

知识点:

A、v-for需要放在循环生成的元素中,比如要循环生成10个li标签,需要放在li里面。

B、v-bind:style 可以简写成 :style。

C、background-image不能这样写url(‘@/assets/images/jiu0’ + n + ‘.png’) 写了出不来。

D、<style scoped>没有内容的话可以省略不写。

scoped的意思是样式仅限当前组件。

然后,我们修改一下src/router/index.js 把系统初始的welcome组件替换成home组件

 

最终效果【修改过路由,下一节中专门讲】

噢!评论已关闭。