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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
JS表格的动态操作完整示例
Jan 13 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
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
Javascript Global对象
2009/08/13 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python显示进度条的方法
2014/09/20 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python快速排序算法实例分析
2017/11/29 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
应聘收银员个人的求职信
2013/11/30 职场文书
大二学期个人自我评价
2014/01/13 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
移除Selenium中window.navigator.webdriver值
2022/06/10 Python