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.js过渡css类名的理解(推荐)
首先附上官方文档图. 总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠标的mouseover和mouseout事件联想在一起,在经过多方的查找,总算是理解了,以下就是我所理解的意思,希望对路过的有所帮助,更希望路过的能帮我检查检查. start: 首先,通过一个例子来说明,实践是检验真理的唯一标准. 结果:点击按钮,show=false时,div消失:再次点击,show=true,div用蓝色逐渐
-
vue过渡和animate.css结合使用详解
今天学习了vue过渡和animate.css结合使用,所以,添加一点小笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script type="text/javascript" src="vue.js"></scri
-
用Vue-cli搭建的项目中引入css报错的原因分析
我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧! 1.问题描述 之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错.下如图 经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可 { test: /\.css$/, includ
-
详解webpack打包vue时提取css
webpack打包vue项目的时候默认会把vue里的css打包到页面上. webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: { css: ExtractTextPlugin.extract({ fallback:'vue-style-loader', use:'css-loader', publicPath:"../"
-
详解在Vue中有条件地使用CSS类
很多时候Web在运行时要更改元素的CSS类名.但是在改变类名时,有时最好是有条件地应用样式.例如你有一个翻页的效果.翻页效果通常有一个高亮的效果,用于向用户显示当前页,这对于用户而言是很有帮助的.该项目的样式是有条件设置的,基于当前正在查看的页面. 翻页常见的一个效果看起来像下面这样: 在这个示例中,共有五页,每次只选择其中一个页面.如果你用Bootstrap构建一个分页器,那么所选的页面将有一个名为 active 的CSS类名应用在列表项中.如果页面是当前浏览的页面,那么你希望该类被应用.换句
-
VueJS如何引入css或者less文件的一些坑
我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都
-
Vue项目中引入外部文件的方法(css、js、less)
这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font
-
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.
-
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富. 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧. 第一步:准备开发环境 cropper.js是基于jquery的,所以要先安装jquery 执行命令: npm install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置,添加标红的一行 第二步:新建图片裁剪组件 ind
-
Vue使用CDN引用项目组件,减少项目体积的步骤
Vue项目打包后有的文件动辄几百KB或几M,这对一个前端项目的加载无疑是致命的.当你的服务器部署在阿里云或亚马逊,每秒只有100kb的加载速度时,页面的载入速度绝对让你崩溃.那么有什么办法可以在依旧是100kb/s的加载速度下让我们的页面快起来呢?CDN算是其中之一的解决办法. 首先,我们要明白为什么我的Vue项目在打包后产生的文件会那么大.我们在最开始使用Vue的时候几乎所有组件.插件的引用都会放到项目主文件中进行即 main.js文件,我们的引用方式可能是这样的: import Vue fr
-
vue在同一个页面重复引用相同组件如何区分二者
目录 同一个页面重复引用相同组件如何区分二者 1.使用情境 2.解决方法 在同一个页面重复引用相同组件时的干扰处理 同一个页面重复引用相同组件如何区分二者 1.使用情境 我在同一个vue中引用了同样的一个图层选择的组件,需要区分二者的选择的radio值,如果不做区分,这二者选择的radio值看上去将会一样 2.解决方法 先说原理,这个重复引用的组件虽然一样,但是二者在被创建的时候各自走了一遍生命周期,所以变量之间不冲突. 首先在引用组件中新增一个props,这里命名为spareId,用来区分二者
-
spring boot 2.x html中引用css和js失效问题及解决方法
在application.properties中配置了static的默认路径 我的static目录结构是这样的 index.html中这样引用css或者js文件,用到了th标签 html使用th标签需要先导入 以上这样配置好了之后发现网页的css和js果然加载出来了. 自定义拦截器失效 在自定义拦截器注册之后发现静态资源被拦截了,注释掉拦截器发现果然是拦截器的问题. 在注册方法上使用了excludePathPatterns()排除静态资源的拦截,发现该方法失效了,查看源码WebMvcConfig
-
vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from './studentCourse.vue' import studentInfo1 from './studentInfo.vue' export var studentCourse=studentCourse1 export var studentInfo=studentInfo1 2.写法二 ex
-
解决vue项目中某一页面不想引用公共组件app.vue的问题
Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "
-
vue 公共列表选择组件,引用Vant-UI的样式方式
此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he
-
分离vue文件中css、js代码的简单技巧
目录 场景 方法 index.vue 基础代码 index.scss 基础代码 index.js 基础代码 拓展 代码 总结 场景 1.因为早期是iOS开发,形成的MVC习惯,个人喜欢css.js代码独立放一个文件里面,也就是分离样式模块和业务处理模块 2.写复杂界面.复杂业务的时候,界面.样式.业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧(简单页面可忽略) 3.基于vue2 cli3项目 方法 挺简单的,就是利用下ES6的import和export 例如mockData
随机推荐
- asp.net System.Net.Mail 发送邮件
- 快速理解MySQL中主键与外键的实例教程
- vue Element-ui input 远程搜索与修改建议显示模版的示例代码
- IOS 开发之swift中手势的实例详解
- IOS Swift3 四种单例模式详解及实例
- Java求一个分数数列的前20项之和的实现代码
- Oracle数据库的字段约束创建和维护示例
- Python单例模式实例分析
- js实现仿QQ秀换装效果的方法
- Asp.net 图片文件防盗链(尊重劳动成果)及BeginRequest事件学习
- C++ vector的用法小结
- php基于单例模式封装mysql类完整实例
- 鼠标滑过缩略图时放大图片(纯Css)
- Linux系统中bash shell编程的10个基础问题讲解
- Python中一些自然语言工具的使用的入门教程
- 将MySQL查询结果按值排序的简要教程
- 比较简单的jquery教程 Easy Ajax with jQuery 中文版全集第1/3页
- 学习javascript面向对象 理解javascript原型和原型链
- Serv-U 550 Permission denied 的解决办法
- 缓存服务器的建立原理分析第1/2页