我们书接上文，已经定义了两个组件（list、commonFooter、homeHeader.vue），接下来写home.vue：
<template lang="html">
<div class="container">
<home-header></home-header> <!-- 展示引入的header组件 -->
<div class="content">
<ul class="cont-ul">
<!-- list组件展示区，并用v-for来将数据遍历，:xx="xxx" 是用来给子组件传递数据的 -->
<list v-for="item in items" :price="item.price" :title="item.title" :img="item.img"></list>
</ul>
</div>
<common-footer></common-footer> <!-- 展示引入的footer组件 -->
</div>
</template>
<script>
import HomeHeader from '../components/HomeHeader' /* 本页面中用到了HomeHeader组件，所以就需要在这里引入一下 */
import CommonFooter from '../components/commonFooter'
import List from '../components/list'
export default {
data () {
return {
items: [] /* 定义一个空数组数据items */
}
},
components: {
HomeHeader,
CommonFooter,
List
},
created () { /* 这个是vue的钩子函数，当new Vue()实例创建完毕后执行的函数 */
this.$http.get('/api/goods').then((data) => { /* 调用vue的ajax来请求数据，promise语法，并用es6的箭头函数 */
this.items = data.body.data;
})
}
}
</script>
<style lang="css" scoped>
.container {
width: 100%;
margin: 0 auto;
}
.content {
margin-bottom: 1.8rem;
}
.cont-ul {
padding-top: 0.5rem;
background-color: #ccc;
}
.cont-ul::after {
content: '';
display: block;
clear: both;
width: 0;
height: 0;
}
</style>
3. 商品详情页goodsDetail.vue：
a). DetailHeader.vue
<template lang="html">
<div class="head">
<div class="header">
<a href="javascript:;" class="go-back" @click="goBack">返回</a>
<h4 class="header-cont">商品详情页</h4>
</div>
</div>
</template>
<script>
export default {
methods: {
goBack () {
window.history.back();
}
}
}
</script>
<style lang="css" scoped>
.head{
height: 2rem;
}
.header{
width: 100%;
height: 2rem;
position: fixed;
left: 0;
top: 0;
background-color: #fff;
border-bottom: 2px solid #ccc;
}
.header .go-back {
width: 2rem;
height: 2rem;
text-align: center;
color: #ccc;
font-size: 0.8rem;
float: left;
line-height: 2rem;
margin-left: 1rem;
position: absolute;
left: 0;
top: 0;
}
.header .header-cont {
width: 100%;
text-align: center;
line-height: 2rem;
font-size: 1.2rem;
}
</style>
b). goodsDetail.vue
<template lang="html">
<div class="detail">
<detail-header></detail-header>
<p class="site-title">树懒果园 泰国进口大金煌芒果</p>
<p class="site-cont">5斤装，约2-4个果，大！！！甜！！！</p>
<common-footer></common-footer>
</div>
</template>
<script>
import DetailHeader from '../components/DetailHeader'
import CommonFooter from '../components/commonFooter'
export default {
data () {
return {
}
},
components: {
DetailHeader,
CommonFooter
}
}
</script>
<style lang="css">
.detail {
padding: 0.25rem;
font-size: 12px;
}
.detail > img {
display: block;
width: 80%;
margin: 0 auto 0.5rem;
}
.detail > p {
font-size: 1.1rem;
line-height: 1.5rem;
text-align: left;
padding-bottom: 0.5rem;
}
.detail > p.site-title {
color: #ff8000;
}
.detail > p.site-cont {
color: #666;
font-size: 0.9rem;
}
</style>
网友评论
还有就是你是怎么从vue初始化的那个界面跳转到你现在的主页的
我照着你的步骤一路走了下来，数据可以请求出来，就后面运行的时候报错，错误如下：
“Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-cEmJ9wfQpnZLR35+jGeZk1WmknBbXo0CyiXREeJHUGo='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
addAnimations @ VM60:47
init @ VM60:103
(anonymous) @ VM60:106
doAdblock @ VM60:107
(anonymous) @ VM60:1
(anonymous) @ include.postload.js:1
sendResponseAndClearCallback @ VM55 extensions::messaging:417
messageListener @ VM55 extensions::messaging:449
EventImpl.dispatchToListener @ VM48 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM54 extensions::utils:140
EventImpl.dispatch_ @ VM48 extensions::event_bindings:387
EventImpl.dispatch @ VM48 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM54 extensions::utils:140
dispatchOnMessage @ VM55 extensions::messaging:390”
help,感觉迷乱了。
vue新手，这是我照着写的第一个列子。。
报错：XMLHttpRequest cannot load file:///C:/api/goods. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ vue-resource.es2015.js:1085
错误如下：
ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-1dcad40a","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/index.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<common-header></common-header>
<div class="head">
<div class="header">
<h4 class="header-cont">主页</h4>
</div>
</div>
<common-footer></common-footer>
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
@ ./src/components/index.vue 10:0-358
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
控制台显示GET http://localhost:8090/ 404 (Not Found)
和<img :src="xxx"/>这种有区别吗？
好像还缺少mainJS和indexjs说明
定义好了各个组件的.Vue，怎么让页面显示出来呢？
是不是后面应该还有部分配置？
[Vue warn]: Error in created hook:
(found in <Home> at E:\project\git\vue\vuedemo\src\page\home.vue)
vue.esm.js?c2ce:1445 TypeError: Cannot read property 'get' of undefined
这两个错误全是created钩子的错，这是我写的
created () {
this.$http.get('/api/goods').then((data) => {
this.items = data.body.data
})
}
你应该是少了一步配置没说吧？
./src/router/index.js
这个路由的配置文件也需要进行更改，不然会提示hello页面不存在