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

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

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

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

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

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

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

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

直接上代码Home.vue，然后解析：

<template>
    <div>
        <gk-tips type="warn" linkType="link" :btnLink="['button','http://www.baidu.com']">自定义组件测试</gk-tips>
        <div class="ui-feeds">
            <ul>
                <li v-for="n in numbers">
                    <span v-bind:style="backImg(n)"></span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import Tips from "@/components/Tips.vue";
    export default {
        name: 'Home',
        data () {
        return {
            numbers: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        },
        methods: {
            backImg: function (n) {
                return 'background-image:url("'+require('@/assets/images/jiu0' + n + '.png')+'")'
            }
        },
        components: {
            'gk-tips' : Tips
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

<div>

<gk-tips type="warn" linkType="link" :btnLink="['button','http://www.baidu.com']">自定义组件测试</gk-tips>

<ul>

</li>

</ul>

</div>

</template>

import Tips from "@/components/Tips.vue";

export default {

data () {

return {

numbers: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

}

methods: {

backImg: function (n) {

return 'background-image:url("'+require('@/assets/images/jiu0' + n + '.png')+'")'

}

components: {

'gk-tips' : Tips

}

</script>

</style>

知识点：

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

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

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

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

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/page/Home'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

component: Home

}

]

})

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

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

路由下一节再讲

路由下一节再讲

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})