上一篇做了自定义组件,当然还没有完善,只是做了一些要点,还有以下两点没有做:
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
}
]
})
最终效果【修改过路由,下一节中专门讲】