精华内容
下载资源
问答
  • methods中在定义一次

    在methods中在定义一次
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue中使用import引入的(方法)function

    千次阅读 2021-04-08 10:14:24
    vue3种使用import引入的方法 vue3废弃了过滤器的写法,但是很多时候我们对数据进行处理的时候是需要一些转化的,比如我最近遇到的时间转化的问题。刚开始我的做法是 然后用的地方引入 ...这样就可以html中使用imp

    vue3种使用import引入的方法
    vue3废弃了过滤器的写法,但是很多时候我们对数据进行处理的时候是需要一些转化的,比如我最近遇到的时间转化的问题。刚开始我的做法是在这里插入图片描述
    然后在用的地方引入在这里插入图片描述
    一开始的时候我在用的地方直接用了在这里插入图片描述
    然而。。控制台报错是这样的在这里插入图片描述
    研究一番之后发现是html里面的内容引用的function必要要export default之后才能使用,所以vue3的话就是把import的方法return 出去就可以
    在这里插入图片描述
    vue2的话就是在methods里面声明一下也可以
    在这里插入图片描述

    这样就可以在html中使用import的方法啦
    在这里插入图片描述

    展开全文
  • ,require 和 import 导入文件有什么区别呢 ,我们这里具体来研究一下这个问题 首先 ,我们创建 a.js 和 b.js ,b.js导出模块 ,a.js导入模块 ,再让 main.js 入口模块 import a.js, 使其执行 import 导入 export 和 ...

    我们知道 ,vue-cli 帮助我们初始化了 webpack 使得我们配置导入文件非常轻松 ,那么 ,它导入文件到底是怎样的呢 ? ,require 和 import 导入文件有什么区别呢 ,我们在这里具体来研究一下这个问题

    首先 ,我们创建 a.jsb.js ,b.js导出模块 ,a.js导入模块 ,再让 main.js 入口模块 import a.js, 使其执行

    image-20211120122544310

    import 导入 export 和 export default

    这个没什么好说的 ECMAScript标准,看看结果就行

    b.js

    export function hehe() {
      console.log('hello')
    }
    
    export function haha() {
      console.log('world')
    }
    
    export default {
      hehe1() {
        console.log('hello1')
      },
      haha1() {
        console.log('world1')
      }
    }
    

    a.js

    import {haha,hehe} from './b'
    import b from './b';
    hehe();
    haha();
    b.hehe1();
    b.haha1();
    console.log(b);
    

    观测结果

    image-20211120130000578

    require 导入 module.exports

    没啥好说的 ,CommonJs标准

    b.js

    module.exports = {
      hehe() {
        console.log('hello')
      },
      haha() {
        console.log('world')
      }
    }
    

    a.js

    let b = require('./b');
    b.hehe();
    b.haha();
    console.log(b);
    

    观测结果

    image-20211120130328531

    import 导入 module.exports

    b.js

    module.exports = {
      hehe() {
        console.log('hello')
      },
      haha() {
        console.log('world')
      }
    }
    

    a.js

    import b from './b';
    
    b.haha();
    b.hehe();
    console.log(b);
    

    观测结果

    image-20211120122721216

    可见 module.exports 导出模块是直接导出了一个对象

    require 导入 export 和 export default

    require导入 export

    b.js

    export function hehe() {
      console.log('hello')
    }
    
    export function haha() {
      console.log('world')
    }
    

    a.js

    let b = require('./b');
    b.hehe();
    b.haha();
    console.log(b);
    

    观测结果

    image-20211120123202053

    可见导出的模型是一个 module 模型, 和普通 import 导入没什么区别

    require 导入export default

    当我们用 require 导入 export default 时 我们就要注意了

    b.js

    export default {
      hehe() {
        console.log('hello')
      },
      haha() {
        console.log('world')
      }
    }
    

    a.js

    let b = require('./b');
    // 在 default 对象中
    b.default.hehe();
    b.default.haha();
    console.log(b);
    

    观测结果

    image-20211120123629460

    可见 ,如果是 export default ,那么会给在对象里新建一个default 的键 ,对应着导出的内容 ,所以获取 export default的值

    我们喜欢

    let b = require('./b').default;
    

    导入 css

    我们可以使用 import 或者 require 的方式导入css ,注意 ,这种导入方式 css 将会是全局样式

    let b = require('./assets/css/init.css');
    import init from './assets/css/init.css';
    console.log(b); // {} 都是空对象
    console.log(init) // {}
    

    image-20211120124505950

    导入图片

    let b = require('./assets/img/logo.png');
    import init from './assets/img/logo.png';
    console.log(b);
    console.log(init)
    console.log(b === init)
    

    观测结果

    image-20211120124643968

    可见 ,图片导入 用什么都可以

    导入json

    我们新建一个JSON 文件

    {
      "name": "hjy",
      "age": 17,
      "hobbies": ["篮球","排球","羽毛球"]
    }
    

    image-20211120125330823

    let json1 = require('./hello.json');
    import json2 from './hello.json';
    
    console.log(json1);
    console.log(json2);
    console.log(json2 === json1)
    

    观测结果

    image-20211120125352705

    可见都被转换成了对象 ,webpack 的转换功能真不错

    展开全文
  • 部分导出和部分导入的优势,当资源比较大时建使用部分导出,这样一来使用者可以使用部分导入来减少资源体积,比如element-ui官方的就推荐使用部分导入来减少项目体积,因为element-ui是一个十分庞大的框架,如果我们...

    一、部分导出和部分导入
    部分导出和部分导入的优势,当资源比较大时建使用部分导出,这样一来使用者可以使用部分导入来减少资源体积,比如element-ui官方的就推荐使用部分导入来减少项目体积,因为element-ui是一个十分庞大的框架,如果我们只用到其中的一部分组件, 那么只将用到的组件导入就可以了。
    1.部分导入

    export function helloWorld(){
     conselo.log("Hello World");
    }
    export function test(){
     conselo.log("this's test function");
    }
    

    1.部分导入

    import {helloWorld} from "./A.js" //只导入*.js中的helloWorld方法
    helloWorld(); 
    

    2.全部导入

    import * as _A from "./A.js" //导入全部的资源,_A为别名,在调用时使用
    _A.helloWorld(); //执行A.js中的helloWorld方法
    _A.test(); //执行A.js中的test方法
    

    二、全部导出和全部导入
    如果使用全部导出,那么使用者在导入时则必须全部导入,推荐在写方法库时使用部分导出,从而将全部导入或者部分导入的权力留给使用者。
    需要注意的是:一个js文件中可以有多个export,但只能有一个export def
    a). public.js

    var helloWorld=function(){
     console.log("Hello World");
    }
    var test=function(){
     console.log("this's test function");
    }
    export default{
     helloWorld,
     test
    }
    

    b). 页面

    import A from "./public.js"
    A.helloWorld();
    A.test();
    
    展开全文
  • node编程最重要的思想就是模块化,import和require都是被模块化所使用。 遵循规范 require 是 AMD规范引入方式 import是 es6 的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 调用时间 require是运行...
  • Regenerator -./src/utils/request运行ime/runtime.js。js 要安装它,你可以运行:npm install——save regenerator-runt ime/runt ime。js 运行 npm install——save regenerator-runt ime/runtime,j
  • 1.使用import.meta.globEager() const getSrc = (name) => { const path = `/static/icon/${name}.svg`; const modules = import.meta.globEager("/...2.computed属性中使用动态路径 var imagePath = .
  • import在引入文件路径时,引入一个依赖包,不需要相对路径。如:import app from ‘app’;, 但引入一个自己写的js文件,是需要相对路径的。如:import app from ‘./app.js’;。 引入第三方插件 import Vue from '...
  • vue使用import来引入组件的注意事项

    千次阅读 2020-12-20 12:44:02
    而上面定义的这3类可导入文件,js和vue是可以省略后缀的:import test from './test.vue' 等同于: import test from './test'同理:import test from './test.js' 等同于:import test from './test'json不可以省略...
  • 如果没有安装babel-plugin-syntax-dynamic-import插件,并.babelrc引入此插件,那么就会报错。这是 webpack 动态导入模块的设置。 参考: Vue-router 里 import 动态导入模块报错_learning_H的博客-CSDN博客...
  • vite glob-import 官方文档 1.引入库 以 Vuex4+ 批量导入store模块为例 假设有如下目录结构 代码: import { createStore } from 'vuex' 导入模块 const files = import.meta.glob('./module/*.js') 或者 const ...
  • 这篇文章主要介绍了vue项目中导入swiper插件的方法,现在分享给大家,也给大家做个参考。 版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4。 常用的版本是swiper3和swiper4,我选择的是swiper3。 ...
  • export const sqrt = Math.sqrt;export function square(x) {return x * x;}export function diag(x, y) {return sqrt(square(x) + square(y));...使用 lib.sqrt/lib.square()4 只是导入,不需调用如c...
  • Vue中import引入方式详解 1.引入第三方插件 import echarts from ‘echarts’ import axios from ‘axios’ import ElementPlus from “element-plus”; 2.引入工具类 一、 引入单个 import { isNonNegative } ...
  • import: html文件,通过script标签引入js文件。 而vue中,通过import xxx from xxx...路由index.js导入apple.vue和banana.vue import banana from '@/components/banana' import apple from '../components
  • vue项目中如何使用excel导入导出 从vue-element-admin中提供的excel导入功能迁移到当前的项目中 导入 安装依赖 安装插件 npm install xlsx ...页面中使用前面封装的excel上传组件,并补充导入成功后
  • 1 引入第三方插件import echarts from 'echarts'2 引入工具类第一种是...下面是写法,需要export导出export function axiosfetch(options) {}第二种 导入成组的方法import * as tools from './libs/tools'其中tools....
  • vue中使用导入的样式

    2021-10-27 17:34:00
    首先,要定义一个单独的样式文件,将公共样式抽离。 其次,通过@import '../../components/index.less'; 引入我们抽离的公共逻辑。
  • 首先我们先使用npm导入 ...导入成功后,main.js import VueSwal from 'vue-swal'; Vue.use(VueSwal) 写一个小Demo this.$swal("Success", "信息保存成功","success"); 最后实现效果如图:
  • 我们vue开发的时候,对import vue from 'vue'肯定是不陌生的 但是有没有人具体思考过这个vue到底是什么,从哪里来 以及我们使用vue报错的时候为什么指向的文件是vue.runtime.esm.js文件 这里的话,我就做一个...
  • 最近使用webpack打包vue的时候,引入vue的时候出现了问题。 JavaScript代码: import Vue from 'vue' new Vue({ el:'#app', template:` <div> {{name}} </div> `, data:{ name:...
  • 1、安装 cnpminstall--save-devbabel-plugin-syntax-dynamic-import 2、根路径创建.babelrc文件(我没找到,胡加到dev.conf... import('@/components/formradio.vue') 4、动态写法,注意不是单引号,注意不是单引...
  • 在vue中导入Excel表

    2020-12-24 21:23:48
    使用的库js-xlsx纯JS即可读取和导出excel的工具库https://github.com/SheetJS/js-xlsx安装直接下载dist目录下有很多个JS文件,一般情况下用xlsx.core.min.js就够... npm安装npm install xlsxmain.js引引入import...
  • 如何让你的前端程序看起来很优雅而又简单。...为什么我说管理系统适合用这套ui呢,因为管理系统大多数使用到的组件都能这上面找到,而且看起来清晰淡雅,不信你看:elementui的官方地址:http://ele...
  • // 从 directives 文件夹引入包含所有自定义指令的对象 directives import * as directives from '@/directives' // 使用对象的keys方法把该对象转换为数组循环注册 Object.keys(directives).forEach(key => ...
  • vue项目中导入视频

    2021-06-01 10:08:50
    vue项目中引入视频插件 一、安装插件 vue-video-player npm install vue-video-player -s 二、main.js里倒入并使用 import VideoPlayer from 'vue-video-player' ...三、在vue文件中使用 1、HTML &
  • 1、ES6的重要一个内容就是:模块化 ...3)、而我们在使用 import 导入一个模块的时候通常这样使用import util from ‘@/utills/request.js’ 或者路由懒加载: component: () => import(’@
  • 在vue项目中使用datav

    2021-07-23 10:23:48
    datav Vue数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用 DataV是一个基于Vue的数据可视化组件库(当然也有React版本) ...import Vue from 'v
  • 组件的style使用@import方式引入外部css,发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。 <style lang="scss" scoped> @import url("/style/index.scss") <style&...
  • 将整个工程用到的图标,全部打包生成字体文件,代码全局引入,只要通过标签和class就能够使用 缺点: 当新增图标的时候,需要重新生成字体文件,当团队开发的时候,新增图标就显得格外麻烦 svg时代 优势: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,018
精华内容 20,007
关键字:

在vue中使用import导入

vue 订阅