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>