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


Posted in Javascript onApril 13, 2017

1.vuejs组件之间的调用components

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

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

组件名字不要使用内置的或保留HTML元素为组件id,

App.vue是一个入口,vue必须注册才能使用

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

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

2.vue引入外部的css,放在和引入vue的位置一样

./代表当前项目,../代表上一级项目

import '../static/style/reset.css'

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

如果引用的css,js不起作用,在index.html里面引用,还是不起作用,注意引用顺序

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

3.关于购物车,Cannot read property 'get' of undefined(…)

解决办法:

在app.vue里面引入js不起作用,引用node_modules里面的也不起作用,在index.html里面引入文件,这个文件是放在style里面的,记得url里面的路径

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

解决方案:

1.在index里面引入axios.js,vue里面用axios;如果vue里面用vue-resource的$http会报错get“”

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

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)
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
react国际化react-intl的使用
May 06 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 #Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
vue组件如何被其他项目引用
Apr 13 #Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 #Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 #Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
matplotlib绘制动画代码示例
2018/01/02 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python itertools.product方法代码实例
2020/03/27 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
如何写好自荐信
2014/04/07 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
后进生评语大全
2015/01/04 职场文书
父亲节寄语大全
2015/02/27 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python