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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 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
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
预备党员思想汇报
2014/01/08 职场文书
房地产销售计划书
2014/01/10 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
音乐剧猫观后感
2015/06/04 职场文书
运动会3000米加油稿
2015/07/21 职场文书
初中政治教学反思
2016/02/23 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL