精华内容
下载资源
问答
  • Vueexport

    2020-04-10 09:37:01
    Vueexport export default 向外暴露的成员,可以使用任意的变量来接收 在一个模块中,export default只允许向外暴露一次 在一个模块中,可以同时使用export default 和 export向外暴露成员 // test.vue export ...

    Vue中export
    export default 向外暴露的成员,可以使用任意的变量来接收
    在一个模块中,export default只允许向外暴露一次
    在一个模块中,可以同时使用export default 和 export向外暴露成员

    // test.vue
    export default {
    	address:'深圳'
    }
    export var title = '星星'
    export var zzz = 'hhh'
    
    //mian.vue
    import hahahah , {title as title123 , zzz} from './test.vue'
    
    console.log(hahahah)
    console.log(title123 + "6666" + zzz)
    


    打印结果:
    address:‘深圳’
    星星6666hhh

     

    使用export向外暴露成员,只能用{}的形式来接收,这种形式,叫做【按需导出】
    export可以向外暴露多个成员,同时,如果某些成员,我们在import的时候不需要,则可以不在{}中定义
    使用export导出的成员必须严格按照到处时候的名称,来使用{}按需接收;
    如果使用export按需导出的成员想换名称,可以用as进行替换

    原文链接:https://blog.csdn.net/Meraln/article/details/100728863

    展开全文
  • 问题: 我刚刚安装了Vue,并且一直在使用vue-cli webpack模板创建...export default { name: 'app', data: [] } 而在其他教程中,我看到绑定的数据: new Vue({ el: '#app', data: [] )} 有什么区别,为...

    问题:

    我刚刚安装了Vue,并且一直在使用vue-cli webpack模板创建项目。 当它创建组件时,我注意到它将我们的数据绑定在以下内容中:

    export default {
        name: 'app',
        data: []
    }
    

    而在其他教程中,我看到绑定的数据:

    new Vue({
        el: '#app',
        data: []
    )}

     

    有什么区别,为什么看起来两者之间的语法不同? 我无法从我在vue-cli生成的App.vue中使用的标签内部获取“新Vue”代码。

    解析:

    当你声明:

     new Vue({
        el: '#app',
        data () {
          return {}
        }
    )} 

    这通常是应用程序其余部分来自的根Vue实例。 这会挂掉html文档中声明的根元素,例如:

     <html>
      ...
      <body>
        <div id="app"></div>
      </body>
    </html> 

    另一种语法是声明一个可以在以后注册和重用的组件。 例如,如果您创建单个文件组件,如:

     // my-component.js
    export default {
        name: 'my-component',
        data () {
          return {}
        }
    } 

    您可以稍后导入它并使用它:

     // another-component.js
    <template>
      <my-component></my-component>
    </template>
    <script>
      import myComponent from 'my-component'
      export default {
        components: {
          myComponent
        }
        data () {
          return {}
        }
        ...
      }
    </script> 

    另外,请务必将data属性声明为函数,否则它们不会被动反应。

     

    参考:

    https://stackoverflow.com/questions/48727863/vue-export-default-vs-new-vue

     

    ****************************

    1.export与export default均可用于导出常量、函数、文件、模块等
    2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
    3.在一个文件或模块中,export、import可以有多个,export default仅有一个
    4.通过export方式导出,在导入时要加{ },export default则不需要

    1.export
    //a.js
    export const str = "blablabla~";
    export function log(sth) { 
      return sth;
    }
    对应的导入方式:
    
    //b.js
    import { str, log } from 'a'; //也可以分开写两次,导入的时候带花括号
    
    2.export default
    //a.js
    const str = "blablabla~";
    export default str;
    对应的导入方式:
    
    //b.js
    import str from 'a'; //导入的时候没有花括号
    

    使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名

    //a.js
    let sex = "boy";
    export default sex(sex不能加大括号)
    //原本直接export sex外部是无法识别的,加上default就可以了.
    但是一个文件内最多只能有一个export default。
    其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,
    自然default只能有一个值,所以一个文件内不能有多个export default。
    
    // b.js
    本质上,a.js文件的export default输出一个叫做default的变量,
    然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,
    且不需要用大括号包含
    import any from "./a.js"
    import any12 from "./a.js" 
    console.log(any,any12)   // boy,boy


    export default 和 export 的主要区别 在于对应的import的区别:
    export 对应的 import 需要知道 export抛出的变量名或函数名 import{a,b}
    export default对应的 import 不需要知道 export抛出的变量名或函数名 import anyname

    参考:

    https://www.jianshu.com/p/edaf43e9384f

    展开全文
  • export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数,在入口文件 main.js 构造根组件的同时,...

    1.export与export default均可用于导出常量、函数、文件、模块等

    export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数,在入口文件 main.js 构造根组件的同时,如果根组件还包含其它子组件,那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例,最终形成一棵组件树。

    2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用

    Vue 的模块机制

      Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块

    还可以在 bulid/webpack.base.conf.js 文件中修改相关配置:

      意思是,你的模块可以省略 ".js",".vue",“.json” 后缀,weebpack 会在之后自动添加上;可以用 "@" 符号代替 "src" 字符串等

     

    3.在一个文件或模块中,export、import可以有多个,export default仅有一个,且引入的时候可以给这个模块取任意名字

    使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名

    4.通过export方式导出,在导入时要加{ },export default则不需要

     

    1.export
    //a.js
    export const str = "blablabla~";
    export function log(sth) { 
      return sth;
    }
    对应的导入方式:
    
    //b.js
    import { str, log } from 'a'; //也可以分开写两次,导入的时候带花括号
    
    2.export default
    //a.js
    const str = "blablabla~";
    export default str;
    对应的导入方式:
    
    //b.js
    import str from 'a'; //导入的时候没有花括号
    

     

    展开全文
  • vue 引入 ui 库时,会在 main.js 引入 类似这样的 use 以 vant 组件库为例 import Vant from 'vant'; Vue.use(Vant) 今天练习写一个 loading 的组件。// 首先入口的 js 中引入自己写的公共插件的 js import Vue ...

    1c72981fcad62bb5607051d137a4210b.png
    vue 引入 ui 库时会在 main.js 引入 类似这样的 use  vant 组件库为例
    import Vant from 'vant'; 
    Vue.use(Vant)
    

    今天练习写一个 loading 的组件。

    // 首先入口的 js 中引入自己写的公共插件的 js
    import Vue from 'vue'
    import { _utils } from '@/utils/utils.js'
    Vue.use(_utils)
    

    我使用 install 方法进行注入

    // utils.js 所需私有方法集 这里可进行扩展组件
    import { _loading } from '@/utils/privateTools'
    const _utils = {}
    
    // 挂载全局 _utils
    _utils.install = function (Vue) {
      _loading(Vue, function ($loading) {
        Vue.prototype.$loading = {
          show () {
            $loading.isShow = true
          },
          hide () {
            $loading.isShow = false
          }
        }
      })
    }
    
    export {
      _utils
    }
    

    接着 loading 引入模块

    // privateTools
    import LoadingPlugin from '@/plugins/common/Loading' // 引入 loading 模板
    
    // 挂载
    function _loading (Vue, cb) {
      if (document.getElementsByClassName('loading_wrap').length) {
        return
      }
      // 创建构造器
      let LoadingTpl = Vue.extend(LoadingPlugin)
      // 实例化loading
      let $loading = new LoadingTpl()
      // 插入DOM
      document.body.appendChild($loading.$mount().$el)
      cb($loading)
    }
    
    export {
      _loading
    }
    

    最后 loading 模板

    <template>
      <div class="loading_wrap" v-show="isShow">
        <!-- 图片 -->
        <div class="loading_content"></div>
        <!-- 文字 -->
        <span>{{text}}</span>
      </div>
    </template>
    
    <script>
    /**
     @class {props}
     @param {Boolean} isShow 是否显示
     @param {String} text 提示文字
    */
    export default {
      name: 'myLoading',
      props: {
        isShow: {
          type: Boolean,
          default: false
        },
        text: {
          type: String,
          default: '加载中...'
        }
      }
    }
    </script>
    
    <style lang="scss" src="./index.scss" scoped></style> 
    展开全文
  • Vueexport default 和 export 区别

    千次阅读 2019-01-23 22:55:00
    Vueexport default 和 export 区别 1.exportexport default均可用于导出常量、函数、文件、模块等2.在一个文件或模块中,export、import可以有多个,export default仅有一个3.通过export方式...
  • Vue export、import、export default详解 一.export 一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。 用法 //...
  • vue export default模块

    2020-07-30 11:24:37
    最近学了vue,但是总是对几种数据类型以及数据在传输过程中data和props中指定类型比较模糊,想在webstorm做一个关于vue export default的通用模板,默认注释,使用释放 data data主要是关于数据方面的,其中包含的...
  • vueexport default和new vue的区别

    千次阅读 2019-02-13 21:28:30
    整理来自 ... 其实两者之间是没有任何联系的... var vm = new vue({}) 是为了实例化,而export default {}是导出模块。 另外 export default和export的区别是:前者只能导出一个 ,后者可以导出若干个...
  • Vueexport default

    2018-10-25 16:20:43
    看别人Vue的项目时,老是遇到各种奇奇怪怪的语法,后来一看,都是ES6的语法,所以我们认认真真的把ES6熟读,才能更好的理解Vue的搭建。 1、export default 和 import 以及 export 这两个都是构成模块功能的主要...
  • @exportexport default的区别 前言 在使用vuejs进行模块化开发的过程中,通常需要模块向外暴露成员以便其他模块导入使用。那么怎么进行暴露和导入使用呢?...使用vueexport或者export default进行导出的,...
  • 1.vue文件里面使用: <template> <div> <h1>vue创建的</h1> </div> </template>...export default { msg:"sz", } </script> <style> </style...
  • vue es6 import 和 export

    2020-09-19 09:50:54
    vue es6 import 和 export
  • export可用于导出单文件的多个命名模块 例如: 导出: //demo.js export const str = ‘hello word’ export function f(a){ return a+1; } 引入: //demo2.js import { str,f } from ‘demo1’ export default 只能...
  • 前言写 vue 有很长一段时间了 , 在使用过程中会遇到各种场景的挑战 , 本文记录了我在使用 vue 中发现的一些好的实践,希望能够帮助到大家。vue.js 使用技巧覆盖 element-ui 样式只覆盖某个组件内的 element-ui 样式...
  • 相信很多人都在vue使用过exportexport default、import,然而它们到底有什么区别呢?  在ES6中,exportexport default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import+(常量 | ...
  • 使用export default的vue。在Import时不需要大括号 export default Service.vue <script> import axios from 'axios' import Utils from '@/share/utils'; const Service = { getProductInfo: function (to) ...
  • vueexport default和new vue({})

    万次阅读 2017-12-05 15:01:42
    最近看了些vue,查了一些资料才明白export default 是什么意思。。。  对于export defalut 在是输出,在vue里面的用法是用来输出组件,相当于把接口暴露在外部,共所有文件用import来调用,  而new vue({})是...
  • vue中的export default和new Vue({}) Vue 是什么? 相当于一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。 1.export default export default :相当于提供一...
  • 需求 上一篇章中,我们已经使用webpack构建起了vue开发渲染组件的项目。 image-20200314171816529 ...在login.vue中使用export default暴露script方法,提供执行 image-20200314172250692 ...
  • vue中常使用 export default或export来 导出自己写的js文件,那么他们有什么区别那: 先上代码 js main.js 在一个js中最多只可以有一个expost default,而export可以存在多个; 在import导入时,export ...
  • Vue的组件的export default,new Vue

    千次阅读 2019-06-12 11:30:03
    Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: import Vue from 'vue'; import App from './App'; import router from './route'; import axios from 'axios'; import './less/index'...
  • https://www.cnblogs.com/fger/p/11994968.html
  • 一、部分导入导出 部分导出和部分导入的优势,当资源比较大时建使用部分导出,这样一来使用者可以使用部分...export function helloWorld(){ conselo.log("Hello World"); } export function myTestFuntion(){ ...
  • vue里的export default

    千次阅读 2020-08-19 10:49:30
    相信大家看Vue项目肯定会看到各种导入导出,下面来介绍一下. Vue 的模块机制 Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: ... export 用来导出模块,Vue 的单文件组件通常需要导出
  • vueexportexport default的使用

    千次阅读 2020-10-28 14:19:58
    export default { name: 'HelloWorld' } $(function () { alert('引入成功') }) </script> 一、export的使用 比喻index.js要使用test.js中的数据,首先在test.js文件中进行导出操作 export function list...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,367
精华内容 6,546
关键字:

exportvue

vue 订阅