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

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

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

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

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

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

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

JavaScript

自定义组件测试

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

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

自定义组件测试

importTipsfrom"@/components/Tips.vue";

exportdefault{

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

}

}

知识点：

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

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

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

D、

JavaScript

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

}

]

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

importVuefrom'vue'

importRouterfrom'vue-router'

importHomefrom'@/page/Home'

Vue.use(Router)

exportdefaultnewRouter({

routes:[

{

path:'/',

name:'Home',

component:Home

}

]

})

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

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

JavaScript

路由下一节再讲

1

路由下一节再讲

JavaScript

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

}

]

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

importVuefrom'vue'

importRouterfrom'vue-router'

importHomefrom'@/page/Home'

Vue.use(Router)

exportdefaultnewRouter({

routes:[

{

path:'/',

name:'Home',

component:Home

}

]

})

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