vue加载远程(网络)js

JavaScript033

vue加载远程(网络)js,第1张

vue项目中有时候会遇到加载远程（网络）js的情况，常用的方法有以下两种：

以加载在线的cesium为例

在组件中可以通过 window.Cesium 来获取加载的js，示例如下：

在main.js里注册组件

注意：注册组件一定要在new Vue之前

在组件中使用：

这样使用比较灵活还能在加载完成和加载失败时做一些操作。

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

下面一段简单的代码给大家介绍Vue加载组件的几种方式，具体代码如下所示：

//正常加载

import index from '../pages/index.vue'

import view from '../pages/view.vue'

//懒加载

const index = resolve => require(['../pages/index.vue'], resolve)

const view = resolve => require(['../pages/view.vue'], resolve)

//懒加载 - 按组

const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')

const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')

// 懒加载 - 按组 import，基于ES6 import的特性

const index = () => import('../pages/index.vue')

const view = () => import('../pages/view.vue')

补充：Vue动态加载组件的四种方式

动态加载组件的四种方式：

1、使用import导入组件，可以获取到组件

var name = 'system'

var myComponent =() => import('../components/' + name + '.vue')

var route={//前端全栈开发交流学习圈：866109386

  name:name,//帮助1-3年前端人员，提神技术思维

  component:myComponent

}

2、使用import导入组件，直接将组件赋值给componet

var name = 'system'

var route={//前端全栈开发交流学习圈：866109386

  name:name,//帮助1-3年前端人员，提神技术思维

  component :() => import('../components/' + name + '.vue')

}

3、使用require 导入组件，可以获取到组件

var name = 'system'

var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')))

var route={//前端全栈开发交流学习圈：866109386

  name:name,//帮助1-3年前端人员，提神技术思维

  component:myComponent

}

加载和显示新数据在vue里最简单了，往你的数据中添加新的值就可以了：methods:{loadMore:function(){yourAjaxMethod(function(moreData){this.items.push(moreData)}.bind(this))}}另外一个问题就是如何触发loadMore，这里像你说的，滚动。所以你需要监听下scroll事件或者使用其他滚动插件比如iscroll，在对应的回调里调用loadMore