报错:Unknown custom element: <cartcontrol> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
看下引用是否出错,然后看下被引用页面是否加入export defaulet {};
<template> <div id="app"> <shop></shop> <div class="tab"> g的发高度 </div> <div class="content"> I am content </div> </div> </template> <script> import shop from './components/header/header'; export default { components: { shop } }; </script> <style> </style>
<template> <div id="app"> <v-header></v-header> <div class="tab"> g的发高度 </div> <div class="content"> I am content </div> </div> </template> <script> import header from './components/header/header'; export default { components: { 'v-header': header } }; </script> <style> </style>
1.vuejs组件之间的调用components
注意:报错Do not use built-in or reserved HTML elements as component id:
修改组件的名字,例如不能使用address,header为组件名字
组件名字不要使用内置的或保留HTML元素为组件id,
App.vue是一个入口,vue必须注册才能使用
2.vue引入外部的css,放在和引入vue的位置一样
./代表当前项目,../代表上一级项目
import '../static/style/reset.css'
如果引用的css,js不起作用,在index.html里面引用,还是不起作用,注意引用顺序
3.关于购物车,Cannot read property 'get' of undefined(…)
解决办法:
在app.vue里面引入js不起作用,引用node_modules里面的也不起作用,在index.html里面引入文件,这个文件是放在style里面的,记得url里面的路径
解决方案:
1.在index里面引入axios.js,vue里面用axios;如果vue里面用vue-resource的$http会报错get“”
axios({ method: 'get', url: '/static/style/cart.json', data: { } })
第二种:使用vue-source,引入外部的js
注意引入顺序
<script type="text/javascript" src="static/style/vue.min.js"></script> <script type="text/javascript" src="static/style/vue-resource.min.js"></script> <script type="text/javascript" src="static/style/cart.js"></script>
这是cart.js里面的内容
cartView:function(){
var _this=this //记得写在get上面,不然取不到值
this.$http.get('/static/style/cart.json',{'id':123}).then(function(res){
this.pro=res.body.name;
//_this.produceList=res.body.result.list;
console.log(res.body.name)
})
}
引用vue-router,实现tab切换
html
<div id="app"> <v-header></v-header> <div class="tab"> <div class="tab-item"> <router-link to="/goods">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">评论</router-link> </div> <div class="tab-item"> <router-link to="/seller">商家</router-link> </div> </div> <router-view></router-view> </div>
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; import goods from './components/goods/goods'; import ratings from './components/ratings/ratings'; import seller from './components/seller/seller'; Vue.use(VueRouter); const routes = [ { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, { path: '/seller', component: seller } ]; const router = new VueRouter({ routes }); /* eslint-disable no-new */ new Vue({ router, render: (h) => h(App) //注意:不引用这个,页面会是空白的 }).$mount('#app');
怎么刚进入应用就渲染某个路由组件
// 在创建vue实例并挂载后调用
router.push('/goods')相当于老版本的
router.go('/goods')
子组件引用父组件的属性,通过props传递
饿了么goods引用shopcart组件
1.在app里面传入,
2.传入goods
3.记得使用props传递
表单input双向数据绑定
<script type="text/ecmascript-6"> export default { data() { return { message: 'Hello Vue!' }; } }; </script>
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>