vue如何引用其他组件(css和js)

 更新时间:2017年04月13日 08:54:16   作者:懒人猫   我要评论

本篇文章主要介绍了vue如何引用其他组件(css和js) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1.vuejs组件之间的调用components

注意:报错Do not use built-in or reserved HTML elements as component id:

修改组件的名字,例如不能使用address为组件名字

组件名字不要使用内置的或保留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-cli里应用Vuex的state和mutations方法

    在Vue-cli里应用Vuex的state和mutations方法

    今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue双向绑定的简单实现

    vue双向绑定的简单实现

    这篇文章主要为大家详细介绍了vue双向绑定的简单实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 详解@Vue/Cli 3 Invalid Host header 错误解决办法

    详解@Vue/Cli 3 Invalid Host header 错误解决办法

    这篇文章主要介绍了详解@Vue/Cli 3 Invalid Host header 错误解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Element输入框带历史查询记录的实现示例

    Element输入框带历史查询记录的实现示例

    这篇文章主要介绍了Element输入框带历史查询记录的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue.js中指令Directives详解

    vue.js中指令Directives详解

    这篇文章主要为大家详细介绍了vue.js中指令Directives,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue生命周期示例详解

    Vue生命周期示例详解

    这篇文章主要为大家详细介绍了Vue生命周期的示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue bus全局事件中心简单Demo详解

    vue bus全局事件中心简单Demo详解

    ue-bus 提供了一个全局事件中心,并将其注入每一个组件,你可以像使用内置事件流一样方便的使用全局事件。这篇文章给大家介绍了vue bus全局事件中心简单Demo,需要的朋友参考下吧
    2018-02-02
  • vue 动态改变静态图片以及请求网络图片的实现方法

    vue 动态改变静态图片以及请求网络图片的实现方法

    下面小编就为大家分享一篇vue 动态改变静态图片以及请求网络图片的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 示例vue 的keep-alive缓存功能的实现

    示例vue 的keep-alive缓存功能的实现

    这篇文章主要介绍了示例vue 的keep-alive缓存功能的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 分分钟玩转Vue.js组件

    分分钟玩转Vue.js组件

    这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论