vue引用其他组件,css

报错：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>

　　

转载于:https://www.cnblogs.com/summerXll/p/6540522.html